如何制作像 Google 这样的 TextFormField?
How to make a TextFormField like Google?
我对在 Flutter 上注册 Google 帐户时 TextField 的实现很感兴趣。我如何从所有三个都有一个 errorText 的日期开始制作一系列类似的 TextFields,当他们单击“下一步”时,一次检查三个,如果没有输入一个,即使它们是正确的,所有内容都会变成红色。好像是三者之一。
对于大纲文本字段,您可以使用
TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
filled: true,
hintText: "Type in your text",
),
)
对于验证,实现它的最佳方法是使用 form with validation
和 TextFormField
而不是 TextField
示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: MyCustomForm(),
),
);
}
}
// Create a Form widget.
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey<FormState>,
// not a GlobalKey<MyCustomFormState>.
final _formKey = GlobalKey<FormState>();
String _firstName;
String _lastName;
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
onSaved: (val) => _firstName = val,
),
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
onSaved: (val) => _lastName = val,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
final form = _formKey.currentState;
if (form.validate()) {
form.save();
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('The result: $_firstName, $_lastName')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}
我对在 Flutter 上注册 Google 帐户时 TextField 的实现很感兴趣。我如何从所有三个都有一个 errorText 的日期开始制作一系列类似的 TextFields,当他们单击“下一步”时,一次检查三个,如果没有输入一个,即使它们是正确的,所有内容都会变成红色。好像是三者之一。
对于大纲文本字段,您可以使用
TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
filled: true,
hintText: "Type in your text",
),
)
对于验证,实现它的最佳方法是使用 form with validation
和 TextFormField
而不是 TextField
示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: MyCustomForm(),
),
);
}
}
// Create a Form widget.
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey<FormState>,
// not a GlobalKey<MyCustomFormState>.
final _formKey = GlobalKey<FormState>();
String _firstName;
String _lastName;
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
onSaved: (val) => _firstName = val,
),
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
onSaved: (val) => _lastName = val,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
final form = _formKey.currentState;
if (form.validate()) {
form.save();
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('The result: $_firstName, $_lastName')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}