How to call 2 Future functions that return Future values in FutureBuilder?

Question

I am working on a complex web application in which from time to time, I need to fetch data from backend API. Sometimes, I need to call 2 future functions in Future Builder to use their values. However, it makes code messy because for each FutureBuilder I need to check, if it has data or not and return the widget. It looks like this.

return FutureBuilder<object>(
   future: func1(),
   builder:(context, AsyncSnapshot<object> snapshot1){
      if(snapshot1.hasData){
        return FutureBuilder<object>(
        future: func2(),
        builder:(context, AsyncSnapshot<object> snapshot2){
           if(snapshot2.hasData){
              return widget;
           }else{
        return CircularProgressIndicator();
        }
      }
      ),
      }else{
         return CircularProgressIndicator();
      }
    }
);

Is there any other simpler way? where I can use only one FutureBuilder so that I do not have to return widgets i.e (CircularProgressIndicator)each time. Thanks.

Answer 1

First create result model class like this:

class ResultModel{
  final object1 result1;
  final object2 result2;
  ResultModel({required this.result1, required this.result2});
}

then you can create new future like this:

Future<ResultModel> _newFuture() async {
  final results = await Future.wait([func1(), func2()]);
  return ResultModel(result1: results[0], result2: results[1]);
}

then pass this to single FutureBuilder:

FutureBuilder<ResultModel>(
   future: _newFuture(),
   builder:(context, AsyncSnapshot<ResultModel> snapshot1){
      if(snapshot1.hasData){
        return return widget;
      }else{
         return CircularProgressIndicator();
      }
    }
)