Flutter how to call multiple api(with futurebuilders) in one screen?

Question

I am building a home page with rest api and using http library. I can get latest posts from my api call. But I am building a Home Page and So I have to show more data from my rest api. Using Wordpress as back end. I want to fetch 5 posts from 3-4 categories to make home page fill with contents.

Here is my code :

class HomePage extends StatelessWidget {
  static const routeName = 'homepage';

  final WpPostService wpPostService = WpPostService();

  // final WpGhazalService wpGhazalService = WpGhazalService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('welcome to LilwaQamar'),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              child: FutureBuilder(
                  future: wpPostService.getPosts(),
                  builder: (BuildContext context,
                      AsyncSnapshot<List<Post>> snapshot) {
                    if (snapshot.hasData) {
                      List<Post> posts = snapshot.data;
                      return ListView(
                        children: posts
                            .map((Post post) => Card(
                                  elevation: 6,
                                  margin: EdgeInsets.all(10.0),
                                  child: ListTile(
                                    title: Html(
                                      data: post.title.rendered,
                                      defaultTextStyle: GoogleFonts.lato(
                                        textStyle: TextStyle(
                                            color: Colors.black,
                                            letterSpacing: .5,
                                            fontSize: 19),
                                      ),
                                    ),
                                    subtitle: Html(
                                      data: post.content.rendered
                                              .substring(0, 73) +
                                          '..',
                                      defaultTextStyle: GoogleFonts.lato(
                                        textStyle: TextStyle(
                                            color: Colors.black54,
                                            letterSpacing: .5,
                                            fontSize: 16),
                                      ),
                                    ),
                                    onTap: () {
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) => PostDetaislPage(
                                            post: post,
                                          ),
                                        ),
                                      );
                                    },
                                  ),
                                ))
                            .toList(),
                      );
                    }
                    return Center(child: CircularProgressIndicator());
                  }),
            ),
            Container(
              child: Text("Ghazals"),
            ),
          ],
        ),
      ),
    );
  }
}

I can get data from latest posts. But I have few more api calls like posts from category/1, category/2 etc. How can I get posts from multiple category ? Or how can I call multiple futurebuilders in one screen ? I hope you got my question.

Answer 1

Check out the video for multiple API calls

 fetchData() async {
  var responses = await Future.wait([
    http.get(firstAPI), // make sure return type of these functions as Future.
    http.get(secondAPI),
  ]);
 var response1 = responses.first;
 var response2 =  responses[1];
}