How to make a TextFormField like Google? - flutter

Question

I am interested in the implementation of TextField in registering a Google account on Flutter. How can I make a similar series of TextFields from a date where all three have one errorText and when they click “next”, three are checked at once, if one is not entered, everything turns red, even if they were correct. It is like one of the three.

Answer 1

For the outline text field, you could use
TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
filled: true,
hintText: "Type in your text",
),
)
and for the validation, the best way to achieve it is to use a form with validation
and TextFormField instead of TextField
example:
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'),
),
),
],
),
);
}
}