【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
を指定します。
TextField(
decoration: InputDecoration(
labelText: "金額を入力",
border: OutlineInputBorder(), // 枠線をつける
),
),

入力された値を取得する
先ほどの実装では入力された値を取得することができません。取得するにはTextEditingController
またはonChanged
を使用する必要があります。
TextEditingController
公式リファレンス:TextEditingController
TextEditingController
はTextFieldの入力値を取得・変更・制御 できるコントローラーです。使い方はTextField
のcontroller
に紐付けます。紐付けが完了したら_controller.text
から入力されている値を取得できるようになります。
class MyTextField extends StatefulWidget {
@override
_MyTextFieldState createState() => _MyTextFieldState();
}
class _MyTextFieldState extends State<MyTextField> {
// 1.プロパティに保持
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
// 3.メモリを解放
_controller.dispose();
super.dispose();
}
void _printText() {
// _controller.textから入力された値を取得可能
print("入力されたテキスト: ${_controller.text}");
}
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
// 2.controllerプロパティにセット
controller: _controller,
decoration: InputDecoration(labelText: "名前"),
),
],
);
}
}
初期値を指定したい場合はTextEditingController(text:)
を使用すればOKです。
final TextEditingController _controller = TextEditingController(text: "初期値");
またTextEditingController
は1つのTextField
にしか紐づかないので画面内に複数TextField
が存在する場合はその数TextEditingController
を用意する必要があります。
onChanged
onChanged
を使用することで入力されるたびに値を取得することが可能です。
TextField(
onChanged: (text) {
// 入力のたびに取得
print("現在の入力: $text");
},
decoration: InputDecoration(
labelText: "金額を入力",
border: OutlineInputBorder(),
),
)
デザインをカスタマイズする

TextField
のデザインは背景色や左右にアイコンの設置などのカスタマイズが可能です。アイコンタップで処理を実行したい場合はInkWell
で実装できます。
TextField(
controller: _nameController,
decoration: InputDecoration(
labelText: "カスタム入力",
// プレースホルダー
hintText: "ここに入力してください",
// 左アイコン
prefixIcon: Icon(Icons.person),
// 右アイコン
suffixIcon: InkWell(
onTap: () {
setState(() {
// 入力値をクリア
_nameController.clear();
});
},
child: Icon(Icons.clear),
),
// 背景色をつけるかどうか
filled: true,
// 背景色
fillColor: Colors.grey[200],
// アウトラインを表示(全体)
border: OutlineInputBorder(),
),
)
枠線を消す
アウトラインはデフォルトでは下線のみ表示されますが、完全に非表示にしたい場合はInputBorder.none
を指定すればOKです。
// アウトラインを完全に消す
border: InputBorder.none
角丸にする
さらに角丸にしたい場合はOutlineInputBorder
でBorderRadius.circular
を指定し、borderSide
にInputBorder.none
を指定すればOKです。
border: OutlineInputBorder(
// 角丸を指定
borderRadius: BorderRadius.circular(8),
// 枠線を消す
borderSide: BorderSide.none,
)
入力制御 / キーボードタイプ
TextField
に入力制御を設けることも可能で、keyboardType
で数字のみの入力やobscureText
でパスワード入力制御(伏せ字になる)などをコントロールすることが可能です。
TextField(
keyboardType: TextInputType.number, // 数字のみ入力
obscureText: true, // パスワード入力(伏せ字になる)
maxLength: 10, // 文字数制限
decoration: InputDecoration(labelText: "パスワード"),
),
TextInputType.number
にした場合でも入力された値はString
型になるのでint
型に変換したい場合はキャストする必要があります。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。