我正在做一个数据收集应用程序,它有多个TextField
,比如超过12个。我使用一个Form键来验证所有的TextField
。我想要所有文本字段的值,这样我就可以把它们保存到firestore。我该怎么做呢?下面是我的代码:
import 'package:flutter/material.dart';
class MainForm extends StatefulWidget {
@override
_MainFormState createState() => _MainFormState();
}
class _MainFormState extends State<MainForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Center(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Text('Enter information about PG Owner'),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: true,
textCapitalization: TextCapitalization.words,
textAlignVertical: TextAlignVertical.center,
onTap: () {},
decoration: InputDecoration(
prefixIcon: Icon(Icons.face),
labelText: 'Enter Name of Owner',
border: OutlineInputBorder()),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) {
if (value.length < 15) {
return 'Address seems very short!';
}
return null;
},
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(Icons.room),
labelText: 'Enter full address of Owner',
border: OutlineInputBorder()),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.number,
validator: (value) {
if (value.length < 9) {
return 'Phone number must be 9 digits or longer';
}
return null;
},
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone),
labelText: 'Phone number of Owner',
border: OutlineInputBorder()),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter a valid email address';
}
if (!value.contains('@')) {
return 'Email is invalid, must contain @';
}
if (!value.contains('.')) {
return 'Email is invalid, must contain .';
}
return null;
},
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail_outline),
labelText: 'Enter Email',
border: OutlineInputBorder()),
),
),
)
],
),
),
),
);
}
}
更新:我知道从TextField
获取值的正确方法(我读过文档)是创建一个controller
。但是,在我的例子中,有14个TextField
需要我创建14个控制器。有更好的方法吗?
6条答案
按热度按时间kq4fsx7k1#
您可以在下面的代码中使用类似的内容:
*_表格密钥.当前状态.保存();*在每个textFormField项上调用onSaved(),它会给所有的字段赋值,你可以根据需要使用,可以尝试使用 _formKey.currentState.save(); 就在 _formKey.currentState.validate() 被评估为真之后。
表单代码如下所示:
oug3syen2#
使用TextFormField中的控制器,可以获取TextFormField的值。
获得价值,例如:
更新答案
使用onSubmitted获取值
y1aodyip3#
我对Flutter让你自己处理表单值的方式并不满意,你需要为每个字段创建一个
TextEditingController
示例,将其赋值给controller
,并记住手动处理所有的字段,这导致了大量的样板代码,并使其更容易出错:一种不那么麻烦的方法是使用
flutter_form_builder
包,用FormBuilderTextField
小部件替换TextFormField
,FormBuilderTextField
小部件是旧的普通TextField
的 Package 器。现在你需要做的就是指定表单中每个字段的名称,然后在
_formKey.currentState?.value
中访问它。kokeuurv4#
您可以使用flutter_form_bloc,而不需要创建任何
TextEditingController
,并且可以将业务逻辑与用户界面分离,此外还提供了其他优势。eivgtgni5#
我从一个类似的搜索中来到这里。所有找到的答案都不能满足我的需要,因此我写了一个自定义的解决方案。
xpszyzbs6#
尝试使用flutter包flutter_form_builder,它可以帮助你为每个表单域创建多个控制器,从而避免重复操作;此外,它还可以帮助你验证表单,并通过使用一个简单的表单键来控制整个表单,从而简单地更新表单。