Calling multiple APIs slows down the app to load?

Question

So I have made a News App using APIs available on the internet. So I had to use different API for each different Category. There are more than 9 categories, So this is making my app load very slow. So, what is the solution to this. How can I only call 2 APIs at the initial state and rest of the others after some time when the app has loaded. See the code below:

class NewsCard extends StatefulWidget {
  @override
  _NewsCardState createState() => _NewsCardState();
}

class _NewsCardState extends State<NewsCard>
    with SingleTickerProviderStateMixin {

  TabController tabController;
  static DateTime now = DateTime.now();
  String formattedDate;
  List newsData;
  List topNews1;
  List businessNews1;
  List worldNews1;
  List sportsNews1;
  List entertainmentNews1;
  List educationNews1;
  List tvnews1;
  List electionNews1;
  List lifeNews1;
  bool isLoading = true;
  final String toi= "https://timesofindia.indiatimes.com/";
  final String topNews =
      "API url";
  final String sportsNews =
      "API url";

  final String businessNews =
      "API url";

  final String worldNews =
      "API url ";
  final String entertainmentNews =
      "API url ";
  final String educationNews =
      "API url";
  final String tvNews =
      "API url ";
  final String electionNews =
      "API url";
  final String lifeNews =
      "API url";

  final String url =
      "https://newsapi.org/v2/top-headlines?sources=google-news-in&apiKey=";

  Future getData() async {
    var response = await http.get(
      Uri.encodeFull(url),
      headers: {
        HttpHeaders.authorizationHeader: ""
      },
    );
    var response1 = await http.get(
      Uri.encodeFull(topNews),
    );
    var response2 = await http.get(
      Uri.encodeFull(businessNews),
    );
    var response3 = await http.get(
      Uri.encodeFull(worldNews),
    );
    var response4 = await http.get(
      Uri.encodeFull(sportsNews),
    );
    var response5 = await http.get(
      Uri.encodeFull(entertainmentNews),
    );
    var response6 = await http.get(
      Uri.encodeFull(tvNews),
    );
    var response7 = await http.get(
      Uri.encodeFull(lifeNews),
    );
    var response8 = await http.get(
      Uri.encodeFull(electionNews),
    );
    var response9 = await http.get(
      Uri.encodeFull(educationNews),
    );
    List data = jsonDecode(response.body)['articles'];
    List topNewsData = jsonDecode(response1.body)['stories'];
    List businessNewsData = jsonDecode(response2.body)['items'][0]['stories'];
    List worldNewsData = jsonDecode(response3.body)['items'][0]['stories'];
    List sportsNewsData = jsonDecode(response4.body)['items'][0]['stories'];
    List entertainmentNewsData = jsonDecode(response5.body)['items'][0]['stories'];
    List tvNewsData = jsonDecode(response6.body)['items'][0]['stories'];
    List lifeNewsData = jsonDecode(response7.body)['items'][0]['stories'];
    List electionsNewsData = jsonDecode(response8.body)['items'][0]['stories'];
    List educationNewsData = jsonDecode(response9.body)['items'][0]['stories'];
    setState(() {
      newsData = data;
      topNews1 = topNewsData;
      businessNews1 = businessNewsData;
      worldNews1 = worldNewsData;
      sportsNews1 = sportsNewsData;
      entertainmentNews1 = entertainmentNewsData;
      tvnews1 = tvNewsData;
      lifeNews1=lifeNewsData;
      electionNews1 = electionsNewsData;
      educationNews1  = educationNewsData;
      isLoading = false; //this is for the initial loading, this is taking too much of time.
    });
  }

  @override
  void initState() {
    super.initState();
    this.getData();
    tabController = TabController(vsync: this, length: 9);
  }

Inside the Scaffold

isLoading
                ?Column(....):Column(.....)

Do keep in Mind that i am a beginner in Flutter, So if my method of approach is wrong then kindly request me to do the perfect approach.

Answer 1

Since there is no dependency between different api calls (api call 1 need not wait for api call 0 to finish), better to start them all and await for the results at end. So don't use await for every api call. Instead use Future.wait to wait for all futures at the end. Something like:

  Future getData() async {
    List<Future> responseFutures = [
      http.get(
        Uri.encodeFull(url),
        headers: {HttpHeaders.authorizationHeader: ""},
      ),
      http.get(
        Uri.encodeFull(topNews),
      ),
      http.get(
        Uri.encodeFull(businessNews),
      ),
      http.get(
        Uri.encodeFull(worldNews),
      ),
      http.get(
        Uri.encodeFull(sportsNews),
      ),
      http.get(
        Uri.encodeFull(entertainmentNews),
      ),
      http.get(
        Uri.encodeFull(tvNews),
      ),
      http.get(
        Uri.encodeFull(lifeNews),
      ),
      http.get(
        Uri.encodeFull(electionNews),
      ),
      http.get(
        Uri.encodeFull(educationNews),
      ),
    ];
    List responses = await Future.wait(responseFutures);

    List data = jsonDecode(responses[0].body)['articles'];
    List topNewsData = jsonDecode(responses[1].body)['stories'];
    List businessNewsData = jsonDecode(responses[2].body)['items'][0]['stories'];
    List worldNewsData = jsonDecode(responses[3].body)['items'][0]['stories'];
    List sportsNewsData = jsonDecode(responses[4].body)['items'][0]['stories'];
    List entertainmentNewsData = jsonDecode(responses[5].body)['items'][0]['stories'];
    List tvNewsData = jsonDecode(responses[6].body)['items'][0]['stories'];
    List lifeNewsData = jsonDecode(responses[7].body)['items'][0]['stories'];
    List electionsNewsData = jsonDecode(responses[8].body)['items'][0]['stories'];
    List educationNewsData = jsonDecode(responses[9].body)['items'][0]['stories'];
    setState(() {
      newsData = data;
      topNews1 = topNewsData;
      businessNews1 = businessNewsData;
      worldNews1 = worldNewsData;
      sportsNews1 = sportsNewsData;
      entertainmentNews1 = entertainmentNewsData;
      tvnews1 = tvNewsData;
      lifeNews1 = lifeNewsData;
      electionNews1 = electionsNewsData;
      educationNews1 = educationNewsData;
      isLoading = false; //this is for the initial loading, this is taking too much of time.
    });
  }