Flutter Login Screen UI Scrollable - flutter

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(),
),
);
},
),
),
],
),
),
),
),
),
);

Answer 1

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

Answer 2

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(),
),
);
},
),
),
],
),
),
),
),
),
),
);