Reputation: 5954
I created login page in my flutter app. This is my propotype:
"forgot password" - should be at the bottom of the page. but when I enter the password I get an error:A RenderFlex overflowed by..
This is my code:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
FlutterLogo(
size: 120,
),
Padding(
padding: EdgeInsets.only(top: 40),
),
Center(
child: Form(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Login', border: OutlineInputBorder()),
keyboardType: TextInputType.phone,
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Pass', border: OutlineInputBorder()),
keyboardType: TextInputType.phone,
),
),
SizedBox(
height: 50.0,
width: double.infinity,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 48.0,
child: RaisedButton(
child: Text('Register'),
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(10.0)))),
Container(
height: 48.0,
child: RaisedButton(
child: Text('Loggin'),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(10.0))))
])
],
))),
Expanded(
child: new Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: EdgeInsets.only(bottom: 20.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Forggoten pass?"),
GestureDetector(
child: Text(
"Restore",
),
onTap: () {})
],
))))
],
),
How fix this issue?
Upvotes: 1
Views: 353
Reputation: 14315
I made your Container
full height and add SingleChildScrollView
class GeneratedMailCouponScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
backgroundColor: Colors.white,
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
FlutterLogo(
size: 120,
),
Padding(
padding: EdgeInsets.only(top: 40),
),
Center(
child: Form(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Login',
border: OutlineInputBorder()),
keyboardType: TextInputType.text,
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Pass',
border: OutlineInputBorder()),
keyboardType: TextInputType.text,
),
),
SizedBox(
height: 50.0,
width: double.infinity,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 48.0,
child: RaisedButton(
child: Text('Register'),
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(10.0),
),
),
),
Container(
height: 48.0,
child: RaisedButton(
child: Text('Loggin'),
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(10.0),
),
),
),
],
),
)
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(bottom: 20.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Forggoten pass?"),
GestureDetector(
child: Text(
"Restore",
),
onTap: () {})
],
),
),
)
],
),
),
),
),
);
}
}
Upvotes: 2
Reputation: 267664
Inside your Scaffold
use
resizeToAvoidBottomInset: false
And also wrap your Column
in SingleChildScrollView
Upvotes: 1