TextFormField reloads screen when focused for input

I have a TextFormField which reloads the current screen when I tap on it to enter text. The keyboard is briefly displayed before the screen widgets are redrawn.

Container(
      	child: TextFormField(
    			decoration: InputDecoration(
    				hintText: 'Add your review here!',
    				filled: true,
    				fillColor: Colors.white,
    				hintStyle: new TextStyle(color: Colors.grey[500]),
    				),
    			),
       margin: EdgeInsets.only(top:8.0),
      );

Author: Fantashit

8 thoughts on “TextFormField reloads screen when focused for input

  1. I think the reload issue is due to the screen pan/adjusting to fit the content when the keyboard is displayed. I changed the android:windowSoftInputMode in the manifest of the Android project and the problem does not occur on Android. I still face the problem on iOS

  2. You shouldn’t have state on anything that isn’t a State subclass. Both of the controllers should be created on _MyBusinessState, otherwise you will get the reloading behavior.

  3. I’m facing the same issue.

    Here’s how to reproduce it:

    1. From the first screen, navigate to another screen using:
    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Factory.secondScreen()),
    );
    1. The second screen has a ListView whose children contain a TextField.
    2. I’m creating each TextField with TextField(controller: controller);
    3. Trigger the bug by clicking or focusing on any TextField (the keyboard appears for a split second then the screen is reloaded).

    I also tried doing what @jonahwilliams is suggesting but there is still the bug.

  4. Same problem here.
    I have a stateful widget with a Form and a GlobalKey and a TextFormField.
    If I load the widget on the homepage, it works as expected.
    If I route to the widget using
    Navigator.push(context, MaterialPageRoute(builder: (context) => FormWidget()))
    when I click into the the TextFormField the keyboard shows and disappears quickly because the widget is rebuilt.
    If I show the TextFormField without the Form widget, it works as expected.
    So the rebuilding happens only inside the Form and after a Route.

    I found a hack to avoid widget rebuilding.

    Instead of declaring the main widget the usual way, like this:

    class _LoginPageState extends State<LoginPage> {
      @override
      Widget build(BuildContext context) { _form view and logic_ }

    I declared it this way:

    class _LoginPageState extends State<LoginPage> {
      Widget _form;
    
      @override
      Widget build(BuildContext context) {
        if (_form == null) {
          _form = _createForm(context);
        }
        return _form;
      }
      
      Widget _createForm(BuildContext context) { _form view and logic_ }

    Now it works, but I suppose there’s still a bug or I’m missing something.

  5. @almerito I’d suggest to ask on StackOverflow and if it actually turns out to be a Flutter bug
    please create a new issue with a minimal but complete runnable example that allows to reproduce.

    Hi @zoechi, thank you for your suggestion. There are many threads on Stackoverflow about this topic and none of them provides a real solution or a clear explanation of the problem. I found the workaround I mentioned on one of those threads.

    On another Stackoverflow thread someone adviced not to nest Stateful widgets one into another. That’s not my case, but it gave me an idea to furtherly narrow down the problem.

    I just changed my form widget from Stateful to Stateless (so now all my widgets are Stateless), but the problem still persists.

    The I commented out the key in Form widget

    final _formKey = GlobalKey<FormState>();
    final form = Form(
            /* key: _formKey, */
            child: ...
    );
    

    and the problem disappeared (but now I cannot validate the form).

    So it seems that the problem is related to a widget (Stateful or Stateless) that contains a Form widget with a GlobalKey AFTER a Navigator.push (because the form widget works in the homepage and the TextFormField works outside the Form widget or inside a Form widget without a GlobalKey, even in the routed page).

    Tested with Android 5.0 (API 21) and Android 7.1.1 (API 25)

  6. I am still experiencing the same issue, text field rebuilds on focus causing me to loose existing user input and state value in a page After Navigator.push.

    In my case I am not using formkey, just text controllers.

  7. I’m having this issue and none of the solutions above has fixed it for me. I’m using a FutureBuilder to fetch data from firebase and prepopulate a form initially with the returned data setting each controller text value. Whenever I press any TextFormField input the whole widget gets rebuilt. Only Dropdown and Datepicker are not rebuilding the widget. Can someone please help me?

    Here’s a gist of my code: https://gist.github.com/rodolfofranco/39bc5d4cefd80531c3a3a317409851c9

  8. Pingback: best franchise

Comments are closed.