【Flutter】TextEditingControllerとは？

2023年11月26日

この記事はこんな人におすすめ！

TextFieldなどで使用されるTextEditingControllerの役割について知りたい

今回はTextFieldやTextFormFieldなどで使用されるTextEditingControllerとは何かについて解説していきます。

TextEditingControllerとは？

TextEditingControllerは入力フォーム(テキストフィールド)でユーザーによって入力された値をリスナーし値を制御するのが主な役割です。

入力フォームの値の変更を監視する

TextEditingControllerをTextFieldやTextFormFieldのcontrollerの引数にすることで入力フォームの値を監視し、値の変化をスクリーンに反映します。

この際TextEditingControllerをcontrollerの引数に直接渡すのではなく、定数として定義したものを渡すようにします。

class _MyHomePageState extends State<MyHomePage> {
  final _myController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: TextField(
        controller: _myController,
      ),
    );
  }
}

TextFieldで初期値を設定できる

TextFieldで使用されるTextEditingControllerを定数として定義する際にtextを使用することで初期値を設定できます。

final _myController = TextEditingController(text: 'Hello World');

TextFormFieldの場合はTextEditingControllerを使用せず、initialValueで初期値を設定できます。

TextFormField(
  initialValue: 'Hello World',
)

入力フォームの値を取得

入力フォームの現在の値はTextEditingControllerのtextプロパティで取得できます。

print(_myController.text);

入力フォームの値を更新・消去できる

入力フォームの値を動的にプログラムで更新したり消去したりできます。

_myController.text = 'New Hello World';

_myController.clear();