Background image squeeze when the keyboard appears .
Scaffold(
body: Stack(
children: <Widget>[
Container(
width:double.infinity ,
height: double.infinity ,
child: Image.asset('assets/images/bg.png')),
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(width*0.10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(height: height*0.10,),
Container(decoration: BoxDecoration(color:Colors.transparent),child: Container(margin: EdgeInsets.only(bottom: height*0.02,left: 20.0,right: 20.0),child: Image.asset('assets/images/logo.png'),),),
SizedBox(height: height*0.05,),
Container(
decoration: BoxDecoration(color: Colors.transparent),
child: new Form(
key: _formKey,
autovalidate: _autoValidate,
child: LoginFrom(width,height))),
],
),
),
),
],
)
)
The solution to resolve this overflow error is to make your entire widget or in our case the Column scrollable. We can do that by wrapping our Column inside a SingleChildScrollView. Also, wrap the SingleChildScrollView with Center so that the entire UI is centered.
When you click on the TextField it opens up the on-screen keyboard. To hide/dismiss the keyboard you have to press the back button in Android and the done button (inside the onscreen keyboard) in iOS.
Or you should use a Scaffold parameter
resizeToAvoidBottomInset: false
Scaffold(
resizeToAvoidBottomInset: false,
body: (your_code)
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With