【Flutter/Dart】TextFieldの使い方!TextEditingControllerで入力値の取得

この記事からわかること
- Flutter/DartのTextFieldの使い方
- 入力値を取得する方法
- TextEditingControllerとは?
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Xcode:16.0
- Flutter:3.29.2
- Dart:3.7.2
- Mac M1:Sonoma 14.6.1
TextFieldの使い方
Flutterで値を入力する入力欄を実装するにはTextField Widget
を使用します。labelText
にラベルを設定することが可能で、フラッターデフォルトのデザインではフォーカスが当たると自動で上部に移動します。また枠線を付与したい場合はborder
にOutlineInputBorder
を指定します。

入力された値を取得する
先ほどの実装では入力された値を取得することができません。取得するにはTextEditingController
またはonChanged
を使用する必要があります。
TextEditingController
公式リファレンス:TextEditingController
TextEditingController
はTextFieldの入力値を取得・変更・制御 できるコントローラーです。使い方はTextField
のcontroller
に紐付けます。紐付けが完了したら_controller.text
から入力されている値を取得できるようになります。
初期値を指定したい場合はTextEditingController(text:)
を使用すればOKです。
またTextEditingController
は1つのTextField
にしか紐づかないので画面内に複数TextField
が存在する場合はその数TextEditingController
を用意する必要があります。
onChanged
onChanged
を使用することで入力されるたびに値を取得することが可能です。
デザインをカスタマイズする

TextField
のデザインは背景色や左右にアイコンの設置などのカスタマイズが可能です。アイコンタップで処理を実行したい場合はInkWell
で実装できます。
枠線を消す
アウトラインはデフォルトでは下線のみ表示されますが、完全に非表示にしたい場合はInputBorder.none
を指定すればOKです。
角丸にする
さらに角丸にしたい場合はOutlineInputBorder
でBorderRadius.circular
を指定し、borderSide
にInputBorder.none
を指定すればOKです。
入力制御 / キーボードタイプ
TextField
に入力制御を設けることも可能で、keyboardType
で数字のみの入力やobscureText
でパスワード入力制御(伏せ字になる)などをコントロールすることが可能です。
TextInputType.number
にした場合でも入力された値はString
型になるのでint
型に変換したい場合はキャストする必要があります。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。