How to Fix the "setState() or markNeedsBuild() called during build" Error in Flutter

How to Fix the "setState() or markNeedsBuild() called during build" Error in Flutter

If you're a Flutter developer, you’ve probably encountered the error:

FlutterError (setState() or markNeedsBuild() called during build.
This _InheritedProviderScope<IdentityInfoVM?> widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
  _InheritedProviderScope<IdentityInfoVM?>
The widget which was currently being built when the offending call was made was:
  _SelectionKeepAlive)

What Does This Error Mean?

In Flutter, the setState() method is used to trigger a rebuild of a widget. However, calling setState() while the framework is already in the middle of building the widget tree can lead to unexpected behavior and cause this error.

Flutter has a strict process for rebuilding widgets. The widget tree is built in a specific order: first, the parent widgets are built, followed by the child widgets. During this process, Flutter ensures that only one widget is rebuilt at a time to maintain performance. If you call setState() during the build process, it could lead to inconsistencies or attempts to rebuild a widget that is already being built.

In your case, the error message points out that a setState() call was made in the middle of building the _InheritedProviderScope<IdentityInfoVM?> widget, which is an issue because it tries to mark this widget as needing a build while it is already being built.

How to Fix It

Here are a few strategies to solve this issue:

1. Postpone the setState() Call

One way to avoid this issue is to delay the setState() call to the next frame using the WidgetsBinding.instance.addPostFrameCallback() method. This allows you to schedule the rebuild after the current build phase is complete.

WidgetsBinding.instance.addPostFrameCallback((_) {
  setState(() {
    // Your state update logic here
  });
});

This ensures that the setState() call happens after the widget tree is built and avoids interfering with the ongoing build process.

2. Use Future.delayed()

Another option is to use Future.delayed() to delay the call to setState() until the next event loop iteration. This is useful if you want to perform an action after the current build phase is done.

Future.delayed(Duration.zero, () {
  setState(() {
    // Your state update logic here
  });
});

This will ensure that the setState() method is invoked only after the current frame finishes building.

3. Check for Parent Widget’s Build Status

In some cases, the error occurs because the setState() call is triggered by an ancestor widget that is still in the build phase. You can wrap the setState() call in a check to see if the widget tree is in the middle of being built. For instance, you can check the mounted property of your stateful widget:

if (mounted) {
  setState(() {
    // Your state update logic here
  });
}

The mounted property checks whether the widget is still part of the widget tree and can be safely rebuilt.

4. Avoid Calling setState() in the Build Method

It's a best practice to avoid calling setState() within the build() method or anywhere that could trigger a rebuild during the build process. Instead, try to trigger the state changes based on user actions or external events (such as network responses) that are not tied directly to the widget tree's build process.

5. Refactor Your Widget Tree

If you're still encountering the error, it might be time to refactor the widget tree. Complex widget trees can sometimes lead to this issue if there are unnecessary rebuilds or improper state management. Consider using state management solutions like Provider, Riverpod, or Bloc to better control when widgets are rebuilt.

Conclusion

The setState() or markNeedsBuild() called during build error is common when a widget tries to rebuild itself while it's already in the middle of a build process. To avoid this error, try delaying your setState() calls using methods like addPostFrameCallback or Future.delayed(). Always ensure that state updates happen outside the build phase to maintain smooth and predictable widget rebuilding.

Some Below Queries may using for solve your issues

1. You can face this error if you are showing a snackBar or an alertDialog before the completion of the build method, as well as in many other cases. So, in such cases you should use a callback function as shown below:

WidgetsBinding.instance.addPostFrameCallback((_){

  // Add Your Code here.

});

or you can also use SchedulerBinding which does the same:

SchedulerBinding.instance.addPostFrameCallback((_) {

  // add your code here.

  Navigator.push(
        context,
        new MaterialPageRoute(
            builder: (context) => NextPage()));
});

2. Problem : If you faced this issue while navigate to another page using bloc state as below

if(state is LoginBtnClickState) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => const Homepage()));
}

Error occurred when doing something before the page build is finished.

Solution : in such cases you should use a callback function

if(state is LoginBtnClickState) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
        Navigator.push(context, MaterialPageRoute(builder: (_) => const Homepage()));
    });
}

3. This error while using

if (mounted) {
  setState(() {});
}

I replaced it with the following code and the error was gone.

if (mounted) {
      SchedulerBinding.instance.addPostFrameCallback((_) {
        setState(() {});
      });
    }

4. Solution 1

Ensure that any state updates and notifyListeners() calls are made outside of the widget's build.

class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
@override
void initState() {
  sup

er.initState();
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Provider.of<CurrencyHistoryProvider>(context, listen: false).fetchCurrencyHistory();
     });
    }

  @override
  Widget build(BuildContext context) {
   return Container(); // your other code here
  }
}

Solution 2
You can use FutureBuilder or StreamBuilder too. The Key is to make sure you do not use setState() or these builder widgets inside consumer widgets such that Second build is run before the first has finished

 Thank You