[Flutter] TextFormField (로그인 화면)

---

프로젝트 구조

SignInScreen - 로그인 페이지 메인 (AppBar, Body 들어가는 페이지)

 

---

* automaticallyImplyLeading : 이전 화면으로 돌아가는 아이콘 자동 생성

↕

leading : IconButton 으로 직접 생성도 가능!
(onPressed: () => Navigator.pop(context)) : 이전 화면으로 되돌아간다.

 

---

body : KurlySignForm() : 전체적인 SignForm 에 들어가는 컴포넌트들

---

💜 Form 안에 

_formKey : StatefulWidget 에서 관리하는 글로벌 키

_buildIdField : 아이디 입력폼

_buildPasswordField : 패스워드 입력폼 

DefaultButton(로그인 버튼) + SnackBar

 

* SnackBar? : 화면 하단에 메세지를 띄우는 것

---

FormError(errors: errors) : 에러메세지 컴포넌트

final List<String> errors = [];

에 유효성 검사 실패한 유형들을 담는 리스트 변수를 선언해 준 다음에

errors.remove / errors.add 로 삭제/추가를 하며

 

FormError(errors: errors) 로 직접 body 아래에 추가한다.

 

이때 삭제되거나 추가되는 에러메세지는 직접 하드코딩하는 것이 아닌 

 

String kIdNull = "아이디를 입력해주세요"; 

errors.remove(kIdNull) 와 같이 

전역변수로 관리하는 것이 인상적이었다.

import 'package:flutter/material.dart';

class FormError extends StatelessWidget {
  const FormError({Key? key, this.errors}) : super(key: key);
  // 에러유형 담기는 리스트 변수
  final List<String>? errors;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: List.generate(
        errors?.length ?? 0,
        (index) => Text(
          "* ${errors?[index]}", //ex) * 아이디를 입력해주세요
          style: TextStyle(color: Colors.red),
        ),
      ),
    );
  }
}

---

이 중에서 

하나의 TextFormField 구성! : (_buildIdField, _buildPasswordField)

 

Flutter 공식 문서와 크게 다르지 않았다.

TextFormField(
  decoration: const InputDecoration(
    icon: Icon(Icons.person),
    hintText: 'What do people call you?',
    labelText: 'Name *',
  ),
  onSaved: (String? value) {
    // This optional block of code can be used to run
    // code when the user saves the form.
  },
  validator: (String? value) {
    return (value != null && value.contains('@')) ? 'Do not use the @ char.' : null;
  },
)

---

💜TextFormField 안에

- onSaved (유저가 입력값을 저장할 경우) / onChanged (유저가 값을 변경할 경우)

- validator (유효성 검증 : 입력값에 따라 결과가 변하므로 주로 setState() 들어간다.)

- InputDecoration (꾸밈 요소) 

 

 

가 들어갔다. TextForm 은 응용도 중요하지만

기본적으로 만드는 방법부터 잘 익혀놓아야 한다니 잊지말자 ~_~