Change parent variable and rebuild parent widget when child widget changes Flutter

user_12828249 0
Viewed 5700

I have a screen widget and a custom widget. I want to change a value of the screen widget when a button of my custom widget is pressed. Just to show an example;

This is MyScreen widget which uses CustomWidget as a child:

import './widgets/my_custom_widget.dart';
class MyScreen extends StatefulWidget {

  @override
  _MyScreen createState() => _MyScreenState();
}

class _MyScreen extends State<MyScreen> {
 bool isChildButtonPressed = false;
  @override
  Widget build(BuildContext context) {
    return Container(
         child:MyCustomWidget());
    }
}

This is MyCustomWidget

class MyCustomWidget extends StatefulWidget {

  @override
  _MyCustomWidget createState() => _MyCustomWidget();
}

class _MyCustomWidget extends State<MyCustomWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
        width:200,
        height:200,
         child: Row(children:[
                  FlatButton(child:Text("I am child button"),onPressed:(){
                     //what should I do here to change MyScreen isChildButtonPressed to true? 

                       }),
                  ]
             )
        );
    }
}

The code above is just an example of what I want to achieve but in my app, I have a long child widget multiple buttons and I want to store the widget in a separate file but I want to change some variables of my parent widget when a button of the child widget is pressed.

What I can do is to declare the variables of the parent as global variables and then use ValueNotifier but I don't think it's a good way to solve this issue as I only need those variables in one screen not my entire app.

I don't think I can use Provider package because it only rebuilds the child widgets not parent widgets.

So what do you suggest?

Thanks

dart flutter state-management
1 Answers

You can create a filed in your CustomWidget onFlatButtonPressed. The field will be a Callback Function or VoidCallBack then call the function when the flat button is pressed in your CustomWidget and define the function in your **MyScreen*

Like this

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  bool isChildButtonPressed = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MyCustomWidget(
        onFlatButtonPressed: (){
          setState(() {
            //Write what you want to do here
          });
        },
      ),
    );
  }
}

class MyCustomWidget extends StatefulWidget {
  final VoidCallback onFlatButtonPressed;

  MyCustomWidget({@required this.onFlatButtonPressed});

  @override
  _MyCustomWidget createState() => _MyCustomWidget();
}

class _MyCustomWidget extends State<MyCustomWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: Row(
        children: [
          FlatButton(child: Text("I am child button"), onPressed: widget.onFlatButtonPressed),
        ],
      ),
    );
  }
}
user_114525110
Related