2021-12-11に投稿

Flutterでバリデーションに対応したカスタムなフィールドを作成する

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自体がステートを持っており、ちょっと扱い方が特殊になりますので最初はちょっとハマりどころがあったりします。そのあたりも解決する形の解説をしていきます。具体的には下記のようなことをします。

  • 基本的な継承の方法
  • 独自ウィジェットの描画方法(現在の値の取得方法)
  • 入力した時にバリデーションが働いてしまうのでボタンを押したときだけにしたい場合
  • 描画時のbuilderメソッドの引数にBuildContextがないためそれでもcontextを利用したい場合
  • 呼び出し元の親ウィジェットに値を渡す方法
  • エラーの際のエラーメッセージ表示方法
ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

コメント