Future.wait() for multiple futures

Question

I'm trying to catch the error when my device has no internet connection. I've built out 2 future methods, 1 to import a json and 1 to look into the database. I have a future builder that's suppose to wait for both futures to finish before building out the grid view but it seems like the offlineFlashCardList is being prematurely called due to the connection error. Any idea how to make it wait for both futures to finish before the snapshot error gets called?

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:baby_sound/strings.dart';
import 'package:baby_sound/objects/flashCardList.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'dart:async' show Future;
import 'dart:convert';
import 'package:baby_sound/database/database.dart';
import 'package:baby_sound/objects/network.dart';
import 'package:http/http.dart' as http;

class GridViewWidget extends StatefulWidget{
  @override
  createState() => new GridViewState();

}

class GridViewState extends State<GridViewWidget>{


  List<FlashCardList> flashCardList;
  List<FlashCardList> offlineFlashCardList;



  Future<List<FlashCardList>> fetchFlashCardList() async{
    debugPrint("before response");
    List<FlashCardList> tempFlashCardList;
    final response = await http.get('some json url');
    //checkConnection(url).then((response){
      debugPrint ("after database load, response code: ${response.statusCode}");
      if (response.statusCode == 200) {
        var data = json.decode(response.body);
        var flashCardListData = data["FlashCardList"] as List;
        tempFlashCardList = flashCardListData.map<FlashCardList>((json) => FlashCardList.fromJson(json)).toList();
        for (int i = 0; i < tempFlashCardList.length; i++){
          debugPrint("DBProvider listID: ${await DBProvider.db.getFlashCardList(tempFlashCardList[i].flashCardListID)}, flashCardID: ${tempFlashCardList[i].flashCardListID}");
          if (await DBProvider.db.getFlashCardList(tempFlashCardList[i].flashCardListID) == null){
            DBProvider.db.newFlashCardList(tempFlashCardList[i]);
            debugPrint("Adding ${tempFlashCardList[i].name}}}");
          } else {
            DBProvider.db.updateFlashCardList(tempFlashCardList[i]);
            debugPrint("Updating ${tempFlashCardList[i].name}, getFlashCardList: ${DBProvider.db.getFlashCardList(tempFlashCardList[i].flashCardListID)}");
          }
        }
        flashCardList = tempFlashCardList;
        debugPrint("Standard flashCardList Size: ${flashCardList.length}");
      }

    debugPrint("flashCardList Size Before Return: ${flashCardList.length}");
    return flashCardList;
    }

  Future<List<FlashCardList>> fetchFlashCardListFromDB() async{

    offlineFlashCardList = await DBProvider.db.getAllFlashCardListFromDB();
    debugPrint("fetchFromDB size: ${offlineFlashCardList.length}");
    return offlineFlashCardList;
  }



  @override
  void initState(){
    debugPrint ('debug main.dart');
    super.initState();

  }


  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        title: new Text(Strings.pageTitle),
      ),
      body: FutureBuilder<List<FlashCardList>>(
        future: new Future(() async{
          await fetchFlashCardList();
          await fetchFlashCardListFromDB();
        }),
        builder: (BuildContext context, AsyncSnapshot<List<FlashCardList>> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              debugPrint("Snapshot has error: ${snapshot.error}");
              return new GridView.builder(
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 200.0,
                      childAspectRatio: 0.5),
                  itemCount: offlineFlashCardList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _getGridItemUI(context, offlineFlashCardList[index]);
                  });
//              return new Center(child: new CircularProgressIndicator());
            } else {
              debugPrint("Grid ViewBuilder");
              return new GridView.builder(
                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 200.0,
                      childAspectRatio:0.5),
                  itemCount: flashCardList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _getGridItemUI(context, flashCardList[index]);
                  });
            }
          }else {
            debugPrint("CircularProgress");
            return new Center(child: new CircularProgressIndicator());
          }
        })
    );
  }

  _getGridItemUI(BuildContext context, FlashCardList item){
    return new InkWell(
      onTap: () {
        _showSnackBar(context, item);
      },
      child: new Card(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

              new Image(image: new CachedNetworkImageProvider("https://babymozart.org/babymozartq92C9TLa9UMkulL2m81xHdn9u2R92e1e/image/" + item.image)),
              /*new Expanded(
                child:new Center(
                  child: new Column(
                    children: <Widget>[
                      new SizedBox(height: 8.0),
                      new Expanded(
                        child: AutoSizeText(
                          item.name, maxLines: 1,
                        )
                      )
                    ],
                  ),
                )
              )*/
            ],
        ),
        elevation: 2.0,
        margin: EdgeInsets.all(5.0),
      )
    );
  }

  _showSnackBar(BuildContext context, FlashCardList item){

  }



}

Answer 1

You can use Future.wait to wait for several Future to be completed.

body: FutureBuilder<List<FlashCardList>>(
    future: Future.wait([
        fetchFlashCardList(),
        fetchFlashCardListFromDB(),
    ]),

Answer 2

Here's an example based on Alexandre's answer (As I found myself looking for how to handle results):

FutureBuilder(
    future: Future.wait([
         firstFuture(), // Future<bool> firstFuture() async {...}
         secondFuture(),// Future<bool> secondFuture() async {...}
         //... More futures
    ]),
    builder: (
       context, 
       // List of booleans(results of all futures above)
       AsyncSnapshot<List<bool>> snapshot, 
    ){

       // Check hasData once for all futures.
       if (!snapshot.hasData) { 
          return CircularProgressIndicator();
       }

       // Access first Future's data:
       // snapshot.data[0]

       // Access second Future's data:
       // snapshot.data[1]

       return Container();

    }
);