The default value is displayed when the flutter text box is initialized

Time:2021-4-21

At the beginning of the flutter text box, we usedTextField. There seems to be no problem in most cases. The code form is as follows:

class _FooState extends State<Foo> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _ Controller = new texteditingcontroller (text: 'initialization content');
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextField(
          //When textfield is first created, the controller contains the initial value,
          //  When the user modifies the content of the text box, the value of the controller is modified.
          controller: _controller,
        ),
        new RaisedButton(
          onPressed: () {
            //Clear() can clear the value of the controller.
            _controller.clear();
          },
          child :  new Text (' empty '),
        ),
      ],
    );
  }
}

Question 1: create initial value of text box dynamically

In general, there is no problem using this method directly. But now there is a situation:

Question 1:When the initial value in the text box of the page is dynamic and obtained from the background, what should be done?

In this case, explain how to createTextEditingControllerThe content of the text is not known. At this time, if the dynamic changecontrollerIf you do, you will report an error and you can’t use it at all.

I haven’t met this situation at all, but I think there must be a solution for flutter. So I went to the document of flutter, but it was not in vain. I found one(https://api.flutter.dev/flutt… TextFormField

There is a sentence in the document:

If a controller is not specified, initialValue can be used to give the automatically generated controller an initial value.

That is to say, when no controller is specified, initialvalue can automatically generate the initial value of the controller.

Now that there is a solution, just modify the code.

class _FooState extends State<Foo> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new TextFormField(
          initialValue : " Initial value "
        ),
      ],
    );
  }
}

adoptTextFormFieldThis component can easily solve this problem.

Question 2: what is the difference between textfield and textformfield?

Although the problem has been solved, now there is another problem

Question 2:What is the difference between textfield and textformfield? When to use textfield? When to use textformfield?

TextFormField:

For example, make a form, the form has the user name, the name must contain@Symbol. You need to use it at this timeTextFormFieldThis component

The default value is displayed when the flutter text box is initialized

TextFormField(
  autovalidateMode:  AutovalidateMode.always , // turn on automatic verification
  decoration: const InputDecoration(
    icon: Icon(Icons.person),
    hintText: 'What do people call you?',
    labelText: 'Name *',
  ),
  onSaved: (String value) {
    //  When the user saves the form, the content is returned.
  },
  Validator: (string value) {// form validation
    return value.contains('@') ? 'Do not use the @ char.' : null;
  },
)

TextField:

For example, make a display text box in which you are prompted to input the content information in the text box.

The default value is displayed when the flutter text box is initialized

TextField(
  obscureText: true,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Password',
  ),
)

Conclusion:

  • If you need to save, reset, and verify user input, useTextFormField
  • If you only need to capture the user’s input behavior, you only need to use theTextFieldComponents.
  • Textformfield requires a form component.