flutter form design code example

Example 1: create a validator in flutter

ElevatedButton(
  onPressed: () {
    // Validate returns true if the form is valid, otherwise false.
    if (_formKey.currentState.validate()) {
      // If the form is valid, display a snackbar. In the real world,
      // you'd often call a server or save the information in a database.

      Scaffold
          .of(context)
          .showSnackBar(SnackBar(content: Text('Processing Data')));
    }
  },
  child: Text('Submit'),
);

Example 2: validator flutter

final passwordValidator = MultiValidator([  
    RequiredValidator(errorText: 'password is required'),  
    MinLengthValidator(8, errorText: 'password must be at least 8 digits long'),  
    PatternValidator(r'(?=.*?[#?!@$%^&*-])', errorText: 'passwords must have at least one special character')  
 ]);  
  
  String password;  
  
  Form(  
    key: _formKey,  
    child: Column(children: [  
      TextFormField(  
        obscureText: true,  
        onChanged: (val) => password = val,  
        // assign the the multi validator to the TextFormField validator  
        validator: passwordValidator,  
      ),  
  
      // using the match validator to confirm password  
      TextFormField(  
        validator: (val) => MatchValidator(errorText: 'passwords do not match').validateMatch(val, password),  
      )  
    ]),  
  );

Example 3: flutter widget username email nice looking

return new Scaffold(  appBar: new AppBar(    title: new Text(widget.title),    actions: <Widget>[      new IconButton(icon: const Icon(Icons.save), onPressed: () {})    ],  ),  body: new Column(    children: <Widget>[      new ListTile(        leading: const Icon(Icons.person),        title: new TextField(          decoration: new InputDecoration(            hintText: "Name",          ),        ),      ),      new ListTile(        leading: const Icon(Icons.phone),        title: new TextField(          decoration: new InputDecoration(            hintText: "Phone",          ),        ),      ),      new ListTile(        leading: const Icon(Icons.email),        title: new TextField(          decoration: new InputDecoration(            hintText: "Email",          ),        ),      ),      const Divider(        height: 1.0,      ),      new ListTile(        leading: const Icon(Icons.label),        title: const Text('Nick'),        subtitle: const Text('None'),      ),      new ListTile(        leading: const Icon(Icons.today),        title: const Text('Birthday'),        subtitle: const Text('February 20, 1980'),      ),      new ListTile(        leading: const Icon(Icons.group),        title: const Text('Contact group'),        subtitle: const Text('Not specified'),      )    ],  ),);

Tags:

Dart Example