🦁
[Flutter]TextEditingControllerについて
SNSアプリで入力フォームを作る際に出てきたTextEditingControllerについて、よく分からなかったので公式ドキュメントを参考に調べてみた
TextEditingController とは?
公式より
TextEditingController = 編集可能なテキスト フィールドのコントローラー。
ユーザーが関連付けられた TextEditingControllerを使用してテキスト フィールドを変更すると、テキスト フィールドの値が更新され、コントローラーがそのリスナーに通知します。リスナーは、テキストと選択 のプロパティを読み取って、ユーザーが入力した内容や選択がどのように更新されたかを知ることができます。
要するに、
「スマホ画面でテキスト入力するときの変化をつけてくれるやつ」
これがないと文字を打っても画面に変化が発生しないので入力フォームとして成り立たない。
TextField にはコントローラ (contoller) プロパティがあって、これに TextEditingController をセットしておくと、 コントローラから入力値や選択領域を取得することができる。らしい
Point
-
1行目あたりの
final TextEditingController _controller = TextEditingController();
で「TextEditingController」クラス型である_controller
にTextEditingController()
の機能をインスタンス化して格納している。 -
controller:プロパティで
_controller
を引数に持たせ、コントローラとしている
サンプルコード
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
final TextEditingController _controller = TextEditingController();
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,
);
});
}
void dispose() {
_controller.dispose();
super.dispose();
}
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()),
),
),
);
}
}
以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏
Discussion