Flutter: невозможно получить значение текстового поля при первой отправке

Question

У меня есть форма внутри страницы, которая содержит четыре разных поля и одну кнопку.

У меня странная проблема, вот что я делаю:

1. заполните форму
2. нажмите кнопку добавления //variables are null
3. если я снова нажму кнопку Добавить , у меня правильные значения

Я подумал, что, возможно, какая-то библиотека или код вызывает проблемы, поэтому я сократил код, чтобы сузить его, теперь у меня очень простой код, только одно поле с material.dart пакетом импорта.Но проблема все еще существует.: (

То, что я заметил: Нажатие Кнопка добавления всегда возвращает данные из предыдущего состояния, чем текущее.

Пример:

1. Заполнить форму значением 1000
2. Нажать Добавить Кнопка //prints null
3. Обновить значение до 2000
4. Хит Кнопка добавления //prints 1000
5. Обновление значения до 3000
6. Хит Кнопка добавления //prints 2000
7. и так далее ...

Вот полный код :

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
            ])),
      ),
    );
  }
}

Понятия не имею, что с этим происходит,пожалуйста, помогите.

Answer 1

Наконец, я понял это, и решение было довольно простым.

Решение: Вызов form.save(); перед попыткой доступа к variables для решения проблемы.

Я поменял две строки в методе void _submit(), чтобы он заработал, вот обновленный код :

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

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

Answer 2

Вам нужно поместить _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;
        }
      },
    );