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

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

この記事からわかること

  • Flutter/DartTextFieldの使い方
  • 入力値取得する方法
  • TextEditingControllerとは?

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

公式リファレンス:TextField

TextFieldの使い方

Flutterで値を入力する入力欄を実装するにはTextField Widgetを使用します。labelTextラベルを設定することが可能で、フラッターデフォルトのデザインではフォーカスが当たると自動で上部に移動します。また枠線を付与したい場合はborderOutlineInputBorderを指定します。

TextField(
  decoration: InputDecoration(
    labelText: "金額を入力",
    border: OutlineInputBorder(), // 枠線をつける
  ),
),
【Flutter/Dart】TextFieldの使い方!TextEditingControllerで入力値の取得

入力された値を取得する

先ほどの実装では入力された値を取得することができません。取得するにはTextEditingControllerまたはonChangedを使用する必要があります。

TextEditingController

公式リファレンス:TextEditingController

TextEditingControllerTextFieldの入力値を取得・変更・制御 できるコントローラーです。使い方はTextFieldcontrollerに紐付けます。紐付けが完了したら_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(),
  ),
)

デザインをカスタマイズする

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

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

角丸にする

さらに角丸にしたい場合はOutlineInputBorderBorderRadius.circularを指定し、borderSideInputBorder.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型に変換したい場合はキャストする必要があります。

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index