1. form에 유효성 검사 추가와 reset 사용하는 방법을 알아보자.
- new_item.dart
import 'package:flutter/material.dart';
import 'package:shopping_list/data/categories.dart';
class NewItem extends StatefulWidget {
const NewItem({super.key});
@override
State<NewItem> createState() {
return _NewItemState();
}
}
class _NewItemState extends State<NewItem> {
final _formKey = GlobalKey<FormState>();
void _saveItem() {
_formKey.currentState!.validate();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Add a new item'),
),
body: Padding(
padding: const EdgeInsets.all(12),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
maxLength: 50,
decoration: const InputDecoration(
label: Text('Name'),
),
validator: (value) {
if (value == null ||
value.isEmpty ||
value.trim().length <= 1 ||
value.trim().length > 50) {
return 'Must be between 1 and 50 characters.';
}
return null;
},
), // instead of TextField()
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
label: Text('Quantity'),
),
keyboardType: TextInputType.number,
initialValue: '1',
validator: (value) {
if (value == null ||
value.isEmpty ||
int.tryParse(value) == null ||
int.tryParse(value)! <= 0) {
return 'Must be a valid, positive number.';
}
return null;
},
),
),
const SizedBox(width: 8),
Expanded(
child: DropdownButtonFormField(
items: [
for (final category in categories.entries)
DropdownMenuItem(
value: category.value,
child: Row(
children: [
Container(
width: 16,
height: 16,
color: category.value.color,
),
const SizedBox(width: 6),
Text(category.value.title),
],
),
),
],
onChanged: (value) {},
),
),
],
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
_formKey.currentState!.reset();
},
child: const Text('Reset'),
),
ElevatedButton(
onPressed: _saveItem,
child: const Text('Add Item'),
)
],
),
],
),
),
),
);
}
}
1) final _formKey = GlobalKey<FormState>(); 부분을 통해 Form 위젯을 연결해주자.
2) validator: (value) {
if (value == null ||
value.isEmpty ||
value.trim().length <= 1 ||
value.trim().length > 50) {
return 'Must be between 1 and 50 characters.';
}
return null;
},
각 텍스트 폼필드에는 validator 위젯이 있다. 해당 위젯으로 유효성 검증을 할 수 있고, 문제가 없으면 null값을 리턴한다. 문제가 생기면 해당 폼 필드 하단에 설정한 메시지가 자동으로 나온다.
3) 최종적으로 _saveItem을 누르면 글로벌키로 세팅한 formKey가 작동하고, 여기서 validate를 진행한다. 이 때 key값으로 연동시킨 Form의 validator들의 위젯들이 발동 된다.
4) _formKey.currentState!.reset(); 을 통해 Form 전체 value 값들을 초기화 시킬 수 있다.
