Flutter keyboard overlapping issue not solved with resizeToAvoidBottomPadding - dart

Question

Basically I have a login page where I first segement into 2 container with one covers 55% and 45% of the screen. Then on top of these 2 container I add one more container with top 40% of the screen size and in it I have one more container which hold my user name and password text field. So on the design wise I am ok.
Now the issue when the keyboard comes the password field is totally not visible. First I just had stack then I did google and some suggest to put the Scaffold and add this line resizeToAvoidBottomPadding: false, but seems does not work for me either too.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
child: Stack(
children: <Widget>[
// The containers in the background
new Column(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height * .55,
//color: Colors.blue,
decoration: new BoxDecoration(
image: new DecorationImage(image: new AssetImage("lib/assets/cbg.png"), fit: BoxFit.cover,),
),
),
new Container(
height: MediaQuery.of(context).size.height * .45,
color: Colors.white,
)
],
),
// The card widget with top padding,
// incase if you wanted bottom padding to work,
// set the `alignment` of container to Alignment.bottomCenter
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .40,
right: 20.0,
left: 20.0),
child: new Container(
height: MediaQuery.of(context).size.height * .45,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 4.0,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40.0),
child: Column(
children: <Widget>[
SizedBox(height: MediaQuery.of(context).size.height * .05),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Email",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: new BorderSide(
color: Colors.blue
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Email cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
SizedBox(height: MediaQuery.of(context).size.height * .05),
new TextFormField(
decoration: new InputDecoration(
labelText: "Enter Password",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: new BorderSide(
),
),
//fillColor: Colors.green
),
validator: (val) {
if(val.length==0) {
return "Password cannot be empty";
}else{
return null;
}
},
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
fontFamily: "Poppins",
),
),
],
),
)
),
),
),
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .80,
right: 50.0,
left: 50.0),
child: new FlatButton(
color: Colors.red,
child: Text("Press Me"),
onPressed: () {},
),
),
new Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .90,
right: 50.0,
left: 50.0),
child: new FlatButton(
color: Colors.red,
child: Text("Forgot Password ?"),
onPressed: () {},
),
)
],
)
)
);
}
}
After the changes the keyboard still appear a slight covering the textfield.
Can I achieve some

Answer 1

You should put all this inside a ListView, then when you open the keyboard the list will scroll up.

Answer 2

I'm 2 years late on this and you might find the solution already, but this is for someone who struggle to find the solution. (Include myself a couple a days ago)
To solve this, The "TextFormField" widget need another attribute called "scrollPadding".
TextFormField(
controller: controller,
scrollPadding: EdgeInsets.only(bottom:40), // THIS SHOULD SOLVE YOUR PROBLEM
decoration: InputDecoration(
labelText: title,
hintText: title,
filled: true,
fillColor: Colors.white,
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.grey, width: 1.0),
),
border: const OutlineInputBorder(),
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return title;
}
return null;
},
),