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

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];
}