FutureBuilder shows the loading indicator althought the result is cached

Question

I'm facing an issue trying to use FutureBuilder with Provider and cache. The computation is done one time and then its cached. The code looks like this:

FutureBuilder(
     future: model.calculateStats(chartType: getChartType()),
     builder: (context, snapshot) {
         if(snapshot.connectionState != ConnectionState.done) {
           return Center(
              child: CircularProgressIndicator()
           );
         }

      return buildChart(model);
   },
)

That piece of code is inside a Consumer with a ViewModel, which has the method calculateStats, which is the following:

Future calculateStats({ChartType chartType = ChartType.Monthly}) async {
   return await MemoryCache.instance.getOrCreateAsync("stats:${chartType.index}", () async {
      var statsMaker = StatsMaker(chartType: chartType);
      
      this._currentStats = await statsMaker.generate(
        startDate: _getStartDateForChartType(chartType),
        endDate: DateTime.now()
      );
    }, allowNull: true);
  }

Here you can see a video of what is happening: https://i.imgur.com/SWQ7N7P.mp4

The helper class MemoryCache checks if the provided key is in a map, and if that is true, it returns the value without doing any computation, which should return immediately, if it not found, the future is awaited and the result stored. But here, although the result is cached, the FutureBuilder shows the loading indicator (which is orange in the video). What am I doing wrong?

score 0 · Answer 1 · answered Jan 31 '21 at 22:44

0

Does model.calculateStats(chartType: getChartType()) create a future, or just reference a future? If it creates a future, then your FutureBuilder will not complete. You must create the future in initState, and put it in a variable there, then reference that variable at future: .

Edit: ahh, see now, it's creating a future. So you need to stash that into your State during initState.

answered Jan 31 '21 at 22:44

Randal Schwartz

39,428
4
43
70

I illustrated this at my new video: https://www.youtube.com/watch?v=sqE-J8YJnpg – Randal Schwartz Feb 22 '21 at 03:49

score 0 · Answer 2 · answered Feb 01 '21 at 01:50

0

How about checking snapshot.hasData and snapshot.hasError?

answered Feb 01 '21 at 01:50

JailBreaker

1

Bach · Accepted Answer · 2021-02-01T02:54:36.117

Their might be 2 reasons FutureBuilder keep loading. One is because the calculateStats keep firing, that cause the snapshot's status to be refreshed repeatedly. Second is your getOrCreateAsync might return an already completed Future, that the FutureBuilder has no way to synchronously determine that a Future has already completed.

There are a more convenient way to cached and load the UI one-time, which is using StreamBuilder since you only need to call the async method once in the initState or didChangeDependencies, hence the UI don't need to be reload all the time.

You should use the snapshot.hasData as well to check if the Future value is completed and not-null. In the UI:

@override
initState() {
  super.initState();
  model.calculateStats(chartType: getChartType());
}

// ... other lines

return StreamBuilder(
     stream: model.statsStream,
     builder: (context, snapshot) {
         if(!snapshot.hasData) {
           return Center(
              child: CircularProgressIndicator()
           );
         }

      return buildChart(snapshot.data);
   },
)

In your async function:

StreamController _controller = StreamController();

Stream get statStream => _controller.stream;

Future calculateStats({ChartType chartType = ChartType.Monthly}) async {
   final stats = await MemoryCache.instance.getOrCreateAsync( ... );
   // add your stats to Stream here (stats is the value you want to send to UI)
   _controller.add(stats);

Make sure that your getOrCreateAsync return a non-null value so that the Stream is updated correctly.

This is a good solution, thank you. I think its the way BloC handles the updates, right? — , Feb 01 '21 at 12:51
Yes, the Stream only get notify if there are new data sent into it — Bach, Feb 01 '21 at 14:49

FutureBuilder shows the loading indicator althought the result is cached

3 Answers3