Flutter Login Screen UI Scrollable

Question

I'm trying to make a login screen in Flutter. This login contains fields like e-mail and password, forgot password, sign up. The problem is in some devices the keyboard hides the password filed, I want to make the screen scroll.

My code looks like:

return Scaffold(
  key: _scaffoldKey,
  resizeToAvoidBottomPadding: false,
  body: Container(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new ExactAssetImage("graphics/register_bg.png"),
        fit: BoxFit.cover,
      ),
    ),
    child: LoadingIndicatorPage(
      loading: _loading,
      child: Padding(
        padding: EdgeInsets.only(
            left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
        child: AnimatedOpacity(
          opacity: _currentOpacity,
          duration: const Duration(seconds: 1),
          child: Column(
            children: <Widget>[
              Expanded(
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 90),
                        child: Text(
                          AppLocalizations.of(context).loginTitle,
                          style: TextStyle(fontSize: 32),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 90),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context).loginEmailHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.emailAddress,
                        textEditingController: emailController,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context).loginPasswordHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.text,
                        textEditingController: passwordController,
                        obscureText: true,
                      ),
                      Padding(
                        padding:
                            EdgeInsets.only(top: PAGE_TOP_NO_TITLE_PADDING),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: GestureDetector(
                            onTap: () {
                              _showForgotPassword();
                            },
                            child: Text(
                              AppLocalizations.of(context)
                                      .loginForgotPassword +
                                  '?',
                              style: TextStyle(color: purpleishBlueThree),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 0.0),
                child: Button(
                  text: AppLocalizations.of(context).loginLogin,
                  buttonOnPressed: () {
                    _login();
                  },
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(8.0, 15.0, 8.0, 0),
                child: Divider(
                  thickness: 1,
                  color: whiteTwo,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                child: GestureDetector(
                  child: RichText(
                    text: TextSpan(
                      text: AppLocalizations.of(context)
                          .loginCreateAccountPre,
                      style: TextStyle(color: brownishGrey),
                      children: <TextSpan>[
                        TextSpan(
                          text: AppLocalizations.of(context)
                              .loginCreateAccountPost,
                          style: TextStyle(
                            color: purpleishBlueThree,
                            decoration: TextDecoration.underline,
                          ),
                        )
                      ],
                    ),
                  ),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => new RegisterPage(),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
);

You might want to check this: https://stackoverflow.com/questions/53586892/flutter-textformfield-hidden-by-keyboard — Bilaal Abdel Hassan, Aug 28 '20 at 03:19
Sorry, I can't help you here. You would have to find a way to add singlechildscrollview or listview here — CoderUni, Aug 28 '20 at 03:37
Does this answer your question? [Flutter TextFormField hidden by keyboard](https://stackoverflow.com/questions/53586892/flutter-textformfield-hidden-by-keyboard) — Yadu, Aug 28 '20 at 05:06
this is a duplicate, please check the question mentioned by @BilaalAbdelHassan — Yadu, Aug 28 '20 at 05:07
No, as I need the text fields in center and button at the bottom, I have used Expanded widget hence cant use SingleChildScrollView. — Kanwarpreet Singh, Aug 28 '20 at 05:17

Vinamra Jaiswal · Answer 1 · 2020-08-28T04:10:20.733

1

Try wrapping your body: Container with SingleChildScrollView and remove the resizeToAvoidBottomPadding from the Scaffold

edited Aug 28 '20 at 04:10

answered Aug 28 '20 at 04:03

Vinamra Jaiswal

603
7
15

No, as I need the text fields in center and button at the bottom, I have used Expanded widget hence cant use SingleChildScrollView – Kanwarpreet Singh Aug 28 '20 at 05:17

score 0 · Answer 2 · answered Aug 30 '20 at 10:00

Wrap LoadingIndicatorPage inside SingleChildScrollView

 return Scaffold(
      key: _scaffoldKey,
      body: Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new ExactAssetImage("graphics/register_bg.png"),
            fit: BoxFit.cover,
          ),
        ),
        child: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: LoadingIndicatorPage(
          loading: _loading,
          child: Padding(
            padding: EdgeInsets.only(
                left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
            child: AnimatedOpacity(
              opacity: _currentOpacity,
              duration: const Duration(seconds: 1),
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(top: 90),
                            child: Text(
                              AppLocalizations.of(context).loginTitle,
                              style: TextStyle(fontSize: 32),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: 90),
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                AppLocalizations.of(context).loginEmailHint,
                                style: TextStyle(color: brownishGrey),
                              ),
                            ),
                          ),
                          TextFieldInput(
                            inputType: TextInputType.emailAddress,
                            textEditingController: emailController,
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                AppLocalizations.of(context).loginPasswordHint,
                                style: TextStyle(color: brownishGrey),
                              ),
                            ),
                          ),
                          TextFieldInput(
                            inputType: TextInputType.text,
                            textEditingController: passwordController,
                            obscureText: true,
                          ),
                          Padding(
                            padding:
                                EdgeInsets.only(top: PAGE_TOP_NO_TITLE_PADDING),
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: GestureDetector(
                                onTap: () {
                                  _showForgotPassword();
                                },
                                child: Text(
                                  AppLocalizations.of(context)
                                          .loginForgotPassword +
                                      '?',
                                  style: TextStyle(color: purpleishBlueThree),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 0.0),
                    child: Button(
                      text: AppLocalizations.of(context).loginLogin,
                      buttonOnPressed: () {
                        _login();
                      },
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(8.0, 15.0, 8.0, 0),
                    child: Divider(
                      thickness: 1,
                      color: whiteTwo,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                    child: GestureDetector(
                      child: RichText(
                        text: TextSpan(
                          text: AppLocalizations.of(context)
                              .loginCreateAccountPre,
                          style: TextStyle(color: brownishGrey),
                          children: <TextSpan>[
                            TextSpan(
                              text: AppLocalizations.of(context)
                                  .loginCreateAccountPost,
                              style: TextStyle(
                                color: purpleishBlueThree,
                                decoration: TextDecoration.underline,
                              ),
                            )
                          ],
                        ),
                      ),
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => new RegisterPage(),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  );

Flutter Login Screen UI Scrollable

2 Answers2