How to handle Login Screen scroll in Flutter? - flutter

Question

I am new to Flutter where I am trying to create a Login Screen, but I am not able to handle proper scroll of an field. Below is the code I had written.The main problem is that the text form field go above image which should not happen when it push up.
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"assets/ic_login_stack.png",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
key: scaffoldKey,
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
children: <Widget>[
SizedBox(height: 55.0),
Form(key: formKey, child: _getUIForm()),
SizedBox(
width: double.infinity,
height: 50,
child: GestureDetector(
child: RaisedButton(
child: Text(AppLocalizations.of(context).buttonText,
style: TextStyle(
color: Colors.white, fontSize: 18.0)),
elevation: 5.0,
color: Color(0xffE9446A),
//onPressed: _submit,
onPressed: () => {
/*Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CompanyWall()
)
)*/
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => CompanyWall()),
(r) => false)
},
),
)),
SizedBox(height: 20.0),
GestureDetector(
onTap: () =>
Navigator.of(context).pushNamed(ResetPassword.tag),
child: Text(
AppLocalizations.of(context).forgotPasswordText,
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.grey[800],
fontSize: 16.0),
),
),
SizedBox(height: 30.0),
GestureDetector(
onTap: () =>
Navigator.of(context).pushNamed(SignUpScreen.tag),
child: Text(AppLocalizations.of(context).signUpFreeText,
style: TextStyle(
color: Color(0xffE9446A),
fontSize: 18.0,
fontWeight: FontWeight.bold)),
),
],
),
),
),
)
],
);
}
_getUIForm() {
Multiple Text Form Feild
}
And below are the out put I obtained while running code.How should I handle scroll that textformfeild should remain below the logo.

Answer 1

You are using a Stack with 2 children - the Image and the scrolling content. The image is outside the scrolling content so it will not change its position as you scroll.
If you want the image to scroll along with the content, change your layout so that your Stack is within the SingleChildScrollView. It should end up roughly like so:
Scaffold -> SingleChildScrollView -> Stack -> [Image, Column]

Answer 2

In the scaffold add this
return Scaffold(
resizeToAvoidBottomPadding: false, // <-- add this
);