dart - Flutter, calling a function inside the button

Question

I am new to flutter and I make some practices. I have a StatelessWidget called doChange and makeChange and one StatefulWidget. This class which is statefulwidget I made child of the home page of the app also. But, I think that it is unnecessary to define here. My purpose in this case is that, I want to change the state of the button make open,make closed and at the same time the text open and close will also change. I think that class changeText has not problem but in makeChange class I have some trouble with creating constructor and function to call into onPress. The states do not change. How can i solve this or is that any way to do this without function ?

class changeText extends StatelessWidget{

  final doChange;  
  changeText({@required this.doChange}); 

   @override
   Widget build(BuildContext context){
     return Container(
        //some codes
        //some codes
        child: doChange ? Text("open") : Text("close"),
     );
   }
}
class makeChange extends StatelessWidget{ 
     
     final changeState;
     makeChange({@required this.changeState}); // I want to add constructor here lets say onPressButton 

     whenPressed(){ // I want to create a function with the that constructor that I have add.
          
     }
     @override
     Widget build(BuildContext context){
       return Container(
            //some codes
            //
           child: Column(
              children: [
                MaterialButton(
                  //some codes
                  //
                  onPressed: () {} // Here I want to call a function when press the button. 
                  child: changeState ? Text("make open") : Text("make close"),
                ),
              ],
            ),
       );
     }
} 
class Mainarea extends StatefulWidget{
   @override
   _MainareaState createState() => _mainAreaState();
}

class _MainareaState extends State<Mainarea> {

   bool isChange= false; 

   @override
   Widget build(BuildContext context){ 
       return Container(
          //some codes
          // 
          child: Column(
            children: <Widget>[ 
                changeText(doChange: !this.isChange),
                makeChange(changeState: !this.isChange), 
            ],
          ),
       );
    }
}
    

question from:https://stackoverflow.com/questions/65626749/flutter-calling-a-function-inside-the-button

Answer 1

I just added a final Function(bool) callback as a parameter, which can be called inside from the stateless widget, and returns to the calling function. From there you can call setState

class changeText extends StatelessWidget {
  final bool doChange;
  changeText({@required this.doChange});

  @override
  Widget build(BuildContext context) {
    return Container(
      //some codes
      //some codes
      child: doChange ? Text("open") : Text("close"),
    );
  }
}

class makeChange extends StatelessWidget {
  final bool changeState;
  final Function(bool) callback;

  makeChange(
      {@required
          this.changeState,
      @required
          this.callback}); // You can rename this to onPressed or whatever


  @override
  Widget build(BuildContext context) {
    return Container(
      //some codes
      //
      child: Column(
        children: [
          MaterialButton(
            //some codes
            //
            onPressed: () => callback( changeState),
            child: changeState ? Text("make close") : Text("make open"), //I had to swap these around to make the text correct
          ),
        ],
      ),
    );
  }
}

class Mainarea extends StatefulWidget {
  @override
  _MainareaState createState() => _MainareaState();
}

class _MainareaState extends State<Mainarea> {
  bool isChange = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      //some codes
      //
      child: Column(
        children: <Widget>[
          changeText(doChange: !this.isChange),
          makeChange(
            changeState: !this.isChange,
            callback: (bool val) {
              setState(() => isChange = val); //this is your function that returns and resetst the value in the parent widget
            },
          ),
        ],
      ),
    );
  }
}