CODEWITHSUNDEEP
flutterdart
fara
fara

Reputation: 35

How to update text value on the fly from another input

first time using Flutter for mobile the project. How to change the text value on the fly when an input field is typing?

Example the default value display in the text is 0.00. Now user key in the number 1 then text value shall change to 1 immediately.

Here is my display Text

              Consumer<Settings>(
                builder: (context, settings, child) => Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[

                    Text(
                      'TOTAL ${_getGrandTotal(_formData.items)}',
                      style: Theme.of(context).textTheme.headline5,
                    ),
                  ],
                ),
              ),

My inputformfield

            Consumer<Settings>(
                builder: (context, settings, child) => Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.only(right: 5),
                        child: TextFormField(
                          initialValue: _formData.total ?? '0.00',
                          decoration: TextFormField.decoration(
                            labelText: Localizations.of(context)
                                .text('label_total'),
                          ),
                          onChanged: (String value) async {
                          _getGrandTotal(value);

                        },
                      ),
                    ),
                  ],
                ),
              ),

Upvotes: 1

Views: 1495

Answers (1)

puelo
puelo

Reputation: 5977

You need to use a StatefulWidget and then use setState(() {}) inside the onChanged of the TextFormField. Like this:

TextFormField(
    initialValue: _formData.total ?? '0.00',
    decoration: TextFormField.decoration(
        labelText: Localizations.of(context).text('label_total'),
    ),
    onChanged: (String value) {
        setState(() {
          _formData.total = value;
        });
    },
),

The setState will then cause a rebuild of your widget and also render the up-to-date value.

Upvotes: 1

Related Questions