Flutter - TextFormField, Form위젯 , initalRoute

1. 라우터로 페이지 이동 하는 방식

initalRoute(기본페이지) : /login

/home을 요청을 하게 되면 HomePage로 이동,

/login을 요청을 하게 되면 LoginPage로 이동을 한다. 

---

 

2. TextFormField

1. FormField와 TextFormField 두가지가 있다.

다른점은 TextFormField에서는 유효성 검사까지 할 수 있다.

그래서 로그인에서 많이 사용하게된다.

- 로그인 페이지에서 component로 빼고 재사용하기 위해 아래 처럼 작성했다. 

- text는 내가 직접 적어주기 위해서 선택적 매개변수로 선언

- 입력된 값들은 모두 value에 저장이 된다.

import 'package:final_test_app/size.dart';
import 'package:flutter/material.dart';

class CustomTextFormField extends StatelessWidget {
  final String text;
  const CustomTextFormField({required this.text, super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          text,
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
        ),
        SizedBox(height: small_gap),
        TextFormField(
          //1. 값이 없으면 plase enter some text 경고 화면 표시
          validator: (value) => value!.isEmpty ? "${text}을 입력해주세요." : null, // 입력된 값은 value에 저장된다.
          // 2. 해당 textformfield가 비밀번호 입력 양식이라면 ***표시 처리 해줌.
          obscureText: text == "Password" ? true : false,
          decoration: InputDecoration(
              hintText: "${text}를 입력해주세요",
              hintStyle: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: Color(0xff787272),
              ),
              //3. 기본 textFormfield 디자인 - enabledBorder
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0xffD9D9D9), width: 3.0),
                borderRadius: BorderRadius.circular(10),
              ),
              //4. 터치시 TextFormField디자인 - focusedBorder
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0xffD9D9D9), width: 3.0),
                borderRadius: BorderRadius.circular(10),
              ),
              //5. 에러 발생시 TextformField디자인 - errorBorder
              errorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0xffD9D9D9), width: 3.0),
                borderRadius: BorderRadius.circular(10),
              ),
              //6. 에러 발생 후 손가락 터치 디자인  - focusedErrorBorder
              focusedErrorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0xffD9D9D9), width: 3.0),
                borderRadius: BorderRadius.circular(10),
              )),
        ),
      ],
    );
  }
}

---

3. Form위젯

- 데이터 전송을 위해 여러양식의 위젯을 그룹화 해서 전달해줌.

- 입력 요소들의 유효성 검사를 해주는 역할 도 함, Form위젯 내부에 TextFormField여러개를 추가해 입력받고 한번에 전송하는 방식으로 만든다.

- Globalkey로 해당 Form의 상태관리를 하게 된다. 

import 'package:final_test_app/components/custom_text_form_field.dart';
import 'package:final_test_app/size.dart';
import 'package:flutter/material.dart';

class CustomForm extends StatelessWidget {
  final _formKey = GlobalKey<FormState>(); // 글로벌 key

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey, // 해당 키로 Form의 상태를 관리 한다.
      child: Column(
        children: [
          CustomTextFormField(text: "아이디"),
          SizedBox(height: small_gap),
          CustomTextFormField(text: "비밀번호"),
          SizedBox(height: small_gap),
          CustomTextFormField(text: "이메일"),
          TextButton(
            onPressed: () {
              //Form에서 현재의 상태 값이 null이 아니라면 /home로 push 해준다.
              if (_formKey.currentState!.validate()) {
                Navigator.pushNamed(context, "/home");
              }
            },
            child: Text("로그인"),
          )
        ],
      ),
    );
  }
}

결과 화면