Menu
Hi I am trying to create login screen. It is working fine for me. When I open the keyboard then it is giving me an error Bottom overloaded by 213 pixels.
Widget LoginPage() { return new Scaffold(body: Container( height: MediaQuery.of(context).size.height, decoration: BoxDecoration( color: Colors.white, image: DecorationImage( colorFilter: new ColorFilter.mode( Colors.black.withOpacity(0.05), BlendMode.dstATop), image: AssetImage('assets/images/mountains.jpg'), fit: BoxFit.cover, ), ), child: new Column( children: <Widget>[ Container( padding: EdgeInsets.all(120.0), child: Center( child: Icon( Icons.headset_mic, color: Colors.redAccent, size: 50.0, ), ), ), new Row( children: <Widget>[ new Expanded( child: new Padding( padding: const EdgeInsets.only(left: 40.0), child: new Text( "EMAIL", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.redAccent, fontSize: 15.0, ), ), ), ), ], ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), alignment: Alignment.center, decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.redAccent, width: 0.5, style: BorderStyle.solid), ), ), padding: const EdgeInsets.only(left: 0.0, right: 10.0), child: new Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ new Expanded( child: TextField( obscureText: true, textAlign: TextAlign.left, decoration: InputDecoration( border: InputBorder.none, hintText: '[email protected]', hintStyle: TextStyle(color: Colors.grey), ), ), ), ], ), ), Divider( height: 24.0, ), new Row( children: <Widget>[ new Expanded( child: new Padding( padding: const EdgeInsets.only(left: 40.0), child: new Text( "PASSWORD", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.redAccent, fontSize: 15.0, ), ), ), ), ], ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), alignment: Alignment.center, decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.redAccent, width: 0.5, style: BorderStyle.solid), ), ), padding: const EdgeInsets.only(left: 0.0, right: 10.0), child: new Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ new Expanded( child: TextField( obscureText: true, textAlign: TextAlign.left, decoration: InputDecoration( border: InputBorder.none, hintText: '*********', hintStyle: TextStyle(color: Colors.grey), ), ), ), ], ), ), Divider( height: 24.0, ), new Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Padding( padding: const EdgeInsets.only(right: 20.0), child: new FlatButton( child: new Text( "Forgot Password?", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.redAccent, fontSize: 15.0, ), textAlign: TextAlign.end, ), onPressed: () => {}, ), ), ], ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0), alignment: Alignment.center, child: new Row( children: <Widget>[ new Expanded( child: new FlatButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(30.0), ), color: Colors.redAccent, onPressed: () => {}, child: new Container( padding: const EdgeInsets.symmetric( vertical: 20.0, horizontal: 20.0, ), child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Expanded( child: Text( "LOGIN", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold), ), ), ], ), ), ), ), ], ), ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0), alignment: Alignment.center, child: Row( children: <Widget>[ new Expanded( child: new Container( margin: EdgeInsets.all(8.0), decoration: BoxDecoration(border: Border.all(width: 0.25)), ), ), Text( "OR CONNECT WITH", style: TextStyle( color: Colors.grey, fontWeight: FontWeight.bold, ), ), new Expanded( child: new Container( margin: EdgeInsets.all(8.0), decoration: BoxDecoration(border: Border.all(width: 0.25)), ), ), ], ), ), new Container( width: MediaQuery.of(context).size.width, margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0), child: new Row( children: <Widget>[ new Expanded( child: new Container( margin: EdgeInsets.only(right: 8.0), alignment: Alignment.center, child: new Row( children: <Widget>[ new Expanded( child: new FlatButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(30.0), ), color: Color(0Xff3B5998), onPressed: () => {}, child: new Container( child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Expanded( child: new FlatButton( padding: EdgeInsets.only( top: 20.0, bottom: 20.0, ), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Icon( const IconData(0xea90, fontFamily: 'icomoon'), color: Colors.white, size: 15.0, ), Text( "FACEBOOK", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold), ), ], ), ), ), ], ), ), ), ), ], ), ), ), new Expanded( child: new Container( margin: EdgeInsets.only(left: 8.0), alignment: Alignment.center, child: new Row( children: <Widget>[ new Expanded( child: new FlatButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(30.0), ), color: Color(0Xffdb3236), onPressed: () => {}, child: new Container( child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Expanded( child: new FlatButton( padding: EdgeInsets.only( top: 20.0, bottom: 20.0, ), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Icon( const IconData(0xea88, fontFamily: 'icomoon'), color: Colors.white, size: 15.0, ), Text( "GOOGLE", textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold), ), ], ), ), ), ], ), ), ), ), ], ), ), ), ], ), ) ], ), )); } Does anyone know what could be the issue ?
867
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.
Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears.
The stack is a widget in Flutter. It contains a list of widgets and places them on top of each other. And it places their children on top of each other like a stack of books. In other words, stack developers would overlap multiple widgets on one screen. As you can add different images or colors using containers in it.
I would suggest replacing the top Column widget with a ListView, that automatically resizes on keyboard input, whilst also supporting scrolling.
If you really want this setup as it is, you can edit your Scaffold with the parameter
resizeToAvoidBottomPadding: false That should make the error disappear
68
Scaffold( resizeToAvoidBottomInset: false, // set it to false ... ) As Andrey said, you may have issues with scrolling, so you may try
Scaffold( resizeToAvoidBottomInset: false, // set it to false body: SingleChildScrollView(child: YourBody()), ) 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
