About Fetching and Updating data from Node.js rest API in Flutter

Riverpod

A Reactive Caching and Data-binding Framework

I would look into something like Riverpod. Although it is additional overhead, and may be intimidating at first, it offers a great solution to such problems.

You could then utilize a shared provider across multiple widgets, components, consumers. Check out the different types of providers and the use example use case descriptions for them. When watching a provider you can also leverage the AsyncValue type which leads you into handling scenarios such as: loading, error, and data.

AsyncValue Example

This is from their documentation and doesn’t show the implementation of the provider. That can be found in the other documentation, as that can be a deeper subject. I would definitely recommend checking out their documentation on the site and looking at the examples there.

class Example extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final AsyncValue<User> user = ref.watch(userProvider);

    return user.when(
      loading: () => CircularProgressIndicator(),
      error: (error, stack) => Text('Oops, something unexpected happened'),
      data: (user) => Text('Hello ${user.name}'),
    );
  }
}

Refreshing Data

Utilizing Riverpod will help you build "reactive" widgets, which will help handle the flow of data and performantly rebuilding widgets as needed.

As for refreshing data, I likely wouldn’t create a live stream for it, and instead just refresh it as required. If the user will be the only one to see their own data, then just update the provider state when the user updates their own data, and the consumers will update accordingly as they should be watching the provider. If the user’s data will be displayed to other users, then you must determine the value of trying to stream such to other users — this can also become a scaling problem with large sets of users (an n^2 problem every event for every user has to be replicated across all users). Likely that information is superficial, and if it is outdated it does not ultimately matter. When the clients refresh their views they can see the updated data then.

Blocking on Refresh

Riverpod by default will skip the loading state when refreshing data. It can trigger the loading state on the initial load, and then continue to display the old data until the new data comes through. There are parameters on the AsyncValue to override this behavior though if you wanted via skipLoadingOnRefresh that can be set to false. To be honest their documentation doesn’t seem to go over that much and it’s hard/impossible to find much on it and invalidation (different than a refresh).

user.when(
  loading: () => CircularProgressIndicator(),
  error: (error, stack) => Text('Oops, something unexpected happened'),
  data: (user) => Text('Hello ${user.name}'),
  skipLoadingOnRefresh: false,
);