Вычтите числовое значение из TextFormField () с числовым значением из Text () в режиме реального времени, пока пользователь печатает

Question

У меня есть виджет Text() и виджет TextFormField() с TextInputType.number. То, что я хочу, - это когда пользователь печатает в математике вычитания TextFormField() должно происходить в реальном времени .

Значение, введенное в TextFormField(), должно вычесть значение внутри Text() виджет автоматически, когда пользователь печатает цифры внутри TextFormField();

Примечание Окончательный результат должен отображаться в том же виджете Text(), что и все эти печатания и вычитания происходит.

import 'package:flutter/material.dart';

class ChangeValuesPage extends StatefulWidget {

  @override
  _ChangeValuesPageState createState() {
    return _ChangeValuesPageState();
  }
}

class _ChangeValuesPageState extends State<ChangeValuesPage> {

  final pureNumbers = RegExp(r'^[0-9]+$');

  int numberValue = 200;
  int latestNumberValue;

  final formKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar(context, 'Simple App', 'otherData'),
      drawer: TopDrawer(),
      body: SingleChildScrollView(
        child: new Card(
          child: Padding(
            padding: EdgeInsets.all(5.0),
            child: new Column(
              children: <Widget>[
/**
 * Below is the Text() field where subtraction math should occure.
 */
/// The value in the Text() widget should be subtracted automatically with 
/// the number values inside the TextFormField() widget automatically as the user is typing the numbers
                Text(
                  'Number value text: ${this.numberValue}',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: 6,
                ),
                new Form(
                  key: formKey,
                  child: new Column(
                    children: <Widget>[
                      TextFormField(
                        keyboardType: TextInputType.number,
                        decoration: new InputDecoration(
                          labelText: 'Reduce number value?',
                          hintText: 'Default number value is "0"',
                        ),
                        validator: (val) {
                          if (val.isEmpty == true) {
                            return 'Fill in number values';
                          }
                          if (pureNumbers.hasMatch(val) == false) {
                            return 'Use alphanumeric characters only in nickname';
                          }
                          return null;
                        },
                        onSaved: (val) => this.latestNumberValue = int.parse(val),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Я пробовал разные способы добиться этого, но ничего не работает. Спасибо, опубликовано с любовью.

Answer 1

Попробуйте реализовать это для onChanged свойства TextFormField. Надеюсь, это то, что вы пытаетесь достичь.

onChanged: (val) {
  if (val.isEmpty) {
    setState(() => numberValue = 200);
  } else {
    numberValue = 200;
    setState(() => numberValue -= int.parse(val));
  }
},