如何在 Flutter 应用程序屏幕中显示来自服务器的响应? [英] How to display response from the server in Flutter app screen?
问题描述
我是 flutter 新手,我正在尝试在我的屏幕上显示来自服务器的响应.我从服务器获取订单历史记录并尝试在历史记录屏幕上显示它,你怎么做?
i'm new to flutter, i'm trying to display response from the server on my screen. I get from the server Orders history and trying to display it on History screen, how can u do this?
void getAllHistory() async {
http
.post(
Uri.parse(
'https://myurlblahblah'),
body: "{"token":"admin_token"}",
headers: headers)
.then((response) {
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');
}).catchError((error) {
print("Error: $error");
});
}
}
我没有请求服务器的经验,所以我不知道如何在除了打印"之外的任何地方显示它
I don't have experience with request to server, so i don't know how to display it anywhere except "print"
class HistoryScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(),
body: BodyLayout(),
);
}
AppBar buildAppBar() {
return AppBar(
automaticallyImplyLeading: false,
title: Row(
children: [
BackButton(),
SizedBox(width: 15),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Orders history",
style: TextStyle(fontSize: 16),
),
],
)
],
),
);
}
}
PSBodyLayout"只是一个列表视图,我需要在这里传递我的响应代码吗?当我切换到历史屏幕"时,我想获取所有订单历史记录;我真的很感激代码示例
PS "BodyLayout" is just a list view, do i need to past my response code here? I want to get all orders history when i switch to "History Screen" I would really appreciate code example
推荐答案
你应该试试下面的代码:
You should try below code:
您的 API 调用函数
Your API Call Function
Future<Album> fetchPost() async {
String url =
'https://jsonplaceholder.typicode.com/albums/1';
var response = await http.get(Uri.parse(url), headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
});
if (response.statusCode == 200) {
// If the call to the server was successful, parse the JSON
return Album.fromJson(json
.decode(response.body));
} else {
// If that call was not successful, throw an error.
throw Exception('Failed to load post');
}
}
声明你的类
class Album {
final int userId;
final int id;
final String title;
Album({
this.userId,
this.id,
this.title,
});
factory Album.fromJson(Map<String, dynamic> json) {
return Album(
userId: json['userId'],
id: json['id'],
title: json['title'],
);
}
}
像下面这样声明你的小部件:
Declare your widget like below :
Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: FutureBuilder<Album>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ListTile(
leading: Icon(Icons.person_outlined),
title: Text(snapshot.data.title),
),
ListTile(
leading: Icon(Icons.email),
title: Text(snapshot.data.userId.toString()),
),
ListTile(
leading: Icon(Icons.phone),
title: Text(snapshot.data.id.toString()),
),
],
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
),
),
这篇关于如何在 Flutter 应用程序屏幕中显示来自服务器的响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!