Make progress every day.

When you are free recently, learn about Flutter, occasionally record the learning content and problems.

Here is a simple form validation.

import 'package:flutter/material.dart';

class FormRoute extends StatefulWidget {
  final String _title;

  FormRoute(this._title);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return FormRouteState();
  }
}

class FormRouteState extends State<FormRoute> {
  FocusNode focusNode = FocusNode();
  FocusNode _uNameNode = FocusNode();
  FocusNode _pwdNode = FocusNode();
  TextEditingController _uNameController = TextEditingController();
  TextEditingController _pwdController = TextEditingController();
  GlobalKey _formKey = new GlobalKey<FormState>();

  FormRouteState();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    focusNode.addListener(() {
      print(focusNode.hasFocus);
      setState(() {});
    });
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Form(
          key: _formKey,
          autovalidate: false,
//          On will pop: () {}, which seems to be a new interface, so when making forms, don't Scribble, or the return key may not work
          onChanged: () {},
          child: Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
              child: Text("User login"),
            ),
            Container(
              child: TextFormField(
                controller: _uNameController,
                validator: (str) {
                  return str.trim().length > 0 ? null : "User name cannot be empty";
                },
                focusNode: _uNameNode,
                autofocus: true,
                decoration: InputDecoration(
                    labelText: "User name", hintText: "enter one user name", prefixIcon: Icon(Icons.person), border: InputBorder.none),
              ),
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: _uNameNode.hasFocus ? Colors.red[200] : Colors.grey[300], width: 0.5))),
            ),
            Container(
              child: TextFormField(
                controller: _pwdController,
                focusNode: _pwdNode,
                autofocus: false,
                obscureText: true,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  labelText: "Password",
                  hintText: "enter one user name",
                  prefixIcon: Icon(Icons.lock),
                ),
                validator: (str) {
                  return str.trim().length > 5 ? null : "Password cannot be less than six digits";
                },
              ),
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: _pwdNode.hasFocus ? Colors.red[200] : Colors.grey[300], width: 0.5))),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20, left: 30, right: 30),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: RaisedButton(
                      onPressed: () {
                        if ((_formKey.currentState as FormState).validate()) {
                          print("The user name is:" +_uNameController.text +"The password is:"+_pwdController.text);
                        }
                      },
                      child: Text("Sign in"),
                      color: Theme.of(context).primaryColor,
                      textColor: Colors.white,
                    ),
                  )
                ],
              ),
            ),
            Theme(
              data: Theme.of(context).copyWith(
                  hintColor: Colors.grey[200], //Define underline color
                  inputDecorationTheme: InputDecorationTheme(
                      labelStyle: TextStyle(
                        color: Colors.grey[500],
                      ), //The font style of the Label,
                      hintStyle: TextStyle(
                        color: Colors.grey[300],
                      ), //Font style for prompt text,
                      border: InputBorder.none)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[],
              ),
            ),
          ])),
    );
  }
}

Several problems encountered:

1: after writing the form, press the return key in this interface to report an error

Reason: in the Form widget, there is a parameter. If an empty function is passed to this parameter, an error will be reported. There are comments in the code above. What is the specific use of this parameter? I don't know yet.

2: error is reported in the "unnamecontroller. Text", and the prompt is "unnamecontroller is empty".

Reason: the problem of turning from Java.

TextEditingController _uNameController,_pwdController = TextEditingController();

In this case, it seems that the [unnamecontroller] has not been initialized.