How to Deal With the Unwanted Widget Build In Flutter?

• General

The build method in Flutter is designed in such a way that it has no side effects. This is because many new widgets can be triggered such as root pop/push, screen size, etc. There are few methods to stop this unwanted widget build. So, in this article, we will see How to Deal With the Unwanted Widgets Build In Flutter?

How to Deal With the Unwanted Widgets Build In Flutter?

You can prevent unwanted build calling using this way:-

• Create a child Stateful class to create a UI using any widget.
• Use Provider library, using it can stop unwanted build method calling.

In these below situation build method is called:

• After calling initState().
• After calling didUpdateWidget().
• When setState() is called.
• When the keyboard is open.
• The screen orientation is changed.
• The parent widget is built then the child widget is rebuilt.

The design of the build method must be pure or without side effects. This is because many external factors can trigger the new widget build, such as:

• Root pop/push
• Screen resize, usually due to keyboard appearance or orientation change
• Parent widget recreated its child
• An Inherited Widget the widget depends on (Class.of(context) pattern) change.

This means that the build method should not trigger an HTTP call or modify any state.

It is also possible to make a widget capable of rebuilding without forcing its children to build too.

When the instance of the widget remains the same; Flutter does not intentionally rebuild the child. This means that you can cache parts of the widget tree to avoid unnecessary rebuilding:

The easiest way is to use dart const constructors:

@override
Widget build(BuildContext context) {
  return const DecoratedBox(
    decoration: BoxDecoration(),
    child: Text("Hello World"),
  );
}

Thanks to that const keyword, the instance of DecoratedBox will stay the same even if the build was called hundreds of times.

But you can achieve the same result manually:

@override
Widget build(BuildContext context) {
  final subtree = MyWidget(
    child: Text("Hello World")
  );

  return StreamBuilder<String>(
    stream: stream,
    initialData: "Foo",
    builder: (context, snapshot) {
      return Column(
        children: <Widget>[
          Text(snapshot.data),
          subtree,
        ],
      );
    },
  );
}

In the above example when StreamBuilder is notified of new values, the subtree won’t rebuild even if the StreamBuilder/Column does. It happens because of the closure, the instance of MyWidget didn’t change.

Conclusion:

Thanks for being with us till the end. So, in this article, We have learned how to deal with unwanted widgets Build in Flutter.

Keep Learning !!! Keep Fluttering !!!

Still, need Support for Flutter Development? You know where to find us.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.