Udemyセール開催中! 対象コースが1,220円から

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

今回は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番下の完成コードを参考にしながら読んでみて下さい。

ステップ1:TextEditingControllerを作る

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

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

ステップ2:TextEditingControllerをTextFieldと連携させる

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

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

ステップ3:実行させるコールバックを作る(ステップ4で使う)

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

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

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

//ステップ4
@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> {
  //ステップ1
  final valueController = TextEditingController();

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

  //ステップ3
  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),
                //ステップ2
                child: TextField(
                  controller: valueController,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

参考

  • URLをコピーしました!
目次
閉じる