Flutterにはフォームのサブミットボタンを押した時に各入力項目のバリデーションを一括で行ってくれる機能があります。公式でも説明のページがあります。
Build a form with validation | Flutter
具体的には例えば下記のようにTextFormFieldにvalidatorプロパティを設定します。
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
そしてフォームには下記のようなキーを割り当てます。
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
あとは決定ボタンが押されたときなどに下記のようにバリデーションメソッドを呼び出します。
if (_formKey.currentState!.validate()) {
しかしチェックボックスなど、validatorに対応していない場合があります。その時だけ独自にvalidateメソッド以外でチェックをするのはちょっと面倒です。
このような場合に、どのようなものでもバリデーションに対応させる方法があります。もちろんTextFormFieldのvalidatorのようにチェック方法は自分で実装する必要がありますが、たとえばチェックボックスのうち一つは必ずチェックが必要とか、お絵かきをさせてある程度の面積は描かないといけないとか、なんでも自由にバリデーションさせるフィールドをカスタムで作成することができます。
具体的にはFormFieldを継承したウィジェットを作ることでバリデーションを導入することができます。このFormFieldというのは例で上げたTextFormFieldのようにvalidatorプロパティを持っているためバリデーションさせることができます。
ただ、FormField自体がステートを持っており、ちょっと扱い方が特殊になりますので最初はちょっとハマりどころがあったりします。そのあたりも解決する形の解説をしていきます。具体的には下記のようなことをします。
コメント