How does flutter determine when to rebuild widgets?

Viewed 421

Have a look at the following code snippet.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final child = CustomTextWidget();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: child, //CustomTextWidget(),
          onPressed: () {
            setState(() {});
          }
        ),
      ),
    );
  }
}

class CustomTextWidget extends StatelessWidget {
  CustomTextWidget() {
    print("constructed");
  }
  @override
  Widget build(BuildContext context) {
    print("got built");
    return Text("click me");
  }
}

I can understand why in the following code the constructor and the build method of CustomTextWidget will be called with every build. It's because I'm giving a new object every time.

 RaisedButton(
    child: CustomTextWidget(),
    onPressed: () {
      setState(() {});
      }
  ),

but why is it that if I give it child the build method of the CustomTextWidget object does not get called with every build? The constructor is called one time which makes sense and then the build method just a single time. Why isn't build called with every setState?

 RaisedButton(
    child: child,
    onPressed: () {
      setState(() {});
      }
  ),

How does flutter decide when to call these build methods?

1 Answers

In this example

 RaisedButton(
    child: child,
    onPressed: () {
      setState(() {});
      }
  ),

build wasn't called because the object didn't change. Flutter must be using the equality operator == to determine if a widget/object changed when setState is called. If the value is false build is not called. This is true in stateful, and stateless widgets. So the take away here is to always use const when possible, and declare your widgets outside the rebuild context when you don't want them to rebuilt.

Keep in mind that with StatefulWidgets there is another concept about when the State object held by the Element tree gets recreated in that regard Flutter looks at the type of the StatefulWidget as well as the key to determine if the State object should be recreated.

I hope this will help somebody out there.

Cheers

Related