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?
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.
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.
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.
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.
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>>();
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...',
)
)
in my case, autofocus:true doesn't work only on iOS simulator, but it will work in real device both for Android and iOS
Just add autofocus
as true
, this will open keyboard when navigating to new screen
TextField(
autofocus: true,
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With