Overflow Error in Flutter when keyboard open - dart

Question

I am designing a login page it overflowed when I click on any text form field it open keyboard and through overflow warning like this see attached image.
I also want a Raised button icon should be on the right side of the button.
Widget build(BuildContext context) {
return Container(
child: Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/login_page_bg_1.jpg'),
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.55), BlendMode.dstATop))),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
margin: new EdgeInsets.only(top: 42.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/logo.png',
width: 250.0, height: 200.21),
],
),
),
),
Expanded(
flex: 2,
child: Container(
margin: new EdgeInsets.only(bottom: 40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//form filed goes here
Text('Login As User',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 35.0)),
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'you#example.com',
labelText: 'Email Address',
),
new Container(
// width: MediaQuery.of(context).size.width,
child: RaisedButton.icon(
color: Color.fromARGB(251, 188, 74, 1),
label: Text('LOGIN'),
icon: Icon(Icons.send,
size: 10.0, color: Colors.black),
onPressed: () {
this.submit();
}, ),)],),),)],)],),),);
Intital state
Error/overflowed State

Answer 1

Set following property to false
Scaffold(
resizeToAvoidBottomInset: false,
...
)
If you're having issues with overflow error, use SingleChildScrollView with it.
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
body: SingleChildScrollView(child: YourBody()),
)
PS: If you like to scroll your widget when the keyboard opens, you can take a look at this answer

Answer 2

This is happening because when the keyboard comes on screen, the height of the canvas to draw decreases. One solution is to wrap your root container inside SingleChildScrollView like this :
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Stack(
fit: StackFit.loose,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/login_page_bg_1.jpg'),
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.55), BlendMode.dstATop)
)
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 42,),
Expanded(
flex: 1,
child: Center(
child:
Image.asset('assets/logo.png',
width: 250.0, height: 200.21),
),
),
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//form filed goes here
Text('Login As User',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 35.0)),
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'you#example.com',
labelText: 'Email Address',
)
),
new Container(
// width: MediaQuery.of(context).size.width,
child: RaisedButton.icon(
color: Color.fromARGB(251, 188, 74, 1),
label: Text('LOGIN'),
icon: Icon(Icons.send,
size: 10.0, color: Colors.black),
onPressed: () {
//this.submit();
}, ),)],)),
SizedBox(height: 40,)
],)],),));
It will make your screen scrollable when the height of the content gets more than the available height of the viewport.

Answer 3

A much simpler solution (source) seems to be just setting the Scaffold property resizeToAvoidBottomPadding to false.
This works great with me:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(...),
body: ...

Answer 4

Add resizeToAvoidBottomPadding: false, and resizeToAvoidBottomInset: false,
to your Scaffold widget.
Wrap your code with a Container, set the Container's parameters height: MediaQuery.of(context).size.height, and width: MediaQuery.of(context).size.width,. Then wrap your Container with a SingleChildScrollView.

Answer 5

Setting resizeToAvoidBottomInset: true and using body: ListView() works as well. This enables you to scroll the page when you open the keyboard.

Answer 6

An even easier version is to just wrap the offending container with a ListView widget. It makes the screen scrollable and is simple to implement. You can use multiple children with this widget.
Scaffold(
body: ListView(
children: <Widget> [
Container(
),
TextView(
),
Column(
),
],
),
)

Answer 7

you should make the scaffold's floating widgets should size themselves to avoid the onscreen keyboard using :
Scaffold(
resizeToAvoidBottomInset: false,
...
)