How to rebuild parent widget in flutter?

Question

This is a test where the parent widget turns green if the child container is green.

They are both blue at first, when clicking the child, both should turn green.

The child changes color when it's pressed.

class ColoredSquare extends StatelessWidget {
      ColoredButton button = ColoredButton();
      @override
      Widget build(BuildContext context) {
        return Scaffold(body: Column(children: [

        button, 
        Container(width: 50, height: 50, color: button.color == Colors.blue ? Colors.blue : Colors.green,)]
 ) );

  }


}

class ColoredButton extends StatefulWidget {
  Color color = Colors.blue;    
  @override
  _TestState createState() => _ColoredButtonState();
}

class _ColoredButtonState extends State<Test> {

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: (){setState(() {
          widget.color = Colors.green;

        });}

        ,child: Container(width: 50, height: 50, color: widget.color,));

  }
}

Problem is, if I change state (color) of my child widget by clicking it, it's state will update, meaning it will change color just fine. However, the parent will stay the same color since it's not rebuilding, it doesnt know that the child has been updated.

How can I force the parent to rebuild?

Since your parent is a Stateless Widget, you cannot change it's color. You must use a StatefulWidget instead. Otherwise, you can use a Callback function from the child to the parent. Or your child widget can use a ChangeNotifier which can trigger a listener in the parent. — daddygames
– daddygames, Commented Jun 15, 2021 at 14:09

Jitesh Mohite · Accepted Answer · 2021-06-15 14:11:30Z

Pass a function to child and return click event call to parent, and parent will update the color of itself and child.

Rectangle class

class Rectangle extends StatefulWidget {
  @override
  _RectangleState createState() => _RectangleState();
}

class _RectangleState extends State<Rectangle> {
  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(mainAxisSize: MainAxisSize.min, children: [
        Test(
          color: color,
          onTap: () {
            print('Rectangle called');
            setState(() {
              color = Colors.green;
            });
          },
        ),
        Container(
          width: 50,
          height: 50,
          color: color,
        )
      ]),
    ));
  }
}

Test Class

class Test extends StatefulWidget {
  final Function() onTap;
  Color color;

  Test({Key? key, required this.onTap, required this.color}) : super(key: key);

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

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          print('Test called');
          widget.onTap();
        },
        child: Container(
          width: 50,
          height: 50,
          color: widget.color,
        ));
  }
}

Collectives™ on Stack Overflow

How to rebuild parent widget in flutter?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related