Flutter で自動で次のTextFieldを移動する方法

複数のテキスト入力を持つフォームで、現在のtextFieldで入力した後、次の入力フォームに自動でfocsuしたい場合、以下の方法でできます。

TextFieldウィジェットのtextInputActionでTextInputAction.nextを使うと、自動で移動します。

最後の TextFieldウィジェットのtextInputActionでは
TextInputAction.doneを設定してると、focusが外れるようになっています。

Column(
              children: const <Widget>[
                TextField(
                  decoration: InputDecoration(hintText: 'TextField A'),
                  textInputAction: TextInputAction.next, // Moves focus to next.
                ),
                TextField(
                  decoration: InputDecoration(hintText: 'TextField B'),
                  textInputAction: TextInputAction.next, // Moves focus to next.
                ),
                TextField(
                  decoration: InputDecoration(hintText: 'TextField C'),
                  textInputAction: TextInputAction.done, // Hides the keyboard.
                ),
              ],
            ),

以上です。

参考

https://stackoverflow.com/questions/52150677/how-to-shift-focus-to-the-next-textfield-in-flutter

金曜担当 – Ami

このエントリーをはてなブックマークに追加


asahi at 2022年10月07日 10:00:00


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム


↑

↓