Problem: I'm building a login screen for an Android TV app. The layout is a two-column panel (left: QR, right: email/password form). When the on-screen keyboard appears, the email field stays visible above the keyboard, but the password field (which is lower) is overlapped/hidden by the keyboard. How can I keep the focused field visible on Android TV?
What I expect:
When a TextFormField receives focus, the UI should adjust so that the field is not hidden by the keyboard (same behavior for email and password).
What happens: The lower password field is overlapped by the keyboard on my TV layout.
Relevant code (simplified):
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Column(
children: [
_showTopBar(),
Expanded(
child: Center(
child: Stack(
children: <Widget>[
_showForm(),
_showCircularProgress(),
],
),
),
),
],
),
);
}
Widget _showForm() {
return Column(
children: [
Expanded(
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Container(
child: Column(
children: [
// ... left column (QR) and divider ...
// Right: email/password column
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Center(
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("Login with Email"),
SizedBox(height: 20),
showEmailInput(), // TextFormField with focusNode _emailFocus
SizedBox(height: 16),
showPasswordInput(), // TextFormField with focusNode _passwordFocus
SizedBox(height: 24),
showPrimaryButton(),
],
),
),
),
),
),
],
),
),
),
),
),
],
);
}
Widget showEmailInput() => TextFormField(
keyboardType: TextInputType.emailAddress,
focusNode: _emailFocus,
onFieldSubmitted: (_) {
_emailFocus.unfocus();
FocusScope.of(context).requestFocus(_passwordFocus);
},
...
);
Widget showPasswordInput() => TextFormField(
obscureText: true,
focusNode: _passwordFocus,
...
);
Environment
- Flutter on Android TV
What I've tried but didnt worked
- Adding
resizeToAvoidBottomInsetto true/false (vise-versa) inside Widget Build Scaffold - Adding
SingleChildScrollViewand set physics property toBouncingScrollPhysics