flutter Form, textfield, textFormField

1. Form

Form 위젯은 여러 입력 필드 (TextField나 TextFormField)를 그룹화하고, 해당 그룹에 대한 유효성 검사를 쉽게 할 수 있도록 합니다. Form은 GlobalKey<FormState>와 함께 사용되어 전체 폼의 상태를 관리하고, 폼의 유효성을 검사하는 데 사용됩니다.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: 'Name'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your name';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Form is valid
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
);

 

GlobalKey와 FormState

• GlobalKey: GlobalKey는 Flutter 위젯 트리 내에서 고유한 식별자를 제공하는 키입니다. 특정 위젯의 상태에 접근하거나 조작할 수 있도록 도와줍니다. GlobalKey는 동일한 키를 가진 두 개의 위젯이 존재하지 않도록 보장하여, 키를 통해 위젯의 상태를 안전하게 참조할 수 있게 합니다.
• FormState: FormState는 Form 위젯의 상태를 나타내며, 폼의 유효성 검사와 폼의 데이터 관리를 포함합니다. FormState는 GlobalKey를 통해 접근할 수 있습니다.

역할과 사용

• GlobalKey<FormState>는 Form 위젯에 고유한 키를 부여하여, 폼의 상태를 관리하고 조작할 수 있게 합니다. 이를 통해 폼의 유효성 검사를 실행하거나 폼을 초기화할 수 있습니다.
• FormState 객체를 통해 폼의 유효성 검사, 폼에 입력된 값의 저장 및 초기화 등의 작업을 수행할 수 있습니다.

// GlobalKey<FormState>를 생성하여 폼의 상태를 관리
final _formKey = GlobalKey<FormState>();

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,  // Form 위젯에 GlobalKey를 연결
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Name'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              // _formKey를 사용하여 FormState에 접근
              if (_formKey.currentState!.validate()) {
                // 모든 입력 필드가 유효함
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Processing Data')),
                );
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

 

이 코드의 작동 방식

1. GlobalKey 생성: final _formKey = GlobalKey<FormState>();를 통해 고유한 키를 생성합니다.
2. Form 위젯에 연결: Form 위젯의 key 속성에 _formKey를 전달합니다.
3. 유효성 검사 실행: 버튼을 눌렀을 때 _formKey.currentState!.validate()를 호출하여 폼의 모든 입력 필드의 유효성 검사를 실행합니다.
4. 폼 상태 제어: 필요에 따라 FormState 객체를 사용하여 폼을 초기화 (reset)하거나, 폼의 데이터에 접근할 수 있습니다.

이 구조를 통해 폼의 유효성 검사를 중앙 집중식으로 관리하고, 사용자가 입력한 데이터를 검증할 수 있습니다. GlobalKey<FormState>는 이러한 폼 상태 관리와 검증 과정을 쉽게 구현할 수 있도록 도와줍니다.

 

2. TextField

TextField는 기본적인 텍스트 입력 위젯입니다. 사용자가 텍스트를 입력할 수 있는 필드를 제공하며, 독립적으로 사용할 수 있습니다. 실시간 입력 처리 및 포커스 제어가 가능합니다.

주요 특징:

• 독립적인 텍스트 입력 필드.
• 실시간으로 텍스트 입력 변화를 감지할 수 있습니다.
• 다양한 입력 옵션을 제공 (비밀번호, 숫자 입력 등).

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your text',
  ),
  onChanged: (text) {
    // 텍스트가 변경될 때마다 호출됩니다.
  },
);

 

3. TextFormField

TextFormField는 TextField의 확장 버전으로, 주로 Form 위젯 내에서 사용됩니다. 텍스트 입력 필드와 유효성 검사 기능을 함께 제공하여 폼의 유효성 검사를 더 쉽게 할 수 있습니다.

주요 특징:

• Form과 함께 사용하여 폼의 유효성 검사에 적합합니다.
• validator 속성을 사용하여 입력된 값의 유효성을 검사할 수 있습니다.
• TextField의 모든 기능을 포함하면서 추가 기능을 제공.

TextFormField(
  decoration: InputDecoration(labelText: 'Enter your password'),
  obscureText: true, // 비밀번호 입력 필드로 사용
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your password';
    }
    if (value.length < 6) {
      return 'Password must be at least 6 characters long';
    }
    return null;
  },
);

요약

• Form: 여러 입력 필드를 그룹화하여 폼 단위의 유효성 검사 및 상태 관리를 할 수 있습니다.
• TextField: 독립적인 텍스트 입력 필드로, 실시간 입력 처리에 적합합니다.
• TextFormField: TextField를 확장하여 유효성 검사 기능을 추가한 위젯으로, 주로 Form 내에서 사용됩니다.