How to deal with unwanted widget build in flutter?

CodeWithFlutter
3 Min Read

In Flutter, a StatefulWidget or a StatelessWidget can be rebuilt multiple times during its lifetime. Unwanted widget builds can occur for various reasons, such as changes in the widget’s data, changes in the widget’s parent, or changes in the app’s state.

Here are some common ways to deal with unwanted widget builds in Flutter:

  1. Use StatefulWidget only when necessary: If the widget’s state doesn’t change, you can use a StatelessWidget instead of a StatefulWidget. This way, the widget won’t be rebuilt unnecessarily.
  2. Use setState judiciously: If you need to use a StatefulWidget, make sure to use setState only when it’s necessary. setState triggers a rebuild of the widget, so you want to avoid calling it unnecessarily.
  3. Use const constructor: If you have a StatelessWidget that takes a constant value, you can use a const constructor. This way, the widget won’t be rebuilt if the value doesn’t change.
  4. Avoid using InheritedWidget: If possible, try to avoid using InheritedWidget to pass data between widgets. InheritedWidget can trigger unnecessary rebuilds of the widget tree, especially if the data changes frequently.
  5. Use Consumer instead of InheritedWidget: If you need to use InheritedWidget, you can use Consumer to rebuild only the widgets that depend on the data.
  6. Avoid expensive calculations in build methods: If your build method contains expensive calculations, these calculations will be performed every time the widget is rebuilt. Try to move these calculations to a separate method and cache the results if possible.
  7. Here’s an example that demonstrates the use of a Consumer to rebuild only the widgets that depend on the data:
class MyInheritedWidget extends InheritedWidget {
  final int data;

  MyInheritedWidget({
    Key key,
    @required this.data,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) =>
      oldWidget.data != data;
}

class MyChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>().data;
    return Text('Data: $data');
  }
}

class MyParentWidget extends StatelessWidget {
  final int data;

  MyParentWidget({
    Key key,
    @required this.data,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      data: data,
      child: Consumer<MyInheritedWidget>(
        builder: (context, widget, child) => child,
        child: MyChildWidget(),
      ),
    );
  }
}
Share this Article
Leave a comment