How to navigate between two screens in flutter and show keyboard? - flutter

Question

I have some next (simplified) widget-tree structures:
- home (stack of widgets)
- page container
- editText field
As you can see, edit text will be always on top of the pages, which I will swap with Navigator.of(context) transactions.
The problem: when I focus editText the keyboard appears. When user starts typing, at some moment, I need to push another screen inside the page container. And when I use Navigator.of() - editText is unfocused and the keyboard goes down.
Whats needed: I need somehow to do transition (push/pop/replace) in page container with the Navigator and keep keyboard still up (keep editText focused).
Do you have any knowledge of how to do that?

Answer 1

Your use case looks really weird but I suppose you have a good reason to follow this setup.
Anyway the issue is that when Navigator.push is called, the TextField is unfocused. This is not a bug but rather an intended feature which (I think) is here to prevent a keyboard to follow you to the next screen where no TextField would be present. However I understand that this is an issue for your use case.
My solution (not the prettiest I would admit, but the only thing I could have working) is to force the focus back to the TextField manually. You need two component:
A FocusNode to associate to your TextField to listen to check if your TextField changes from focus to unfocused. If the focusOnNextUnfocus is set, it should re-request the focus after an unfocus
focusOnNextUnfocus a bool to set to true just before pushing, and which will be set to false once the focus has been requested again.
Here is the adaptation of the code you provided:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
/// Handles the focus state of our text field
final focusNode = FocusNode();
/// A bool to keep track on whether we should refocus after
/// unfocus. This will be set to `true` before pushing
var focusOnNextUnfocus = false;
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
void initState() {
focusNode.addListener(() {
// If we no longer have the focus and should refocus, we refocus
if (!focusNode.hasFocus && focusOnNextUnfocus) {
focusNode.requestFocus();
focusOnNextUnfocus = false; // Reset to false once it has been processed
}
});
super.initState();
}
#override
void dispose() {
focusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
late BuildContext anotherContext;
final edit = TextField(
focusNode: focusNode,
onChanged: (String value) async {
if (value.length > 4) {
// Pop does not unfocus so no worries here
Navigator.pop(anotherContext);
} else if (value.length > 3) {
// Push DOES unfocus, so we need to set focusOnNextUnfocus to true
focusOnNextUnfocus = true;
Navigator.of(anotherContext).push(
MaterialPageRoute(builder: (_) {
return Builder(builder: (context) {
return Another();
});
}),
);
}
},
);
final scaffold = MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Builder(
builder: (context) {
anotherContext = context;
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
return Scaffold(
body: Stack(
children: [
Positioned(child: scaffold),
Align(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: edit,
),
),
],
),
);
}
}
class Another extends StatelessWidget {
const Another({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
);
}
}