how to update a parent widget when a variable is changed by a child widget-CodePudding

I have a Stateful Parent Widget with a counter variable that is displayed in the app.

class ParentWidget extends StatefulWidget {
  const ParentWidget({Key? key}) : super(key: key);

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Text(
              '$counter',
              style: TextStyle(fontSize: 20, color: kWhite),
            ),
            Button(
              isPressed: (isPressed) {
                isPressed ? counter   : counter--;
                print(counter);
              },
            ),
          ],
        ),
      ),
    );
  }
}

I then have a Stateful child widget called Button which has a toggle switch. this bool is then passed up to the parent widget and increases/decreases the counter variable.

class Button extends StatefulWidget {
  final ValueChanged<bool> isPressed;
  const Button({Key? key, required this.isPressed}) : super(key: key);

  @override
  State<Button> createState() => _ButtonState();
}

class _ButtonState extends State<Button> {
  bool buttonPressed = false;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          buttonPressed = !buttonPressed;
        });
        widget.isPressed(buttonPressed);
      },
      child: Container(
        color: kWhite,
        height: 50,
        width: 50,
      ),
    );
  }
}

the problem I'm having is the displayed counter isn't updating when i toggle the button. the counter is definitely updating because I can see in the print statement. its just not updating what's on screen.

so how do i get it to update on the screen?

the reason I don't just build the button in the parent app is because I have lots of them in my app and it would mean lots of bools and setState methods for each of them in the parent widget.

thanks so much and any help would be greatly appreciated

CodePudding user response：

You can use ValueListenableBuilder to rebuild Text widget.Put a varible in globals.dart and change its value on button tap.

ValueListenableBuilder(
      valueListenable:rebuild,
      builder: ((context,value,child) {
      return Text(
          '$counter',
          style: TextStyle(fontSize: 20,color: 
          kWhite),
        );
        })),

in globals.dart paste this variable

 ValueNotifier rebuild = ValueNotifier(0);

put this code in button onTap

 onTap: () {

    setState(() {
      buttonPressed = !buttonPressed;
    });
    widget.isPressed(buttonPressed);
rebuild.value == 0 ? rebuild.value = 1 : rebuild.value = 0;
  },