Flutter 튜토리얼 15편: 폼과 입력 검증

요약#

핵심 요지#

문제 정의: 사용자 입력을 받고 유효성을 검사하는 폼이 필요하다.
핵심 주장: Flutter의 Form¹과 TextFormField²로 입력 검증 로직을 구현한다.
주요 근거: GlobalKey<FormState>³로 폼 상태에 접근하고, validator 콜백으로 검증한다.
실무 기준: TextEditingController⁴로 입력값을 프로그래밍 방식으로 관리한다.
한계: 복잡한 유효성 검사는 별도 패키지나 비동기 검증이 필요할 수 있다.

문서가 설명하는 범위#

Form 위젯과 GlobalKey로 폼 상태 관리
TextFormField로 입력 검증 구현
TextEditingController로 입력값 제어
포커스 관리와 키보드 제어

읽는 시간: 15분 | 난이도: 중급

참고 자료#

Build a form with validation - 폼 유효성 검사 구현
Retrieve the value of a text field - 입력값 가져오기
Handle changes to a text field - 텍스트 변경 감지
Focus and text fields - 포커스 관리

문제 상황#

로그인, 회원가입, 검색 등 사용자 입력을 받는 화면이 필요합니다.
입력값을 검증하고, 오류 메시지를 표시하고, 제출 버튼을 처리해야 합니다.

폼 요구사항#

1
이메일 입력: 형식 검증
2
비밀번호 입력: 최소 길이 검증
3
전화번호 입력: 숫자 형식 검증
4
제출 버튼: 모든 검증 통과 시 활성화

문제는 다음과 같습니다.

여러 입력 필드의 상태를 관리해야 한다.
각 필드에 맞는 유효성 검사가 필요하다.
검증 실패 시 사용자에게 피드백을 제공해야 한다.
입력 필드 간 포커스 이동을 제어해야 한다.

해결 방법#

Flutter는 Form 위젯으로 여러 입력 필드를 그룹화하고, validator 콜백으로 검증을 처리합니다.

챕터 1: 기본 폼 구조#

Why#

NOTE
여러 TextField를 개별적으로 관리하면 복잡합니다.
Form 위젯은 폼 필드들을 그룹화하고 일괄 검증을 가능하게 합니다.
1
Form → GlobalKey<FormState> → validate() → 모든 필드 검증

What#

NOTE
Form 위젯은 FormField 자식들을 그룹화합니다.
GlobalKey<FormState>를 통해 폼의 상태에 접근하고 검증을 실행합니다.

How#

TIP

기본 폼 구조

1
import 'package:flutter/material.dart';
2

3
class LoginForm extends StatefulWidget {
4
  const LoginForm({super.key});
5

6
  @override
7
  State<LoginForm> createState() => _LoginFormState();
8
}
9

10
class _LoginFormState extends State<LoginForm> {
11
  // 폼 상태에 접근하기 위한 GlobalKey
12
  final _formKey = GlobalKey<FormState>();
13

14
  @override
15
  Widget build(BuildContext context) {
16
    return Scaffold(
17
      appBar: AppBar(title: const Text('로그인')),
18
      body: Padding(
19
        padding: const EdgeInsets.all(16.0),
20
        child: Form(
21
          key: _formKey,
22
          child: Column(
23
            crossAxisAlignment: CrossAxisAlignment.start,
24
            children: [
25
              TextFormField(
26
                decoration: const InputDecoration(
27
                  labelText: '이메일',
28
                  hintText: '[email protected]',
29
                ),
30
                validator: (value) {
31
                  if (value == null || value.isEmpty) {
32
                    return '이메일을 입력해주세요';
33
                  }
34
                  return null;
35
                },
36
              ),
37
              const SizedBox(height: 16),
38
              TextFormField(
39
                decoration: const InputDecoration(
40
                  labelText: '비밀번호',
41
                ),
42
                obscureText: true,
43
                validator: (value) {
44
                  if (value == null || value.isEmpty) {
45
                    return '비밀번호를 입력해주세요';
46
                  }
47
                  return null;
48
                },
49
              ),
50
              const SizedBox(height: 24),
51
              SizedBox(
52
                width: double.infinity,
53
                child: ElevatedButton(
54
                  onPressed: () {
55
                    // 폼 검증 실행
56
                    if (_formKey.currentState!.validate()) {
57
                      ScaffoldMessenger.of(context).showSnackBar(
58
                        const SnackBar(content: Text('로그인 처리 중...')),
59
                      );
60
                    }
61
                  },
62
                  child: const Text('로그인'),
63
                ),
64
              ),
65
            ],
66
          ),
67
        ),
68
      ),
69
    );
70
  }
71
}

핵심 구성요소

구성요소	역할
`Form`	폼 필드들을 그룹화
`GlobalKey<FormState>`	폼 상태에 접근
`TextFormField`	검증 기능이 있는 텍스트 입력
`validator`	검증 로직 (null 반환 시 통과)
`validate()`	모든 필드 검증 실행

Watch out#

WARNING

GlobalKey를 build() 메서드 안에서 생성하면 안 됩니다.
매번 새로운 키가 생성되어 폼 상태가 초기화됩니다.

1
// ❌ 잘못된 방법: build() 안에서 생성
2
@override
3
Widget build(BuildContext context) {
4
  final formKey = GlobalKey<FormState>(); // 매번 새 키 생성!
5
  return Form(key: formKey, ...);
6
}
7

8
// ✅ 올바른 방법: 상태 변수로 선언
9
class _MyFormState extends State<MyForm> {
10
  final _formKey = GlobalKey<FormState>();
11

12
  @override
13
  Widget build(BuildContext context) {
14
    return Form(key: _formKey, ...);
15
  }
16
}

결론: Form과 GlobalKey<FormState>로 폼 상태를 관리하고, validator로 검증합니다.

챕터 2: 다양한 유효성 검사#

Why#

NOTE
입력 유형에 따라 다른 검증 규칙이 필요합니다.
이메일은 형식 검증, 비밀번호는 복잡성 검증, 전화번호는 숫자 검증이 필요합니다.
1
이메일: 정규식으로 형식 검증
2
비밀번호: 길이 + 문자 조합 검증
3
전화번호: 숫자만 허용

What#

NOTE
validator 콜백은 오류 시 문자열을, 성공 시 null을 반환합니다.
정규식이나 조건문으로 다양한 검증 규칙을 구현합니다.

How#

TIP

이메일 검증

1
TextFormField(
2
  decoration: const InputDecoration(labelText: '이메일'),
3
  keyboardType: TextInputType.emailAddress,
4
  validator: (value) {
5
    if (value == null || value.isEmpty) {
6
      return '이메일을 입력해주세요';
7
    }
8
    // 간단한 이메일 형식 검증
9
    final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
10
    if (!emailRegex.hasMatch(value)) {
11
      return '올바른 이메일 형식이 아닙니다';
12
    }
13
    return null;
14
  },
15
)

비밀번호 검증

1
TextFormField(
2
  decoration: const InputDecoration(labelText: '비밀번호'),
3
  obscureText: true,
4
  validator: (value) {
5
    if (value == null || value.isEmpty) {
6
      return '비밀번호를 입력해주세요';
7
    }
8
    if (value.length < 8) {
9
      return '비밀번호는 8자 이상이어야 합니다';
10
    }
11
    // 숫자 포함 확인
12
    if (!value.contains(RegExp(r'[0-9]'))) {
13
      return '숫자를 포함해야 합니다';
14
    }
15
    // 특수문자 포함 확인
16
    if (!value.contains(RegExp(r'[!@#$%^&*(),.?":{}|<>]'))) {
17
      return '특수문자를 포함해야 합니다';
18
    }
19
    return null;
20
  },
21
)

비밀번호 확인 검증

1
class _SignUpFormState extends State<SignUpForm> {
2
  final _formKey = GlobalKey<FormState>();
3
  final _passwordController = TextEditingController();
4

5
  @override
6
  void dispose() {
7
    _passwordController.dispose();
8
    super.dispose();
9
  }
10

11
  @override
12
  Widget build(BuildContext context) {
13
    return Form(
14
      key: _formKey,
15
      child: Column(
16
        children: [
17
          TextFormField(
18
            controller: _passwordController,
19
            decoration: const InputDecoration(labelText: '비밀번호'),
20
            obscureText: true,
21
          ),
22
          TextFormField(
23
            decoration: const InputDecoration(labelText: '비밀번호 확인'),
24
            obscureText: true,
25
            validator: (value) {
26
              if (value != _passwordController.text) {
27
                return '비밀번호가 일치하지 않습니다';
28
              }
29
              return null;
30
            },
31
          ),
32
        ],
33
      ),
34
    );
35
  }
36
}

전화번호 검증

1
TextFormField(
2
  decoration: const InputDecoration(
3
    labelText: '전화번호',
4
    hintText: '010-1234-5678',
5
  ),
6
  keyboardType: TextInputType.phone,
7
  inputFormatters: [
8
    FilteringTextInputFormatter.digitsOnly,
9
  ],
10
  validator: (value) {
11
    if (value == null || value.isEmpty) {
12
      return '전화번호를 입력해주세요';
13
    }
14
    if (value.length != 11) {
15
      return '올바른 전화번호를 입력해주세요';
16
    }
17
    return null;
18
  },
19
)

Watch out#

WARNING
validator는 폼 제출 시에만 실행됩니다.
입력 중 실시간 검증이 필요하면 autovalidateMode를 설정합니다.
1
Form(
2
  key: _formKey,
3
  // 입력 중 자동 검증
4
  autovalidateMode: AutovalidateMode.onUserInteraction,
5
  child: Column(...),
6
)
AutovalidateMode 옵션:

disabled: 자동 검증 안 함 (기본값)

always: 항상 검증

onUserInteraction: 사용자 입력 후 검증

결론: 입력 유형에 맞는 검증 규칙을 validator에 구현하고, autovalidateMode로 검증 시점을 제어합니다.

챕터 3: TextEditingController로 입력값 제어#

Why#

NOTE
입력값을 프로그래밍 방식으로 읽거나 설정해야 할 때가 있습니다.
검색어 초기화, 기본값 설정, 입력값 변환 등에 TextEditingController가 필요합니다.
1
입력값 읽기: controller.text
2
입력값 설정: controller.text = '새 값'
3
입력값 초기화: controller.clear()

What#

NOTE
TextEditingController는 텍스트 필드의 현재 값에 접근하고 변경할 수 있게 합니다.
리스너를 등록하여 입력값 변경을 실시간으로 감지할 수도 있습니다.

How#

TIP

기본 사용법

1
class SearchPage extends StatefulWidget {
2
  const SearchPage({super.key});
3

4
  @override
5
  State<SearchPage> createState() => _SearchPageState();
6
}
7

8
class _SearchPageState extends State<SearchPage> {
9
  // 컨트롤러 생성
10
  final _searchController = TextEditingController();
11

12
  @override
13
  void initState() {
14
    super.initState();
15
    // 입력값 변경 리스너 등록
16
    _searchController.addListener(_onSearchChanged);
17
  }
18

19
  @override
20
  void dispose() {
21
    // 리소스 해제 (필수!)
22
    _searchController.dispose();
23
    super.dispose();
24
  }
25

26
  void _onSearchChanged() {
27
    print('검색어: ${_searchController.text}');
28
  }
29

30
  void _clearSearch() {
31
    _searchController.clear();
32
  }
33

34
  void _setDefaultSearch() {
35
    _searchController.text = 'Flutter';
36
  }
37

38
  @override
39
  Widget build(BuildContext context) {
40
    return Scaffold(
41
      appBar: AppBar(title: const Text('검색')),
42
      body: Padding(
43
        padding: const EdgeInsets.all(16.0),
44
        child: Column(
45
          children: [
46
            TextField(
47
              controller: _searchController,
48
              decoration: InputDecoration(
49
                labelText: '검색어',
50
                suffixIcon: IconButton(
51
                  icon: const Icon(Icons.clear),
52
                  onPressed: _clearSearch,
53
                ),
54
              ),
55
            ),
56
            const SizedBox(height: 16),
57
            ElevatedButton(
58
              onPressed: () {
59
                // 현재 입력값 가져오기
60
                final query = _searchController.text;
61
                print('검색 실행: $query');
62
              },
63
              child: const Text('검색'),
64
            ),
65
          ],
66
        ),
67
      ),
68
    );
69
  }
70
}

onChanged vs addListener

방식	사용 시점
`onChanged`	간단한 콜백만 필요할 때
`addListener`	여러 곳에서 변경 감지가 필요할 때

1
// onChanged 방식
2
TextField(
3
  onChanged: (text) {
4
    print('입력: $text');
5
  },
6
)
7

8
// addListener 방식
9
_controller.addListener(() {
10
  print('입력: ${_controller.text}');
11
});

Watch out#

WARNING
TextEditingController는 반드시 dispose()에서 해제해야 합니다.
해제하지 않으면 메모리 누수가 발생합니다.
1
@override
2
void dispose() {
3
  _emailController.dispose();
4
  _passwordController.dispose();
5
  super.dispose();
6
}
여러 컨트롤러가 있다면 모두 해제해야 합니다.

결론: TextEditingController로 입력값을 프로그래밍 방식으로 제어하고, dispose()에서 반드시 해제합니다.

챕터 4: 포커스 관리#

Why#

NOTE
사용자 경험을 위해 포커스를 제어해야 합니다.
화면 진입 시 첫 번째 필드에 포커스, 검증 실패 시 해당 필드로 포커스 이동이 필요합니다.
1
화면 진입 → 첫 번째 필드 자동 포커스
2
검증 실패 → 오류 필드로 포커스 이동
3
Enter 키 → 다음 필드로 포커스 이동

What#

NOTE
autofocus 속성은 화면 로드 시 자동 포커스를 설정합니다.
FocusNode⁵는 프로그래밍 방식으로 포커스를 제어합니다.

How#

TIP

자동 포커스

1
TextFormField(
2
  autofocus: true, // 화면 로드 시 자동 포커스
3
  decoration: const InputDecoration(labelText: '이메일'),
4
)

FocusNode로 포커스 제어

1
class MultiFieldForm extends StatefulWidget {
2
  const MultiFieldForm({super.key});
3

4
  @override
5
  State<MultiFieldForm> createState() => _MultiFieldFormState();
6
}
7

8
class _MultiFieldFormState extends State<MultiFieldForm> {
9
  final _formKey = GlobalKey<FormState>();
10
  final _emailFocus = FocusNode();
11
  final _passwordFocus = FocusNode();
12
  final _confirmFocus = FocusNode();
13

14
  @override
15
  void dispose() {
16
    _emailFocus.dispose();
17
    _passwordFocus.dispose();
18
    _confirmFocus.dispose();
19
    super.dispose();
20
  }
21

22
  @override
23
  Widget build(BuildContext context) {
24
    return Form(
25
      key: _formKey,
26
      child: Column(
27
        children: [
28
          TextFormField(
29
            focusNode: _emailFocus,
30
            decoration: const InputDecoration(labelText: '이메일'),
31
            textInputAction: TextInputAction.next,
32
            onFieldSubmitted: (_) {
33
              // Enter 키 누르면 다음 필드로 이동
34
              FocusScope.of(context).requestFocus(_passwordFocus);
35
            },
36
          ),
37
          TextFormField(
38
            focusNode: _passwordFocus,
39
            decoration: const InputDecoration(labelText: '비밀번호'),
40
            obscureText: true,
41
            textInputAction: TextInputAction.next,
42
            onFieldSubmitted: (_) {
43
              FocusScope.of(context).requestFocus(_confirmFocus);
44
            },
45
          ),
46
          TextFormField(
47
            focusNode: _confirmFocus,
48
            decoration: const InputDecoration(labelText: '비밀번호 확인'),
49
            obscureText: true,
50
            textInputAction: TextInputAction.done,
51
            onFieldSubmitted: (_) {
52
              // 폼 제출
53
              _submitForm();
54
            },
55
          ),
56
          ElevatedButton(
57
            onPressed: _submitForm,
58
            child: const Text('가입'),
59
          ),
60
        ],
61
      ),
62
    );
63
  }
64

65
  void _submitForm() {
66
    if (_formKey.currentState!.validate()) {
67
      // 폼 제출 처리
68
    } else {
69
      // 검증 실패 시 첫 번째 필드로 포커스
70
      _emailFocus.requestFocus();
71
    }
72
  }
73
}

키보드 액션 버튼

TextInputAction	설명
`next`	다음 필드로 이동
`done`	완료 (키보드 숨김)
`search`	검색 실행
`send`	전송
`go`	이동

Watch out#

WARNING
FocusNode도 dispose()에서 해제해야 합니다.
TextEditingController와 마찬가지로 메모리 누수를 방지합니다.
1
@override
2
void dispose() {
3
  _emailFocus.dispose();
4
  _passwordFocus.dispose();
5
  _emailController.dispose();
6
  _passwordController.dispose();
7
  super.dispose();
8
}

결론: autofocus로 초기 포커스를, FocusNode로 동적 포커스를 제어합니다.

챕터 5: 폼 데이터 저장과 리셋#

Why#

NOTE
검증 통과 후 폼 데이터를 서버로 전송하거나 로컬에 저장해야 합니다.
또한 폼을 초기 상태로 리셋하는 기능도 필요합니다.
1
검증 통과 → save() 호출 → onSaved 실행 → 데이터 저장

What#

NOTE
FormState.save()는 모든 FormField의 onSaved 콜백을 호출합니다.
FormState.reset()은 폼을 초기 상태로 되돌립니다.

How#

TIP

폼 데이터 수집과 제출

1
class ProfileForm extends StatefulWidget {
2
  const ProfileForm({super.key});
3

4
  @override
5
  State<ProfileForm> createState() => _ProfileFormState();
6
}
7

8
class _ProfileFormState extends State<ProfileForm> {
9
  final _formKey = GlobalKey<FormState>();
10

11
  // 폼 데이터 저장용 변수
12
  String _name = '';
13
  String _email = '';
14
  String _phone = '';
15

16
  @override
17
  Widget build(BuildContext context) {
18
    return Form(
19
      key: _formKey,
20
      child: Column(
21
        children: [
22
          TextFormField(
23
            decoration: const InputDecoration(labelText: '이름'),
24
            validator: (value) {
25
              if (value == null || value.isEmpty) {
26
                return '이름을 입력해주세요';
27
              }
28
              return null;
29
            },
30
            onSaved: (value) {
31
              _name = value ?? '';
32
            },
33
          ),
34
          TextFormField(
35
            decoration: const InputDecoration(labelText: '이메일'),
36
            keyboardType: TextInputType.emailAddress,
37
            validator: (value) {
38
              if (value == null || value.isEmpty) {
39
                return '이메일을 입력해주세요';
40
              }
41
              return null;
42
            },
43
            onSaved: (value) {
44
              _email = value ?? '';
45
            },
46
          ),
47
          TextFormField(
48
            decoration: const InputDecoration(labelText: '전화번호'),
49
            keyboardType: TextInputType.phone,
50
            onSaved: (value) {
51
              _phone = value ?? '';
52
            },
53
          ),
54
          const SizedBox(height: 24),
55
          Row(
56
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
57
            children: [
58
              ElevatedButton(
59
                onPressed: _submitForm,
60
                child: const Text('저장'),
61
              ),
62
              OutlinedButton(
63
                onPressed: _resetForm,
64
                child: const Text('초기화'),
65
              ),
66
            ],
67
          ),
68
        ],
69
      ),
70
    );
71
  }
72

73
  void _submitForm() {
74
    if (_formKey.currentState!.validate()) {
75
      // 모든 onSaved 콜백 실행
76
      _formKey.currentState!.save();
77

78
      // 저장된 데이터 사용
79
      print('이름: $_name');
80
      print('이메일: $_email');
81
      print('전화번호: $_phone');
82

83
      // 서버로 전송
84
      _sendToServer();
85
    }
86
  }
87

88
  void _resetForm() {
89
    _formKey.currentState!.reset();
90
    setState(() {
91
      _name = '';
92
      _email = '';
93
      _phone = '';
94
    });
95
  }
96

97
  Future<void> _sendToServer() async {
98
    // API 호출
99
    ScaffoldMessenger.of(context).showSnackBar(
100
      const SnackBar(content: Text('저장 완료!')),
101
    );
102
  }
103
}

FormState 메서드

메서드	설명
`validate()`	모든 필드 검증, bool 반환
`save()`	모든 필드의 onSaved 실행
`reset()`	폼을 초기 상태로 리셋

Watch out#

WARNING

save()는 validate() 후에 호출해야 합니다.
검증 없이 save()만 호출하면 잘못된 데이터가 저장될 수 있습니다.

1
// ❌ 잘못된 방법: 검증 없이 저장
2
void _submitForm() {
3
  _formKey.currentState!.save(); // 유효하지 않은 데이터 저장 가능
4
}
5

6
// ✅ 올바른 방법: 검증 후 저장
7
void _submitForm() {
8
  if (_formKey.currentState!.validate()) {
9
    _formKey.currentState!.save();
10
    // 데이터 처리
11
  }
12
}

결론: validate() 후 save()로 데이터를 수집하고, reset()으로 폼을 초기화합니다.

챕터 6: 복합 폼 위젯#

Why#

NOTE
텍스트 외에 체크박스, 라디오 버튼, 드롭다운 등 다양한 입력이 필요합니다.
이들도 Form과 통합하여 일괄 검증할 수 있습니다.
1
TextFormField: 텍스트 입력
2
DropdownButtonFormField: 선택 입력
3
FormField: 커스텀 입력

What#

NOTE
DropdownButtonFormField는 드롭다운 선택을 폼과 통합합니다.
FormField를 확장하여 커스텀 폼 필드를 만들 수 있습니다.

How#

TIP

드롭다운이 포함된 폼

1
class RegistrationForm extends StatefulWidget {
2
  const RegistrationForm({super.key});
3

4
  @override
5
  State<RegistrationForm> createState() => _RegistrationFormState();
6
}
7

8
class _RegistrationFormState extends State<RegistrationForm> {
9
  final _formKey = GlobalKey<FormState>();
10
  String? _selectedCountry;
11
  bool _agreeToTerms = false;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Form(
16
      key: _formKey,
17
      child: Column(
18
        crossAxisAlignment: CrossAxisAlignment.start,
19
        children: [
20
          TextFormField(
21
            decoration: const InputDecoration(labelText: '이름'),
22
            validator: (value) {
23
              if (value == null || value.isEmpty) {
24
                return '이름을 입력해주세요';
25
              }
26
              return null;
27
            },
28
          ),
29
          const SizedBox(height: 16),
30
          // 드롭다운 폼 필드
31
          DropdownButtonFormField<String>(
32
            decoration: const InputDecoration(labelText: '국가'),
33
            value: _selectedCountry,
34
            items: const [
35
              DropdownMenuItem(value: 'KR', child: Text('대한민국')),
36
              DropdownMenuItem(value: 'US', child: Text('미국')),
37
              DropdownMenuItem(value: 'JP', child: Text('일본')),
38
              DropdownMenuItem(value: 'CN', child: Text('중국')),
39
            ],
40
            validator: (value) {
41
              if (value == null) {
42
                return '국가를 선택해주세요';
43
              }
44
              return null;
45
            },
46
            onChanged: (value) {
47
              setState(() {
48
                _selectedCountry = value;
49
              });
50
            },
51
          ),
52
          const SizedBox(height: 16),
53
          // 커스텀 체크박스 폼 필드
54
          FormField<bool>(
55
            initialValue: _agreeToTerms,
56
            validator: (value) {
57
              if (value != true) {
58
                return '약관에 동의해주세요';
59
              }
60
              return null;
61
            },
62
            builder: (state) {
63
              return Column(
64
                crossAxisAlignment: CrossAxisAlignment.start,
65
                children: [
66
                  Row(
67
                    children: [
68
                      Checkbox(
69
                        value: state.value,
70
                        onChanged: (value) {
71
                          state.didChange(value);
72
                          setState(() {
73
                            _agreeToTerms = value ?? false;
74
                          });
75
                        },
76
                      ),
77
                      const Text('이용약관에 동의합니다'),
78
                    ],
79
                  ),
80
                  if (state.hasError)
81
                    Text(
82
                      state.errorText!,
83
                      style: TextStyle(
84
                        color: Theme.of(context).colorScheme.error,
85
                        fontSize: 12,
86
                      ),
87
                    ),
88
                ],
89
              );
90
            },
91
          ),
92
          const SizedBox(height: 24),
93
          ElevatedButton(
94
            onPressed: () {
95
              if (_formKey.currentState!.validate()) {
96
                ScaffoldMessenger.of(context).showSnackBar(
97
                  const SnackBar(content: Text('가입 완료!')),
98
                );
99
              }
100
            },
101
            child: const Text('가입하기'),
102
          ),
103
        ],
104
      ),
105
    );
106
  }
107
}

FormField 속성

속성	설명
`initialValue`	초기값
`validator`	검증 함수
`onSaved`	저장 시 콜백
`builder`	UI 빌더

Watch out#

WARNING
FormField의 builder에서 state.didChange()를 호출해야 폼 상태가 업데이트됩니다.
호출하지 않으면 검증이 제대로 작동하지 않습니다.
1
FormField<bool>(
2
  builder: (state) {
3
    return Checkbox(
4
      value: state.value,
5
      onChanged: (value) {
6
        state.didChange(value); // 필수!
7
      },
8
    );
9
  },
10
)

결론: DropdownButtonFormField와 FormField로 다양한 입력 유형을 폼과 통합합니다.

한계#

폼과 입력 검증에는 몇 가지 한계가 있습니다.

비동기 검증: 서버 통신이 필요한 검증(중복 이메일 확인 등)은 별도 처리가 필요합니다.
복잡한 검증 규칙: 조건부 검증이나 필드 간 연관 검증은 코드가 복잡해질 수 있습니다.
성능: 많은 필드가 있는 폼에서 autovalidateMode.always는 성능에 영향을 줄 수 있습니다.
상태 관리: 큰 폼에서는 별도의 상태 관리 솔루션이 필요할 수 있습니다.

Form(폼): 여러 폼 필드를 그룹화하고 일괄 검증을 가능하게 하는 위젯이다. ↩
TextFormField(텍스트 폼 필드): TextField를 감싸서 Form과 통합되는 검증 기능을 제공하는 위젯이다. ↩
GlobalKey(글로벌 키): 위젯 트리 전체에서 고유한 식별자로, FormState에 접근할 때 사용한다. ↩
TextEditingController(텍스트 편집 컨트롤러): 텍스트 필드의 값을 프로그래밍 방식으로 읽고 쓸 수 있게 해주는 컨트롤러다. ↩
FocusNode(포커스 노드): 위젯의 포커스 상태를 프로그래밍 방식으로 제어할 수 있게 해주는 객체다. ↩

Flutter 튜토리얼 15편: 폼과 입력 검증

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

폼 요구사항#

해결 방법#

챕터 1: 기본 폼 구조#

Why#

What#

How#

Watch out#

챕터 2: 다양한 유효성 검사#

Why#

What#

How#

Watch out#

챕터 3: TextEditingController로 입력값 제어#

Why#

What#

How#

Watch out#

챕터 4: 포커스 관리#

Why#

What#

How#

Watch out#

챕터 5: 폼 데이터 저장과 리셋#

Why#

What#

How#

Watch out#

챕터 6: 복합 폼 위젯#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차