0

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 resizeToAvoidBottomInset to true/false (vise-versa) inside Widget Build Scaffold
  • Adding SingleChildScrollView and set physics property to BouncingScrollPhysics
1
  • Flutter does not support AndroidTV. Your approach is not recommended. Your app is ordinary Android app, it will run on Android TV, you should expect various problems, especially with UI. Commented Sep 30 at 12:00

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.