How do you take an input using a text field, put it into an equation and then display the output as text after a button is pressed in flutter?

Question

I want to take input from a user in two separate text fields, and then plug those two inputs into an equation of my own. The code that I have right now seems to work when I use the print() function (it prints the correct values), but it won't update the same value when I put it into a Text() element.

Here is my code at this stage:

class PageThree extends MaterialPageRoute<Null> {
  PageThree()
      : super(builder: (BuildContext ctx) {
          int age = 0;
          int annualspend = 0;
          int moneyneeded = 0;
          int temp = 0;
          String errormsg = '';

          return Scaffold(
            appBar: AppBar(
              title: Text("Retirement Calculator"),
              backgroundColor: Theme.of(ctx).accentColor,
              elevation: 2.0,
            ),
            body: Center(
                child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(10),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'How much money do you spend every year?',
                        hintStyle: TextStyle(fontSize: 16),
                        errorText: 'Enter an approximate estimation.',
                        errorStyle:
                            TextStyle(color: Colors.blueAccent, fontSize: 13)),
                    onChanged: (String str) {
                      setState(() {
                        annualspend = int.parse(str);
                      });
                    },
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'By what age do you wish to retire?',
                        hintStyle: TextStyle(fontSize: 16),
                        errorText: 'Enter an integer.',
                        errorStyle:
                            TextStyle(color: Colors.blueAccent, fontSize: 13)),
                    onChanged: (String str) {
                      setState(() {
                        age = int.parse(str);
                      });
                    },
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Container(
                        margin: const EdgeInsets.all(3.0),
                        child: Column(
                          children: <Widget>[
                            ButtonTheme(
                              minWidth: 395.0,
                              height: 20,
                              child: RaisedButton(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(9),
                                ),
                                padding: EdgeInsets.all(12),
                                color: Colors.lightBlueAccent,
                                child: Text('Calculate',
                                    style: TextStyle(color: Colors.white)),
                                onPressed: () {
                                  setState(() {
                                    if (age <= 85) {
                                      moneyneeded = ((85 - age) * annualspend);
                                      errormsg = '';
                                    } else {
                                      moneyneeded = 0;
                                      errormsg =
                                          'You entered an age greater than 85. Please enter a resonable number.';
                                    }
                                  });
                                },
                              ),
                            ),
                            Text("$temp"),
                            Text(errormsg)
                          ],
                        )),
                  ],
                ),
              ],
            )),
          );
        });
}

I should probably mention that all the setState occurrences show an error, but they seem to work just fine.

I have been trying to get this to work for the past two days without any success. I am quite new to flutter so I don't really know what to do. I would really appreciate the help.

Answer 1

The problem is coming from parsing temp variable to Text widget instead of moneyneeded variable . just fix it by change Text(temp) to Text(moneyneeded) . and you should add this line to your TextField because the input have be in numbers keyboardType: TextInputType.number