Zenn
💡

【Flutter】TextField入力完了後の処理を設定する方法

2022/06/26に公開
Flutter
Dart
tech

はじめに

TextFieldを使う際に、入力完了後の処理を設定する方法について書いていきます。

完成イメージ

CupertinoPickerWidgetの呼び出し 検索を行う関数の呼び出し

実装方法

基本

TextFieldのプロパティであるonSubmittedを使います。
引数には、TextFieldに入力した値がString型で入ります。

CupertinoPickerWidgetの呼び出し
TextField(
  onSubmitted: (_) {
    // ここに実行したい処理を書く
  },
),

例1:「CupertinoPickerWidgetの呼び出し」

「CupertinoPickerWidgetの呼び出し」 は、↓のように書きました。

CupertinoPickerWidgetの呼び出し
TextField(
  onSubmitted: (_) {
    showCupertinoModalPopup<Container>(
      context: context,
      builder: (context) {
	// 別で作成したWidget(CupertinoPicker)を返す。
	return _UnitPicker(ingredient: ingredient);
	// ※直接CupertinoPickerを書くことも可能です。
      },
    );
  },
),

例2:「検索を行う関数の呼び出し」

「検索を行う関数の呼び出し」 は、↓のように書きました。
この例では、onSubmittedプロパティの引数に入った値を使用しています。

検索を行う関数の呼び出し
TextField(
  onSubmitted: (searchWord) {
    // 別で作成した関数を返す
    searchRecipeModel.searchRecipe(
      searchWord, // onSubmittedプロパティの引数に入った値を使用
      recipeNameAndIngredientNameList,
    );
  },
),

参考

https://api.flutter.dev/flutter/material/TextField-class.html

おわりに

どんな些細なことでも、間違いや非推奨の書き方、より良い書き方などありましたらコメントで教えていただけますと大変嬉しいです。

ここまでご覧いただきありがとうございました！

Discussion

ログインするとコメントできます