Flutter Provider setState() or markNeedsBuild() called during build
The issue is you calling notifyListeners
twice in one function. I get it, you want to change the state. However, it should not be the responsibility of the EventProvider to notify the app when it's loading. All you have to do is if it's not loaded, assume that it's loading and just put a CircularProgressIndicator
. Don't call notifyListeners
twice in the same function, it doesn't do you any good.
If you really want to do it, try this:
Future<void> fetchEvents(String email) async {
markAsLoading();
List<Event> events = await EventService().getEventsByUser(email);
_events.clear();
_events.addAll(events);
_eventLoadingStatus = EventLoadingStatus.Loaded;
notifyListeners();
}
void markAsLoading() {
_eventLoadingStatus = EventLoadingStatus.Loading;
notifyListeners();
}
You are calling fetchEvents
from within your build code for the root widget. Within fetchEvents
, you call notifyListeners
, which, among other things, calls setState
on widgets that are listening to the event provider. This is a problem because you cannot call setState
on a widget when the widget is in the middle of rebuilding.
Now at this point, you might be thinking "but the fetchEvents
method is marked as async
so it should be running asynchronous for later". And the answer to that is "yes and no". The way async
works in Dart is that when you call an async
method, Dart attempts to run as much of the code in the method as possible synchronously. In a nutshell, that means any code in your async
method that comes before an await
is going to get run as normal synchronous code. If we take a look at your fetchEvents
method:
Future<void> fetchEvents(String email) async {
//await Future.delayed(const Duration(milliseconds: 100), (){});
_eventLoadingStatus = EventLoadingStatus.Loading;
notifyListeners();
List<Event> events = await EventService().getEventsByUser(email);
_events.clear();
_events.addAll(events);
_eventLoadingStatus = EventLoadingStatus.Loaded;
notifyListeners();
}
We can see that the first await
happens at the call to EventService().getEventsByUser(email)
. There's a notifyListeners
before that, so that is going to get called synchronously. Which means calling this method from the build method of a widget will be as though you called notifyListeners
in the build method itself, which as I've said, is forbidden.
The reason why it works when you add the call to Future.delayed
is because now there is an await
at the top of the method, causing everything underneath it to run asynchronously. Once the execution gets to the part of the code that calls notifyListeners
, Flutter is no longer in a state of rebuilding widgets, so it is safe to call that method at that point.
You could instead call fetchEvents
from the initState
method, but that runs into another similar issue: you also can't call setState
before the widget has been initialized.
The solution, then, is this. Instead of notifying all the widgets listening to the event provider that it is loading, have it be loading by default when it is created. (This is fine since the first thing it does after being created is load all the events, so there shouldn't ever be a scenario where it needs to not be loading when it's first created.) This eliminates the need to mark the provider as loading at the start of the method, which in turn eliminates the need to call notifyListeners
there:
EventLoadingStatus _eventLoadingStatus = EventLoadingStatus.Loading;
...
Future<void> fetchEvents(String email) async {
List<Event> events = await EventService().getEventsByUser(email);
_events.clear();
_events.addAll(events);
_eventLoadingStatus = EventLoadingStatus.Loaded;
notifyListeners();
}