setState（）清除表单元素数据波动中的数据

Question

我是新手，可以尝试Sateful小部件。事情就是这样，在我的UI屏幕布局中，我有两个不同的小部件

1. DropdownButton widget
2. TextFormField which holds card number.

When I was trying to update dropdown selected value to the DropdownButton widget, it automatically clears the text in TextFormField. Does it require to store text in global variable to restore again every time we call setState() method to update the values?

Here is the code for widgets, DropdownButton

 new Padding(
              padding: const EdgeInsets.all(15.0),
              child: new Column(
                children: <Widget>[
                  DropdownButton<String>(
                    value: _referPractice,
                    isDense: true,
                    hint: new Text(CONST_SELECT),
                    items: _stdCodesList.map((value) {
                      return new DropdownMenuItem<String>(
                        value: value.dialCode,
                        child: new Text("${value.code} ${value.dialCode}"),
                      );
                    }).toList(),
                    onChanged: (String newValue) {
                      setState(() {
                        _referPractice = newValue;  // here I`m trying to update selected value. 
                      });
                    },
                  )
                ],
              )),

TextFormField

TextFormField(
                controller: _textController,
                keyboardType: TextInputType.number,
                style: new TextStyle(
                  fontWeight: FontWeight.w200,
                  color: Colors.black,
                  fontSize: 18.0,
                ),
                decoration: new InputDecoration(
                    hintText: HING_ENTER_NUMBER,
                    suffixIcon: CircleIconButton(
                      onPressed: () {
                        this.setState(() {
                          _textController.clear();
                        });
                      },
                    )),
                maxLines: 1,
                validator: (value) {
                  if (value.isEmpty) {
                    return ERROR_CARD_DETAILS;
                  }
                },
              ),

I understand that Stateful widget rebuild the widget every time when ever it calls setState but how do I persist the data for form data which is not stored anywhere yet.

Suggestions please! Thanks in advance.

Answer 1

With the given code, one mistake I can think of is creating TextEditingController every time.

@override
Widget build(BuildContext context) {
  var _textController = TextEditingController(); //problem
  // build and return widgets

It should be in outside of build method. We can have it in constructor or initState.

If you have _textController outside build, can you add some more code?