How to change a label value automatically when we change other text fields in flutter?

Question

I have used TextEditingController to fetch the changes in the text fields. Using the same I created a submit button and when the user clicks the submit button, it will calculate the values and update the label at the end.

Below is the code.

//main.dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome!!',
      home: Scaffold(
        appBar: AppBar(title: Text('scaffold appbar')),
        body: Center(
          child: CoinDetails(),
        ),
      ),
    );
  }
}

class CoinDetails extends StatefulWidget {
  @override
  _CoinDetailsState createState() => _CoinDetailsState();
}

class _CoinDetailsState extends State<CoinDetails> {
  TextEditingController coinController = TextEditingController();//replacement for onChanged event handling of a button
  TextEditingController priceController = TextEditingController();
  TextEditingController amountController = TextEditingController();
  double _price=0;
  double _amount=0;
  double _commission=0;
  double _totalCost=0;

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = Theme.of(context).textTheme.title;
    return Container(
      padding: EdgeInsets.all(15.0),
      child:Column(
        children: <Widget>[
          TextField(
            controller: coinController,
            decoration: InputDecoration(
            labelText: 'Coin',
            hintText: "e.g. BTT",
            labelStyle: textStyle,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5.0)
            ),
          ),
            keyboardType: TextInputType.text,
            /*onChanged: (String string){
            setState(() {
              name = string;
            });
            },*/
          ),
          TextField(
            controller: priceController,
            decoration: InputDecoration(
              labelText: 'Price',
              hintText: "e.g. BTT",
              labelStyle: textStyle,
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5.0)
              ),
            ),
            keyboardType: TextInputType.text,
            /*onChanged: (String string){
            setState(() {
              name = string;
            });
            },*/
          ),
          TextField(
            controller: amountController,
            decoration: InputDecoration(
              labelText: 'Amount',
              hintText: "e.g. BTT purchase amount invested",
              labelStyle: textStyle,
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5.0)
              ),
            ),
            keyboardType: TextInputType.text,
            /*onChanged: (String string){
            setState(() {
              name = string;
            });
            },*/
          ),
          RaisedButton(
              color: Theme.of(context).primaryColorDark,
              textColor: Theme.of(context).primaryColorLight,
              child: Text('Submit',textScaleFactor: 1.5),
              onPressed: (){
                setState(() {
                  _calculate();
                });
              }),

          Text("Commission: "+_commission.toString()+" Total Cost: "+_totalCost.toString()),
        ],
      ),
    );
  }
  String _calculate(){
    _price = double.parse(priceController.text);
    _amount = double.parse(amountController.text);
    _commission = _amount * 0.002;
    _totalCost = _amount + _commission;
  }
}

I want to remove this submit button and update the value automatically when the user changes the Price or Amount text fields or both.

Please guide me how to set that.

Answer 1

You can use the onChanged callback of the TextField widget. It fires every time the value of the TextField changes.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String name = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your name is: $name'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              onChanged: (String value) {
               /// The value is the value of the TextField.
               /// You can perform the calculations here:
               setState(() => name = value);
              },
              decoration: InputDecoration(
                  labelText: 'Name', hintText: 'Please enter your name'),
            ),
          ],
        ),
      ),
    );
  }
}

Also, the precision is showing wrong for 700 and showing correct for 70 and 7000. Can you please check it once.