How to display text in 'Text' widget after flatButton press?

Question

I'm trying to make a calculator app using flutter where instead of taking input through the keyboard I want to take input through some buttons. The issue comes when I press a button but it does not display the corresponding data in the Text widget above.

All my classes are stateless except for the first MyApp class, which is Stateful.

I tried by creating a general variable outside all the classes and using that to transfer text from the button class to the display class but that did not work.

The general variable is "_calcText"

class DisplayAnswer extends StatelessWidget {

  final String _text;

  DisplayAnswer(this._text);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 2,
      child: Material(
        color: Colors.greenAccent,
        child: Ink(
          padding: EdgeInsets.all(10.0),
          child: Center(
            child: Container(
              constraints: BoxConstraints.expand(),
              decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 5.0), color: Colors.white),
              child: Text(_text,style: TextStyle(fontSize: 50.0), textAlign: TextAlign.center,),
            ),
          ),
        ),
      ),
    );
  }
}


class NumButtons extends StatelessWidget {
  final String _number;

  NumButtons(this._number);

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () {
        _calcText = _calcText + _number;
        print(_calcText);
        DisplayAnswer(_calcText);
      } ,
      child: Text(_number.toString(), style: TextStyle(fontSize: 30.0),),
      color: Colors.white
    );
  }
}

I want to display the value of _calcText in the Text widget of DisplayAnswer. I want _calcText to also change as other buttons are clicked, ie; if 2 is clicked Text should only display 2, if 5 is clicked after that it should display 25

The full code is here: https://drive.google.com/open?id=1C4MLAkjowloicbjBP_uV8BfpPzhz4Yxf

Solution

Use Statefull widget insted of StatelessWidget. Call the setState() method on onPressed function, after adition operation. It will build your widget with a new value.

On DisplayAnswer, you have to make a function to increment the value, than pass this function as parameter to NumButtons.

Pass a callback Function to NumButtons, like:

class NumButtons extends StatelessWidget {
  final String _number;
  final Function callback;
...

Comments

[Aryaman Arora]

I did that by converting the numbuttons class into a stateless widget, my code is as follows: onPressed: () { _calcText = _calcText + _number; setState(() {}); DisplayAnswer(_calcText); } , But it doesnt work

[Rubens Melo]

setState({ _calcText = _calcText + _number });

[Aryaman Arora]

onPressed: () { setState(() {_calcText = _calcText + _number;}); DisplayAnswer(_calcText); } , I had to put the () in setState becuase it giving an error: "Set<String> an't be assigned to parameter type '() -> void' ", also this did not fix it. Also it does not seem to be rebuilding DisplayAnswer becuase i put a random string as the parameter for DisplayAnswer when its called thorugh onPressed, but the dummy string did not show.

[Rubens Melo]

Use Statefull widget insted of StatelessWidget. Take a look on flutter initial example. It increment a value after a click.

[Aryaman Arora]

The initial flutter example has the button widget in the same class, but for my program, the buttons are all a separate class. Can I call a function within DisplayAnswer from the onPressed for the buttons?

[Rubens Melo]

take a look on the new awnser