Common Flutter Widget-input box

The Material design component provides two input boxes, namely TextField and TextFormField. Their role is to allow users to use the hardware keyboard or on-screen keyboard to enter text.

TextField

The textfield calls the onChanged callback whenever the user changes the text in the field. If the user has finished typing in the field (for example, by pressing a button on a soft keyboard), the text field invokes the onSubmitted callback.

To control the text displayed in a text field, use a controller. For example, to set the initial value of a text field, use a controller that already contains some text.

By default, a TextField has a default decoration that draws a separator line below the TextField. You can use the decoration property to control decoration, for example, by adding a label or icon. If the decoration property is set to null, the decoration will be completely removed.

If the decoration is non-empty (which is the default), the TextField requires its parent to be a material widget. Trigger the ripple effect when the TextField is tapped.

To integrate a TextField with other FormFields into a Form, consider using TextFormField.

 

TextFormField

TextFormField inherits from FormField and contains a TextField. TextFormField makes it easier to reset or validate multiple fields. To use without a form, pass the GlobalKey to the constructor, then use GlobalKey.currentState to save or reset the form field.

After specifying the controller, TextEditingController.text defines initialValue. If the FormField is part of a scrolling container that lazily constructs its children, such as a ListView or CustomScrollView, a controller should be specified. The controller's lifetime should be managed by the scroll container's stateful widget parent.

If no controller is specified, initialValue can be used to provide an initial value for the auto-generated controller.

 

Controller

Let's take a look at the controller, through which you can set/get the content of the edit box, select the edit content, and listen to the edit text change event. In most cases we need to explicitly provide one controllerto interact with the text field. If not provided controller, TextFieldone is automatically created internally.

class TextFieldPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            onChanged: (value) {
              print("value $value");
            },
            decoration: InputDecoration(
              labelText: "请输入用户名",
              hintText: "我是暗示",
              prefixIcon: Icon(Icons.person),
            ),
          ),
        ),
      ),
    );
  }
}

 

get input

• This method has been used in the code above onChange
• controller 

// 创建controller
TextEditingController _controller = TextEditingController();
_controller.text="我是默认值";
// 设置controller
TextField(
  controller: _selectionController,
)

Let's look at the complete code

class TextFieldPage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();
  TextFieldPage() {
    _controller.addListener(() {
      print(_controller.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            controller: _controller,
            onChanged: (value) {
              print("value $value");
            },
            decoration: InputDecoration(
              labelText: "请输入用户名",
              hintText: "我是暗示",
              prefixIcon: Icon(Icons.person),
            ),
          ),
        ),
      ),
    );
  }
}

Compared with the two methods, onChangedit is specially used to monitor text changes, but controllerhas more functions, such as setting default values, selecting text, and so on.

 

For the input box, we may be most concerned about whether the input content is legal during development, such as whether the phone number is legal, whether the email is legal, etc. This time we will use our form Form and TextFormField.

Form component main properties

Attributes	type	illustrate
key	Key	key in the widget tree
autovalidate	bool	Automatic form submission
child	Widget	component's child
onChanged	VoidCallback	Callback function when FormField value changes
...	...	...

 

 

 

 

 

 

 

Main properties of TextFormField

Attributes	type	illustrate
key	Key	key in the widget tree
autovalidate	bool	automatic verification
initialValue	T	initial value
onSaved	FormFieldSetter<T>	Form calls save method callback
validator	FormFieldValidator<T>	Form form validation
...	...	...

 

 

 

 

 

 

 

 

To get the form, we need to set a global type key, and get the form object through the property of this key. Regarding the key, I will introduce it in another article.

class TextFieldPage extends StatelessWidget {
  final GlobalKey<FormState> _globalKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Form(
              key: _globalKey,
              child: TextFormField(
                onSaved: (value) {
                  print("onSaved $value");
                },
                validator: (value) {
                  print("onSaved $value");
                  return value.length < 4 ? "长度不够" : null;
                },
                decoration: InputDecoration(
                  labelText: "请输入用户名",
                  hintText: "我是暗示",
                  prefixIcon: Icon(Icons.person),
                ),
              ),
            ),
            RaisedButton(
              child: Text('登陆'),
              onPressed: () {
                if (_globalKey.currentState.validate()) {
                  print('登陆成功');
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

To tidy up, Form, FormField, FormState are used here

• FormInherited from the StatefulWidgetobject, its corresponding state class isFormState。
• FormStateFor classes that can be passed Formor obtained . We can use it to perform unified operations on the children .StateForm.of()GlobalKeyFormFormField
• FormFieldIt is an abstract class that defines several properties and FormStateuses them to complete operations internally. TextFormField继承FormField. is TextFieldalso a wrapper class for , so in addition to FormFieldthe properties defined, it also includes TextFieldthe properties of .

It is worth noting that if usingForm.of()来获得FormState需要在Form的子节点中，包含一层Builder参数，此时返回的context才是可以获取到父节点的context。

Summary: Today I introduced how to use TextField or Form plus TextFormField to realize the input box function, controller and some basic callback functions, and also pay attention to the way to obtain the form using Form. The following articles will continue to introduce commonly used Widgets one by one. In the final series, a commercial-level project will be released, and interested friends will pay attention. If you find any mistakes during the reading process, please leave a message to me in time, and I will correct it as soon as possible. We also welcome all exchanges and common progress, thank you for your support!