CODEWITHSUNDEEP
flutterdarttextfieldflutter-layout
Rutvik Gumasana
Rutvik Gumasana

Reputation: 1630

How to focus text field when initstate is initialized

I want to focus my text field when initstate is initialized. eg. when I open any page and then if there is any text field then text field needs to be automatically focused.

TextFormField(

                          focusNode: focusNode,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: orientation == Orientation.portrait
                                ? MediaQuery.of(context).size.width * 0.025
                                : MediaQuery.of(context).size.width * 0.015,
                          ),
                          validator: (val) => Validators.validateRequired(
                              val, " Product Baarcode"),
                          controller: _addproduct,
                          // focusNode: _addproductFocusNode,
                          decoration: InputDecoration(
                            errorStyle: TextStyle(color: Colors.yellow),
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white),
                            ),
                            fillColor: Colors.white,
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white),
                            ),
                            hintStyle: TextStyle(color: Colors.white),
                            labelStyle: TextStyle(color: Colors.white),
                            filled: false,
                            prefixIcon: Icon(
                              FontAwesomeIcons.barcode,
                              color: Colors.white,
                            ),
                            labelText: "Enter Product Barcode",
                            hintText: "Enter Product Barcode",
                          ),
                          onFieldSubmitted: (val) {
                            _addProduct();
                          },
                        ),

Upvotes: 2

Views: 2304

Answers (2)

GrahamD
GrahamD

Reputation: 3165

You can use the TextFormField's autofocus: parameter and set it to true. This will however make the keyboard appear immediately as well.

Upvotes: 2

Peter Haddad
Peter Haddad

Reputation: 80914

If you want a TextField to be focused when you open a page, then you can use the property autofocus:

TextField(
  autofocus: true,
);

If you want it to be focused later point in time, then you can use the class FocusNode. You can check an example here:

https://flutter.dev/docs/cookbook/forms/focus#focus-a-text-field-when-a-button-is-tapped

Upvotes: 7

Related Questions