Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot focus on TextField in new page after navigating in Flutter

For some reason, I cannot focus on a TextField after on the next page after navigating. The keyboard would automatically dismiss when the TextField is selected. If I set autofocus: true on the TextField, then the keyboard will infinitely popup and immediately dismiss over and over again.

I encountered this when my app was a reasonable size but I was able to recreate this in a minimal example app.

I am using Dart 2.0.0-dev.55.0 with Flutter beta v0.3.2.

Code for main page:

import 'package:flutter/material.dart';
import 'settings.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Helpful text.',),
            // ===== Where navigation happens =====
            RaisedButton(
              onPressed: () {
                Navigator.push(context, PageRouteBuilder(
                  pageBuilder: (_, __, ___) => SettingsPage()));
              },
              child: Text('Go to input page'),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the code for the page with the TextField.

import 'package:flutter/material.dart';

class SettingsPage extends StatefulWidget {
  SettingsPage({Key key}) :
   super(key: key);

  @override
  _SettingsPage createState() => new _SettingsPage();
}


class _SettingsPage extends State<SettingsPage> {

  @override
  Widget build(BuildContext context) {
    final key = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: key,
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Settings"),
      ),
      body: ListView(
        children: <Widget>[
          Text("Enter something"),
          // Can't focus on this widget
          TextField(),
        ],
      ),
    );
  }
}

I can focus fine on TextField on the main page if I put one there, but can't on the one in the Settings page. I assume it has something to do with the keyboard not taking priority over the popped up page? Or what is going on? How I can get the app to just focus on input fields on a navigated page?

like image 459
Pybanana Avatar asked May 25 '18 19:05

Pybanana


People also ask

How do I stop TextField Flutter from focusing?

Next, we need to check to see if the current FocusNode has the “primary focus.” If it doesn't, we call unfocus() on the current node to remove focus and trigger the keyboard to dismiss. If you attempt to unfocus() a node that currently has the primary focus, Flutter will throw an exception.

How do you Unfocus a TextField when clicking outside the Flutter?

To make the keyboard go away itself, we need to remove “focus” from all of our text fields (if your app has more than one text field) by calling the unfocus() method: FocusManager. instance.

How do you focus a TextField?

Input Text focus() Method The focus() method is used to give focus to a text field. Tip: Use the blur() method to remove focus from a text field.


5 Answers

So the problem comes from the fact that I am supplying the GlobalKey to the Scaffold. Removing the key solves the issue. Not exactly sure why but the issue is mostly explained in this Github issue.

I was using the key to have snackbar popup when showing an error message when validating the input but now I'm opting to just display the error message in a Text widget.

like image 174
Pybanana Avatar answered Oct 05 '22 00:10

Pybanana


Was having a similar issue with global key. Was looking through a similar example in flutter's architecture redux example.

Using the key like so fixed it for me

static final GlobalKey<FormFieldState<String>> _orderFormKey = GlobalKey<FormFieldState<String>>();
like image 30
ashkan117 Avatar answered Oct 04 '22 23:10

ashkan117


To solve this problem, Use code like this.

// Class private property
static final GlobalKey<FormFieldState<String>> _searchFormKey = GlobalKey<FormFieldState<String>>()

// Inside widget
TextFormField(
  key: _searchFormKey, // Use searchFormKey here like this
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Type here...',
  )
)
like image 36
Sateesh Avatar answered Oct 05 '22 00:10

Sateesh


in my case, autofocus:true doesn't work only on iOS simulator, but it will work in real device both for Android and iOS

like image 41
Alexa289 Avatar answered Oct 04 '22 22:10

Alexa289


Just add autofocus as true, this will open keyboard when navigating to new screen

 TextField(
            autofocus: true,
          ),
like image 25
Jitesh Mohite Avatar answered Oct 05 '22 00:10

Jitesh Mohite