CODEWITHSUNDEEP
dartflutterdart-2
Pybanana
Pybanana

Reputation: 361

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?

Upvotes: 17

Views: 18491

Answers (8)

Sateesh
Sateesh

Reputation: 1336

The code snippet essentially sets up a text input field with a unique key (_searchFormKey) so that its state can be accessed or manipulated later in the application. The key is useful, for instance, if you need to validate the input, reset the field, or perform other operations directly on this field programmatically

Example.

// 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...',
  )
)

Upvotes: 5

Adnan K
Adnan K

Reputation: 79

I had the same issue. In my case I was accessing formKey.currentState!.validate() inside StatelessWidget. Problem solved When I move my formKey to GetX Controller.

Upvotes: 0

Agung
Agung

Reputation: 13803

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

Upvotes: 3

Jitesh Mohite
Jitesh Mohite

Reputation: 34160

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

 TextField(
            autofocus: true,
          ),

Upvotes: 1

Tomas Baran
Tomas Baran

Reputation: 1983

Not sure what your issue is since I can't reproduce it any more. I just tried your code in Flutter Channel beta, 1.18.0-11.1.pre and everything worked as it should without modifying your original code.

It looks more as if it was Flutter's bug rather.

Upvotes: 0

Brett Young
Brett Young

Reputation: 306

I also had this issue with a focus node added to the textfield. Removing the focus node solved my issue.

Upvotes: 0

ashkan117
ashkan117

Reputation: 1068

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

Upvotes: 2

Pybanana
Pybanana

Reputation: 361

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.

Upvotes: 9

Related Questions