Flutter: TextFormFieldのvalidatorで非同期処理を行う

プログラミング
スポンサーリンク




こんにちは、おみです。

TextFormFieldのValidatorで、非同期処理を行うメソッドを使用して判定を行わせるのに少々手間取ったので、備忘録として載せておきたいと思いいます。

 

スポンサーリンク

最初に試そうとしたコード

validatorにasyncをつけて非同期処理にし、判定を行う処理をawaitして実装しようとしました。

・・・・なんやらかんやら記述があって・・・・

// formキー
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

// テキストフィールドのデータ格納用
TextEditingController _nameController;

・・・・なんやらかんやら記述があって・・・・

TextFormField(
    decoration: InputDecoration(labelText: "テキストを入力してください"),
    controller: _nameController,
    onSaved: (value) {
      _nameController.text = value;
      setState(() {});
    },

    // ignore: missing_return
    // validatorを非同期に
    validator: (value) async {
      // テキストの内容を判定
      if (!await textFieldValidate(value)) {
        return "テキストの内容が不正です。"
      } 
    }
),

// テキストの内容を判定する非同期処理
Future<bool> textFieldValidate(String value) {
  // 処理
  // 内容が不正である場合、falseを返す
}

・・・・なんやらかんやら記述があって・・・・

→ validatorにasyncをつけるとエラーが出ました。(そもそもつけれない?)

onChangedやonSavedはasyncをつけれるので、その中でvalidatorを呼び出す必要があるみたいです。

 

 

正解のソースコード

TextField以外は消してます。

// 判定結果を格納する変数
bool _flag;

TextFormField(
    decoration: InputDecoration(labelText: "テキストを入力してください"),
    controller: _nameController,
    
    // onChangedを非同期処理として実装 
    onChanged: (value) async {
      // ①判定結果を変数に格納
      _flag = await textFieldValidate(value);

      // ②validatorを呼び出し
      _formKey.currentState.validate();
    },

    onSaved: (value) {
      _nameController.text = value;
      setState(() {});
    },

    // ignore: missing_return
    validator: (value) {
      // ③判定結果が偽の場合、エラーメッセージを表示
      if (!_flag) {
        return "テキストの内容が不正です";
      }
    }),

→こうすることによって、onChangedからvalidatorを呼び出し、テキストの判定ができました。

 

 

参考文献

Flutter - Async Validator of TextFormField - Stack Overflow

 

 

おすすめの書籍

私は、Flutterの勉強をする際、下記の書籍を使用しています。

Flutterを使用したアプリ開発の方法を、実際にアプリの開発を通してわかりやすく解説しているので、おすすめです。

 

 

コメント

タイトルとURLをコピーしました