[英]Flutter app - “A RenderFlex overflowed by…” and widget bottom
I created login page in my flutter app.我在我的 flutter 应用程序中创建了登录页面。 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..但是当我输入密码时,我得到一个错误: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?如何解决这个问题?
I made your Container
full height and add SingleChildScrollView
我让你的Container
全高并添加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: () {})
],
),
),
)
],
),
),
),
),
);
}
}
Inside your Scaffold
use在您的Scaffold
内部使用
resizeToAvoidBottomInset: false
And also wrap your Column
in SingleChildScrollView
并将您的Column
包装在SingleChildScrollView
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.