Flutter：首次提交时无法获取文本字段值答案

【问题标题】：Flutter: Unable to get textfield value on first submissionFlutter：首次提交时无法获取文本字段值
【发布时间】：2019-09-25 07:38:15
【问题描述】：

我在页面内有表单，其中包含四个不同的字段和一个按钮。

我有一个奇怪的问题，这就是我正在做的事情：

填写表格
点击添加按钮//variables are null
如果我再次点击添加按钮，我的值是正确的

我想，可能是某些库或代码引起了问题，所以我减少了代码以缩小范围，现在我的代码非常简单，只有一个带有 material.dart 导入包的字段。但问题仍然存在。 :(

我注意到的事情：点击添加按钮总是会返回以前状态的数据而不是当前状态。

示例：

填写表格值1000
点击添加按钮//prints null
将值更新为2000
点击添加按钮//prints 1000
将值更新为3000
点击添加按钮//prints 2000
等等....

这是完整的代码：

import 'package:flutter/material.dart';

class AddFees extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _AddFees();
}

class _AddFees extends State<AddFees> {
  final addFeesFormKey = new GlobalKey<FormState>();
  final addFeesScaffoldKey = new GlobalKey<ScaffoldState>();

  String _fees;

  TextFormField fees;

  RaisedButton addFee;

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

  void _submit() {
    final form = addFeesFormKey.currentState;

    if (form.validate()) {
      setState(() {
        print(_fees);
        form.save();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    fees = TextFormField(
      keyboardType: TextInputType.number,
      onSaved: (val) => _fees = val,
      decoration: InputDecoration(labelText: 'Fees'),
      validator: (value) {
        if (value.isEmpty) {
          return 'Fee cannot be empty';
        } else {
          return null;
        }
      },
    );

    addFee = RaisedButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5.0),
      ),
      onPressed: () {
        _submit();
      },
      padding: EdgeInsets.all(12),
      color: Colors.redAccent,
      child: Text('Add Payment',
          style: TextStyle(color: Colors.white, fontSize: 24.0)),
    );

    return Scaffold(
      key: addFeesScaffoldKey,
      body: new Form(
        key: addFeesFormKey,
        child: Center(
            child: ListView(
                shrinkWrap: true,
                padding: EdgeInsets.only(left: 24.0, right: 24.0),
                children: <Widget>[
              SizedBox(
                height: 25.0,
              ),
              fees,
              SizedBox(
                height: 15.0,
              ),
              addFee
            ])),
      ),
    );
  }
}

这是怎么回事？

【问题讨论】：

在构建方法中添加 onSaved 方法 _fees = val in setState
试过这样onSaved: (val) => setState(() => _fees = val), 但同样的问题。

标签： flutter dart state textfield

【解决方案1】：

您需要将 _fees = val 放入 setState - 参见示例：

fees = TextFormField(
      keyboardType: TextInputType.number,
      onSaved: (val) => setState(() => _fees = val), // This is change
      decoration: InputDecoration(labelText: 'Fees'),
      validator: (value) {
        if (value.isEmpty) {
          return 'Fee cannot be empty';
        } else {
          return null;
        }
      },
    );

【讨论】：

我已经更新了代码，根据你的回答，但同样的问题。我什至运行flutter clean 并重建代码但没有运气。顺便说一句，我在登录表单中使用相同的方式，并且在那里工作正常。

【解决方案2】：

最后，我想通了，解决方案非常简单。

解决方案：在尝试访问variables 之前调用form.save(); 解决问题。

我在void _submit() 方法中交换了两行以使其工作，这是更新的代码：

void _submit() {
  final form = addFeesFormKey.currentState;

  if (form.validate()) {
    setState(() {
      form.save(); //swapped
      print(_fees);
    });
  }
}

【讨论】：