英文:
Flutter: Bottom Overflow by 35 Pixels
问题
这是我的代码：
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Cadastro'),
centerTitle: true,
),
body: Form(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Primeiro nome",
),
validator: (value) {
return value!.isEmpty ? "Informe seu primeiro nome!" : null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Sobrenome",
),
validator: (value) {
return value!.isEmpty ? "Informe seu sobrenome!" : null;
},
),
),
Padding(
padding: EdgeInsets.all(24),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "E-mail",
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value!.isEmpty) {
return "Informe seu e-mail!";
} else if (!value.contains('@')) {
return "Insira um e-mail válido.";
}
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
child: TextFormField(
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Senha",
),
validator: (value) {
return value!.isEmpty ? "Informe sua senha!" : null;
},
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
formKey.currentState?.reset();
},
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("Limpar"),
),
),
ElevatedButton(
onPressed: () {
formKey.currentState!.validate()
? Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => LoginPage()),
(Route<dynamic> route) => false)
: formKey.currentState!.validate();
},
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("Cadastrar"),
),
),
],
),
],
),
),
],
),
),
);
}
英文:
So, i'm building a project to college on a notes app. On my Sign-in form a message appears when the mobile keyboard appears that says: Bottom Overflow by 35 Pixels.
Here is my code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Cadastro'),
centerTitle: true,
),
body: Form(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Primeiro nome",
),
validator: (value) {
return value!.isEmpty ? "Informe seu primeiro nome!" : null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Sobrenome",
),
validator: (value) {
return value!.isEmpty ? "Informe seu sobrenome!" : null;
},
),
),
Padding(
padding: EdgeInsets.all(24),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "E-mail",
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value!.isEmpty) {
return "Informe seu e-mail!";
} else if (!value.contains('@')) {
return "Insira um e-mail válido.";
}
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
child: TextFormField(
obscureText: true,
// controller: _email,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Senha",
),
validator: (value) {
return value!.isEmpty ? "Informe sua senha!" : null;
},
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
formKey.currentState?.reset();
},
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("Limpar"),
),
),
ElevatedButton(
onPressed: () {
formKey.currentState!.validate()
? Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => LoginPage()),
(Route<dynamic> route) => false)
: formKey.currentState!.validate();
},
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("Cadastrar"),
),
),
],
),
],
),
),
],
),
),
);
}
I've already tried to use SingleChildScrollView on the form and on the Expanded's column. Either way the problem persists or a exception is thrown. Is there another way to solve this?
I've tried to use resizeToAvoidBottomInset: false as well, got basically the same results
答案1
得分: 1
你应该将Column包裹在SigleChildScrollView中，并将Column的mainAxisSize设置为MainAxisSize.min。
英文:
You should wrap the Column with a SigleChildScrollView and set the mainAxisSize of the Column to MainAxisSize.min.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Cadastro'),
centerTitle: true,
),
body: Form(
key: formKey,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
...
],
),
),
),
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论