お前らのFormのサンプルコードはすべて間違っている

モチベーション

• 長らくFlutterにおける標準WidgetのFormとお付き合いをしていたところ、どうみても巷に蔓延っているFormに関わるサンプルコードは「想定していない使い方」だと確信したので、ここに記す。
• いうて公式のサンプルコードもだいぶひどい。各フォーム値の取得方法に関して何も書いてないし...

コードの全容

See the Pen Flutter Form Demo by hummer (@hummer98) on CodePen.

• GitHubリポジトリ

ポイントその1: 意味もなくsave()するな

• 前の記事にも書いたが、_formKey.currentState.save()は、Formの子孫にあるFormFieldのonSave()を呼び出しているだけ。
• onSaveを書いてないなら何の意味もない行為である。
• _formKey.currentState.validate()のあとのおまじないやめよ？

ポイントその2: 意味もなくステートを持つな

• フォームで使う値を一生懸命var String emailとかやって保持している書き方が多いが、FormFieldStateにGlobalKey張れば、フォームの現在値にはアクセスできる。
• フォーム値の出し入れ等が特殊であるようなカスタムFormFieldを使っているのでも無いかぎり、わざわざStatefulWidgetにして値を保持しsetState()をして現在のフォームに入力されている値を保持しようとするのは意味がない。
  • フィールドが10個とかだと, さすがにGlobalKeyを作りまくって出し入れするのがダルいので、素直にreactive_formsを使ったほうが早い。とても良いフォームライブラリです。(AutofillHints対応あくして→自分でPRしてどうぞ？）

ポイントその3: やたらめったらFormを書き換えるな

• FormField系はわりと重いWidgetなので、バカスカ書き換えるのはやめたほうがいい。
• そもそもStatefulWidgetなので、入力値が変われば勝手に書き換わるし、バリデーションがコケれば発生すれば勝手にrebuildしてエラーメッセージを表示する
  • 上記コードを動かしてみればLoginFormのrebuildが最初の1回だけで、あとはエラーが出ようが入力されようが一切rebuildされてないのがわかるはず
• 外からバカスカsetStateして書き換える必要は皆無（大事なことなので２度

ポイントその4: 初期値を入れるのにTextEditingControllerを使うな

• 初期値を入れるにはTextEditingControllerを使えとか書いてあるblogがあるが、意味不明である。
• その名もずばりTextFormField.initialValueがあるのでそれを使えば良い。

ポイントその5: AutofillHintsちゃんと書こう

• 各OSにテキストフィールドの入力支援をさせるために、TextFormField.autofillHints（HTML.Inputタグで言うところのautocomplete属性）をセットしておこう
• これをやっておくだけでユーザー体験が劇的に向上する

元凶と経緯

• FormWidgetは元来_fieldsというchild以下の各フォームのアクセサを持っているのにもかかわらず、この配列がprivateになっていて、ユーザから触れない
• そのため、FormFieldそれぞれにGlobalKey<FormFieldState>を張っていかないと、フォームの現在値にアクセスすることができない。
• Formに関する公式のドキュメントを眺めていても、肝心のフォームの現在値にアクセスする手段がわからない（公式にもちゃんと書いてない）ので、思い思いの実装によって解決するBlogが蔓延してしまったのではないだろうか。
• →なにもかも公式が悪い

おまけ

外からフォームの値を書き換えたいとき

• FormFieldState<T>.didChange(T value)(公式doc)を使う。
  • _fieldKey.currentState.didChange(newValue);みたいな感じ
• ちなみにsetValue(公式doc)はprotectedなので、カスタムしたいFormFieldを継承して作成するときに使う模様。

EnterキーでSubmitしたいとき

• WebFormだとよくある動作
• ちゃんとやるとキーボードイベントを取得して判定するべきなんだけど、雑にやるならonFieldSubmittedにボタンのsubmitと同じ処理を呼び出すようにしておくと、同じような感じに動く。

まとめ

• 標準のFormはめっちゃ使いにくいのでReactiveForm使いましょう！

Follow Me!

• Twitter: hummer