When I first made the Flutter TextField, I used TextField. It seems that most of the time there are no problems. The code form is as follows:

class _FooState extends State<Foo> { TextEditingController _controller; @override void initState() { super.initState(); _controller = new TextedItingController (text: 'init '); } @override Widget build(BuildContext context) { return new Column( children: <Widget>[new TextField(// Controller will contain the initial value when the TextField is first created. // Controller will be changed when the user modifies the content of the TextField. _Controller,), new RaisedButton(onPressed: () {// Clear () to clear the controller's value._controller.clear ();}, child: New Text(' empty '),),],); }}

Problem 1: Dynamically create text box initial values

In general, you can use this method directly without any problems. But here’s the thing:

Question 1:What if the initial value in the text box on the page is dynamic and retrieved from the background?

In this case, you don’t know what the text is when you create the TextedItingController. If you modify the controller dynamically, it will report an error and will be unusable.

It’s a situation I’ve never encountered before, but I think Flutter must have a solution. So I went to the Flutter document, there is no white, finally found a (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.

This means that when a controller is not specified, the initialValue automatically generates the initialValue of the controller.

Now that there is a solution, just change 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: "initialValue"),],); }}

With the TextFormField component, this problem is easily solved.

Question 2: What is the difference between a TextField and a TextFormField?

The problem was solved, but now there was another problem:

Question 2:What’s the difference between a TextField and a TextFormField? When to use a TextField? When do you use TextFormField?


For example, make a form with a user name that must include the @ sign. In this case, we need to use the TextFormField component

TextFormField(autoValidateMode: autoValidateMode. always, // 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) {return Value.contains ('@')? 'Do not use the @ char.' : null; },)


For example, make a display text box, the box prompted to enter the text box content information.

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


  • If you need to use save, reset, and validate user input, useTextFormField.
  • If you simply want to capture the user’s input behavior, just useTextFieldComponent will do.
  • TextFormField needs a Form component.