[Flutter]TextEditingControllerについて

SNSアプリで入力フォームを作る際に出てきたTextEditingControllerについて、よく分からなかったので公式ドキュメントを参考に調べてみた

TextEditingController とは？

公式より

TextEditingController = 編集可能なテキスト フィールドのコントローラー。

ユーザーが関連付けられた TextEditingControllerを使用してテキスト フィールドを変更すると、テキスト フィールドの値が更新され、コントローラーがそのリスナーに通知します。リスナーは、テキストと選択 のプロパティを読み取って、ユーザーが入力した内容や選択がどのように更新されたかを知ることができます。

要するに、

「スマホ画面でテキスト入力するときの変化をつけてくれるやつ」

これがないと文字を打っても画面に変化が発生しないので入力フォームとして成り立たない。

TextField にはコントローラ (contoller) プロパティがあって、これに TextEditingController をセットしておくと、 コントローラから入力値や選択領域を取得することができる。らしい

Point

• １行目あたりの
  final TextEditingController _controller = TextEditingController();
  で「TextEditingController」クラス型である_controllerにTextEditingController()の機能をインスタンス化して格納している。

• controller:プロパティで _controllerを引数に持たせ、コントローラとしている

サンプルコード

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final String text = _controller.text.toLowerCase();
      _controller.value = _controller.value.copyWith(
        text: text,
        selection:
            TextSelection(baseOffset: text.length, extentOffset: text.length),
        composing: TextRange.empty,
      );
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(6),
        child: TextFormField(
          controller: _controller,
          decoration: const InputDecoration(border: OutlineInputBorder()),
        ),
      ),
    );
  }
}

以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

公式記事
参考記事