初めに
に関するTipsです。
本題
Flutter初心者として、Flutterでフォーム入力を実装する際に困りました。
公式のドキュメントはこのようになっていますが、
今更emailバリデーションなど自分で実装したく無いしと感じ、
Submitエラーなど非同期のエラーをどのように反映するかも分かりませんでした。
Reactでいうredux-formやformikのような物が無いか色々なライブラリを検証した所、
「Flutter FormBuilder」が最高でした。日本語の記事を見かけなかったので紹介します。
公式のドキュメントにもある通り、通常のバリデーションは
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
FormBuilderValidators.numeric(context),
FormBuilderValidators.max(context, 70),
]),
をフィールドにセットするだけです。
必要なバリデーションが用意されているので嬉しいですね。
ただ、非同期のエラーを簡単に扱うのには少しコツがいるようです。
Submitエラーの扱い方
サンプルの実装はこちらをご覧ください。
共通コンポーネント
- validate_form_state.dart
- validate_text_field.dart
※「atomicデザイン採用したいようだけど、間違っていない？」と思った方、勉強中ですのでご了承ください。
各画面の実装
ポイント
非同期エラーの反映は公式では、このようになっています。
が、私が実装したかった仕様にはマッチしませんでした。
- フォームを再度入力した際に入力した項目の非同期エラーをリセットする。
- 登録ボタンが押された際に、全ての非同期エラーを一旦リセットする。
を実現したかったのですが、
「登録ボタンが押された際に、全ての非同期エラーを一旦リセットする」という部分について、
公式の実装方法ではうまく行きませんでした。
バリデーション処理でerrorTextが設定されている場合、バリエーションが通らないように
ライブラリ側で制御されています。
登録ボタン押下時にエラーをリセットし、バリデーションを再度実行するのですが、
widget内のerrorTextのリセットが同期されない（する方法が分からない）為、errorTextが残った状態になり、
１回目の登録ボタン押下ではバリデーションがエラー判定になってしまいました。（２回目は問題無い。）
そこで、errorTextを使わずに独自バリデーション処理を追加することでこの問題を解決しています。
以下、具体的な実装箇所になります。
アプリの挙動は、こんな感じになります。
以上、よろしくお願い致します。