CODEWITHSUNDEEP
flutterflutter-layout
Badai Ardiat
Badai Ardiat

Reputation: 757

How AutoFocus Textfield in flutter

I have a problem while developing my app - how can I auto-focus a textfield after completing input on the previous field, without having to click the textfield?

enter image description here

Upvotes: 2

Views: 6928

Answers (4)

Taqi Tahmid Tanzil
Taqi Tahmid Tanzil

Reputation: 330

you can also try with

textInputAction: TextInputAction.next

in TextFormField

Upvotes: 0

Rahamat
Rahamat

Reputation: 49

return Focus(
  child: TextField(
    onChanged: (value) => context.read<SignupBloc>().add(SignupPasswordChanged(value)),
    controller: controller,
    keyboardType: TextInputType.visiblePassword,
    obscureText: true,
    key: const Key('signupForm_passwordInput_textField'),
    decoration: InputDecoration(
      labelText: 'Password *',
      errorText: state.password.invalid
          ? 'Passwords must be at least 10 characters in length\nand a minimum of 1 '
          'upper case and 1 lower case letter [A-Za-z]'
          : null,
    ),
  ),
);

Upvotes: 0

iKreateCode
iKreateCode

Reputation: 209

TextField(
  onEditingComplete: () => FocusScope.of(context).nextFocus(),
),

For the last textfield you would change the 'nextFocus()' to 'unfocus()'

Upvotes: 0

Rastlyn
Rastlyn

Reputation: 308

Use focusNode property and onEditingComplete event. Event trigger after user click on enter on first textfield, after that focusNode request focus for the second TextField.

For example:

  FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) => Scaffold(
      body: Column(
        children: <Widget>[
          TextField(
            autofocus: true,
            onEditingComplete: (() => focusNode.requestFocus())
          ),
          TextField(
            focusNode: focusNode,
          )
        ]
      )
    );

More info at: https://flutter.dev/docs/cookbook/forms/focus

Upvotes: 8

Related Questions