Flutter Form

Flutter에서 폼 입력은 사용자로부터 데이터를 수집하는 중요한 기능 중 하나입니다. 이를 위해 Flutter는 다양한 폼 관련 위젯과 유틸리티를 제공합니다. 주로 Form, TextFormField, FormField와 같은 위젯을 사용하여 폼을 구성하고 데이터를 유효성 검사하며 제출할 수 있습니다.

주요 개념

1. Form: 여러 폼 필드를 그룹화하여 유효성 검사를 관리할 수 있습니다. Form 위젯은 GlobalKey<FormState>를 사용하여 폼의 상태를 추적합니다.
2. TextFormField: 텍스트 입력을 위한 폼 필드로, 유효성 검사를 포함할 수 있습니다.
3. FormField: 일반적인 폼 필드를 만들기 위한 기본 클래스입니다.
4. GlobalKey: 폼의 상태를 추적하고 조작하는 데 사용됩니다.

간단한 폼 예시

아래는 사용자가 이름과 이메일을 입력하고 제출 버튼을 클릭하면 입력된 데이터를 출력하는 간단한 폼 예시입니다.

1. 기본 폼 구성

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  } else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                    return 'Please enter a valid email address';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // Form is valid, process data
                    print('Name: ${_nameController.text}');
                    print('Email: ${_emailController.text}');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }
}

설명

1. GlobalKey: GlobalKey<FormState>를 사용하여 폼의 상태를 추적합니다.
2. TextFormField: controller와 validator를 사용하여 텍스트 입력을 관리하고 유효성 검사를 수행합니다.
3. Validator: 각 필드의 유효성을 검사하는 함수를 정의합니다. 필드가 유효하지 않으면 오류 메시지를 반환합니다.
4. ElevatedButton: 버튼을 클릭하면 폼의 유효성을 검사하고, 유효하면 데이터를 처리합니다.

폼 유효성 검사

유효성 검사는 TextFormField의 validator 속성을 통해 수행됩니다. validator 함수는 유효하지 않은 입력에 대해 오류 메시지를 반환하고, 유효한 입력에 대해서는 null을 반환합니다.

데이터 제출 및 처리

폼이 유효한 경우, _formKey.currentState!.validate()가 true를 반환합니다. 이때 입력된 데이터를 처리하거나 저장할 수 있습니다. 예제에서는 입력된 이름과 이메일을 콘솔에 출력합니다.

결론

Flutter에서 폼 입력과 유효성 검사는 Form과 TextFormField 위젯을 사용하여 쉽게 구현할 수 있습니다. GlobalKey를 사용하여 폼의 상태를 추적하고, validator를 통해 각 필드의 유효성을 검사할 수 있습니다. 이를 통해 사용자가 올바른 데이터를 입력하도록 유도하고, 유효하지 않은 입력을 방지할 수 있습니다.