How to focus text field when initstate is initialized

Question

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();
                          },
                        ),

score 7 · Accepted Answer · answered Jan 15 '20 at 06:35

7

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

answered Jan 15 '20 at 06:35

Peter Haddad

78,874
25
140
134

do you have solution for the keyboard. I don't want to open keyboard when the text field is in focus – Rutvik Gumasana Jan 17 '20 at 04:48
1

https://stackoverflow.com/questions/55234039/flutter-how-to-alway-hide-keyboard-when-click-on-textfield-but-keep-focuskeep-s – Peter Haddad Jan 17 '20 at 05:10
if you have any other solution can you please let me know – Rutvik Gumasana Jan 17 '20 at 05:20

GrahamD · Answer 2 · 2020-01-15T06:48:06.470

2

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

edited Jan 15 '20 at 06:48

answered Jan 15 '20 at 06:42

GrahamD

2,952
3
15
26

do you have a solution for the keyboard. I don't want to open keyboard when the text field is in focus – Rutvik Gumasana Jan 17 '20 at 04:48
Why would you want a focused text field with no keyboard available? I guess I am asking why you need to have the text field in focus immediately and not just shown and available to be selected? – GrahamD Jan 17 '20 at 06:19
no there is one scanner attached with my text field so the scanner will automatically enter the product barcode into the text field. so I don't need a keyboard. – Rutvik Gumasana Jan 17 '20 at 07:03
Ok, so I would suggest that you don't use a text field, which is designed for user input, but that you use a text box simply to display the bar code (I guess that's what you want to do?). This link seems to show an example of the kind of thing you are trying to achieve: https://www.c-sharpcorner.com/article/barcode-and-qrcode-scan-in-flutter/ – GrahamD Jan 17 '20 at 07:17

How to focus text field when initstate is initialized

2 Answers2