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.

Solution

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

Comments

[khaldoonH]

That was a mistake I made when I was entering this question; I was experimenting with temporary variables to see if that changes anything and forgot to change it back. I added keyboardType: TextInputType.number and changed the text widget back to Text('$moneyneeded') , but the problem is still the same. When I click the 'Calculate button' nothing on the screen changes.

[khaldoonH]

When I click the calculate button, I want to change the number under the button to the new money needed value. Currently, the number under the button is stuck at zero even after I update the values and click the button. This is what it looks like on my emulator

[khaldoonH]

Do you mind providing me with a picture? Maybe the problem is my emulator?

[khaldoonH]

oh then it is my emulator... Thanks!

[khaldoonH]

I'm sorry to bother you with this again, but I'm trying the app on my phone now, and it still won't work. What exactly did you change in the original code in order for it to work?

[Mohamed Gaber]

i only changed from temp variable to moneyneeded

[khaldoonH]

Could there be any reason why the app is not working for me but is working for you? Maybe an update I missed or something like that?

[Mohamed Gaber]

That's so weird

[Mohamed Gaber]

If you have anydesk i'll check what happens in your code and try to fix it @khaldoonH

[Mohamed Gaber]

Let us continue this discussion in chat.