2025/3/23

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

この記事からわかること

Flutter/DartのTextFieldの使い方
入力値を取得する方法
TextEditingControllerとは？

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Koala
Xcode：16.0
Flutter：3.29.2
Dart：3.7.2
Mac M1：Sonoma 14.6.1

公式リファレンス：TextField

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型に変換したい場合はキャストする必要があります。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。