英文:
"A RenderFlex overflowed by 373 pixels on the bottom" problem in flutter [not duplicate]
问题
我已经尝试解决这个问题有一段时间了。在stackoverflow上有类似的问题，但我找不到与我的问题相关的问题。我创建布局的方式有点复杂，因为我进行了太多的嵌套。这可能是一个简单的问题，但由于我是Flutter的新手，我无法解决它。
下面是一张图片，你可以看到我面临的问题。
import 'package:flutter/material.dart';
import 'package:com.example.simple_app/common_widgets/appbar.dart';
class AddPersonPage extends StatefulWidget {
AddPersonPage({Key key}) : super(key: key);
@override
_AddPersonPageState createState() => _AddPersonPageState();
}
class _AddPersonPageState extends State<AddPersonPage> {
int person_id;
String name, nickname, email, phone, home_address, contact_type;
DateTime created, updated;
final formKey = new GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: appbar(context, 'Add new person', 'otherData'),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: formKey,
child: Column(
children: <Widget>[
Text('Add new person/organisation', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Name (Required)',
),
validator: (val) {
return null;
},
onSaved: (val) => this.name = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Nickname',
),
validator: (val) {
return null;
},
onSaved: (val) => this.nickname = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Physical/Home Address (Required)',
),
validator: (val) {
return null;
},
onSaved: (val) => this.home_address = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Email',
),
validator: (val) {
if (val.isEmpty) return null;
if (EmailValidator.validate(val) == false) {
return 'Please enter a valid email address';
}
return null;
},
onSaved: (val) => this.email = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'Phone number',
),
validator: (val) {
if (val.isEmpty) return null;
if (!validPhoneNumber.hasMatch(val)) {
return 'Please enter a valid phone number';
}
return null;
},
onSaved: (val) => this.phone = val,
),
TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 60,
decoration: InputDecoration(
labelText: 'Phone number',
),
validator: (val) {
return null;
},
onSaved: (val) => this.phone = val,
),
Container(
margin: const EdgeInsets.only(top: 10.0),
child: RaisedButton(
color: Color(0xff0091EA),
splashColor: Colors.green,
onPressed: submitPerson,
child: Text('Add Person',
style: TextStyle(
color: Colors.white,
)),
),
),
],
),
),
),
);
}
void submitPerson() {
if (this.formKey.currentState.validate()) {
formKey.currentState.save();
} else {
return null;
}
Navigator.pop(context);
}
}
以爱心发布，谢谢。
英文:
I have been trying to fix this problem for sometime now. There are similar issues here on stackoverflow but I can't find the one that relates to my problem. The way I have created the layout is kind of complicated since I'm doing too much nesting. This may be a simple problem but since I'm new to flutter I'm failing to figure this out.
Below is a picture so you can have a picture of the issue I'm facing.
import 'package:flutter/material.dart';
import 'package:com.example.simple_app/common_widgets/appbar.dart';
class AddPersonPage extends StatefulWidget {
AddPersonPage({Key key}) : super(key: key);
@override
_AddPersonPageState createState() => _AddPersonPageState();
}
class _AddPersonPageState extends State<AddPersonPage> {
int person_id;
String name, nickname, email, phone, home_address, contact_type;
DateTime created, updated;
// final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();
// get submitPerson => null;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: appbar(context, 'Add new person', 'otherData'),
body: new Padding(
padding: const EdgeInsets.all(16.0),
child: new Form(
key: formKey,
child: new Column(
children: <Widget>[
Text('Add new person/organisation', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
TextFormField(
keyboardType: TextInputType.text,
decoration: new InputDecoration(
labelText: 'Name (Required)',
),
validator: (val) {
return null;
},
onSaved: (val) => this.name = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: new InputDecoration(
labelText: 'Nickname',
),
validator: (val) {
return null;
},
onSaved: (val) => this.nickname = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: new InputDecoration(
labelText: 'Physical/Home Address (Required)',
),
validator: (val) {
return null;
},
onSaved: (val) => this.home_address = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: new InputDecoration(
labelText: 'Email',
),
validator: (val) {
if (val.isEmpty) return null;
if (EmailValidator.validate(val) == false) {
return 'Please enter a valid email address';
}
return null;
},
onSaved: (val) => this.email = val,
),
TextFormField(
keyboardType: TextInputType.text,
decoration: new InputDecoration(
labelText: 'Phone number',
),
validator: (val) {
if (val.isEmpty) return null;
if (!validPhoneNumber.hasMatch(val)) {
return 'Please enter a valid phone number';
}
return null;
},
onSaved: (val) => this.phone = val,
),
TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 60,
decoration: new InputDecoration(
labelText: 'Phone number',
),
validator: (val) {
return null;
},
onSaved: (val) => this.phone = val,
),
new Container(
margin: const EdgeInsets.only(top: 10.0),
child: new RaisedButton(
color: Color(0xff0091EA),
splashColor: Colors.green,
onPressed: submitPerson,
child: Text('Add Person',
style: TextStyle(
color: Colors.white,
)),
),
),
],
),
),
),
);
}
void submitPerson() {
if (this.formKey.currentState.validate()) {
formKey.currentState.save();
} else {
return null;
}
Navigator.pop(context);
}
}
Posted with love, Thank you.
答案1
得分: 1
为了避免这个溢出问题，您可以将Scaffold的所有内容包装在SingleChildScrollView小部件中。
return Scaffold(
appBar: appbar(context, '添加新人', 'otherData'),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
// 您的表单布局。
),
),
),
);
英文:
To avoid this overflow problem you can just wrap all your Scaffold body in a SingleChildScrollView widget.
return Scaffold(
appBar: appbar(context, 'Add new person', 'otherData'),
body: SingleChildScrollView(
child: new Padding(
padding: const EdgeInsets.all(16.0),
child: new Form(
// your form layout.
),
),
),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论