Flutter 如何在一个屏幕中调用多个 api(with futurebuilders)?
Flutter how to call multiple api(with futurebuilders) in one screen?
我正在使用 rest api 构建主页并使用 http 库。我可以从 api 电话中获取最新帖子。但是我正在构建一个主页,所以我必须显示更多来自我的休息 api 的数据。
使用 Wordpress 作为后端。我想从 3-4 个类别中获取 5 个帖子,使主页充满内容。
这是我的代码:
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"),
),
],
),
),
);
}
}
我可以从最新的帖子中获取数据。但是我有几个 api 调用,比如来自 category/1、category/2 等的帖子。我怎样才能获得来自多个类别的帖子?或者如何在一个屏幕中调用多个 futurebuilders?我希望你能回答我的问题。
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];
}
我正在使用 rest api 构建主页并使用 http 库。我可以从 api 电话中获取最新帖子。但是我正在构建一个主页,所以我必须显示更多来自我的休息 api 的数据。 使用 Wordpress 作为后端。我想从 3-4 个类别中获取 5 个帖子,使主页充满内容。
这是我的代码:
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"),
),
],
),
),
);
}
}
我可以从最新的帖子中获取数据。但是我有几个 api 调用,比如来自 category/1、category/2 等的帖子。我怎样才能获得来自多个类别的帖子?或者如何在一个屏幕中调用多个 futurebuilders?我希望你能回答我的问题。
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];
}