How to make a TextFormField like Google?

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.

Solution

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'),
            ),
          ),
        ],
      ),
    );
  }
}

Comments

[Prot_CN]

It's cool, man. Thx. But that is not what I need. How can I get from three textformfield one text after validator for those three right away? (like the first three fields in the screenshot, they have one error text for each) And also, how do I make an icon in errorText as in the same screenshot?

[humazed]

In this case, you probably need to extend FormField directly and control the visibility of the error yourself, see TextFormField for an implementation example. but there is no out of box widget that will do the error as you want with the same style. I have updated my example to show how to concatenate the result.

[Prot_CN]

Maybe man. Can I get your callback from except for this place?