How to get the content of the input text box in flutter

How to get the content of the input text box in flutter


In development, we often use input boxes, so in flutter, how to get the text content in the current input box?

Create input text box

The input box, we use the TextField Widget, which can be created very simply.

Example:

new TextField(
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(10.0),
    labelText: '标题',
    helperText: '请输入标题',
  ),

In the example, an input text box is created.

among them:

keyboardType: Represents the type of keyboard input (number, text, etc.).

Use TextEditingController to get the content of the text box

We want to get the final input content, can use the TextEditingController object to achieve.

Implementation steps

  1. Create a TextEditingController object.
  2. Apply the TextEditingController object to the TextField.
  3. Get the content of the text box through the TextEditingController object.

Assign the TextEditingController object to the controller property of the TextField to associate the text box with the TextEditingController object.

After TextEditingController is applied to the text box, you can get the value, and you can get the input content of the text box through the text() method provided by TextEditingController.

Example

//创建 TextEditingController 对象
var _titleTxt = new TextEditingController();

new TextField(
  controller: _titleTxt,//把 TextEditingController 对象应用到 TextField 上
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(10.0),
    labelText: '标题',
    helperText: '请输入标题',
  ),
  
//获取文本框内容
var content = _titleTxt.text;

**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"

Guess you like

Origin blog.csdn.net/u011578734/article/details/111874275