【Flutter】TextFieldの入力フォーム変更の度にコールバックを実行する

2022 4/05

2022年2月15日 2022年4月5日

今回はFlutter docsのCookbookを参考に、TextFieldやTextFormFieldの入力フォームで変更がある度にコールバックを実行する方法を紹介します。

「onChanged()」と「TextEditingController」それぞれの方法を順に紹介します。

こんな感じで常に入力フォームをチェックできます！

「onChanged()」で常にコールバックを実行

TextField(
  onChanged: (value) {
    print('現在の入力: $value');
  },
),

onChangedプロパティではコールバックを使用し入力される度に実行する処理を指定できます。コールバックのパラメーター（value）には入力テキストの値が代入されます。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: TextField(
                  onChanged: (value) {
                    print('現在の入力：$value');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

「TextEditingController」で常にコールバックを実行

1番下の完成コードを参考にしながら読んでみて下さい。

ステップ１：TextEditingControllerを作る

//ステップ１
final valueController = TextEditingController();

今回はTextEditingControllerを「valueController」として作ります。

ステップ２：TextEditingControllerをTextFieldと連携させる

//ステップ２
child: TextField(
  controller: valueController,
),

TextFieldのcontrollerプロパティに作ったTextEditingController（valueController）を連携させます。

ステップ３：実行させるコールバックを作る（ステップ４で使う）

//ステップ３
void _printLatestValue() {
  print('現在の入力: ${valueController.text}');
}

入力変更があったときに実行するコールバックを作ります。（次のステップで使用します）

ステップ４：addListener()でコールバックを実行

//ステップ４
@override
void initState() {
  super.initState();
  valueController.addListener(_printLatestValue);
}

initState()内でTextEditingControllerのaddListener()を使用し先ほど作っておいたコールバックを指定します。これで入力される度に指定したコールバックを実行できます。

完成コード

下記コードをDartPadで実行できます。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //ステップ１
  final valueController = TextEditingController();

  //ステップ４
  @override
  void initState() {
    super.initState();
    valueController.addListener(_printLatestValue);
  }

  //ステップ３
  void _printLatestValue() {
    print('現在の入力: ${valueController.text}');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                //ステップ２
                child: TextField(
                  controller: valueController,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上です。