What is the correct way of dealing loading state in flutter?

Issue

for example I have 4 future builder in one screen. All of them returns CircularProgress indicator when they are still waiting for the data. In this case my screen gets full of circular progress indicator. Instead of this I want to show loading screen until all of the FutureBuilders gets their data. What is the correct way to handle this ?

Solution

  1. The correct way is to wrap the tasks of those 4 futures into one and wait for them to finish using await sequentially, after last await you can simply hide your loader.

  2. If your requirement is different and you can’t wait for all 4 task synchronously. You can have an array of int(data type doesn’t matter).

and simply initialise it with 4 elements, remove first element on finishing task from future builder.

List<int> _taskList = [0,1,2,3];

remove when one of the future finishes

_taskList.removeAt(0);

Use one Loader Widget in parent with condition

[if(_taskList.length >= 1) Loader(),]

For asynchronous transactions you’ve to manage some kind of ledger. Preferred way is using await

Answered By – Abhi Tripathi

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.