Menu
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: '[email protected]',
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
996
Solution : 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.
Another solution is to wrap the Column widget into a scrollable widget. A built-in widget provided by Flutter which works well is the SingleChildScrollView. This is the best solution to avoid the “Bottom overflowed ” error when the keyboard opens.
In this article, we will figure out how to solve “ Bottom Overflow By XX.XX PIXELS error”, very commonly faced by Flutter Devs. It is simply the bottom overflow issue in a flutter. This issue mainly arises when the user opens the keyboard on both android and IOS devices.
Flutter Widgets can resize itself while appearing keyboard or keypad in both android & iOS devices. If we put multiple widgets or TextField widgets in single screen and when user selects bottom side TextField widget than it will display us a error Bottom overflowed by pixels. This error is cause due to appearing keyboard on screen.
Example : // This widget is the root of your application. 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.
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
98
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
