How to shift focus to next textfield in flutter?

Harsh Bhikadia picture Harsh Bhikadia · Sep 3, 2018 · Viewed 33.9k times · Source

I am new to Flutter.

I am building a form with multiple text inputs using following widgets: Form, TextFormField. The keyboard that appears doesn't show "next" (which should shift the focus to next field) field action instead it is "done" action (which hides the keyborad).

I looked for any hints in official docs, found nothing directly that can be done. I although landed on FocusNode(cookbook, api doc). It provides with mechanism to shift focus by some button or any other action on app, but I want it to be in keyboard.

Answer

CopsOnRoad picture CopsOnRoad · Feb 28, 2020

Screenshot:

enter image description here


You can do that without using FocusNode or FocusScopeNode.

@override
Widget build(BuildContext context) {
  final node = FocusScope.of(context);
  return Scaffold(
    body: Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(hintText: 'TextField A'),
          textInputAction: TextInputAction.next,
          onEditingComplete: () => node.nextFocus(), // Move focus to next
        ),
        TextField(
          decoration: InputDecoration(hintText: 'TextField B'),
          textInputAction: TextInputAction.next,
          onEditingComplete: () => node.nextFocus(), // Move focus to next
        ),
        TextField(
          decoration: InputDecoration(hintText: 'TextField C'),
          textInputAction: TextInputAction.done,
          onSubmitted: (_) => node.unfocus(), // Submit and hide keyboard
        ),
      ],
    ),
  );
}