向互联网发送数据
对于大多数应用来说,向互联网发送数据是必要的。http
包也涵盖了这方面的内容。
本示例将采取以下步骤
- 添加 `http` 包。
- 使用
http
包向服务器发送数据。 - 将响应转换为自定义 Dart 对象。
- 从用户输入中获取一个
title
。 - 在屏幕上显示响应。
1. 添加 `http` 包
#要将 http
包添加为依赖项,请运行 flutter pub add
。
flutter pub add http
导入 `http` 包。
import 'package:http/http.dart' as http;
如果你部署到 Android,请编辑 `AndroidManifest.xml` 文件以添加互联网权限。
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />
同样,如果你部署到 macOS,请编辑 `macos/Runner/DebugProfile.entitlements` 和 `macos/Runner/Release.entitlements` 文件以包含网络客户端授权。
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>
2. 向服务器发送数据
#本指南介绍如何使用 http.post()
方法将专辑标题发送到 JSONPlaceholder 来创建一个 Album
。
导入 dart:convert
以访问 jsonEncode
来编码数据
import 'dart:convert';
使用 http.post()
方法发送编码后的数据
Future<http.Response> createAlbum(String title) {
return http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, String>{'title': title}),
);
}
http.post()
方法返回一个包含 Response
的 Future
。
Future
是 Dart 中用于处理异步操作的核心类。Future 对象表示一个潜在的值或错误,它将在未来某个时间可用。- `http.Response` 类包含成功 http 调用接收到的数据。
createAlbum()
方法接受一个参数title
,该参数被发送到服务器以创建一个Album
。
3. 将 http.Response
转换为自定义 Dart 对象
#虽然进行网络请求很简单,但直接处理原始的 `Future<http.Response>` 并不是很方便。为了简化开发,请将 `http.Response` 转换为 Dart 对象。
创建 Album 类
#首先,创建一个 `Album` 类来包含网络请求中的数据。它包含一个工厂构造函数,用于从 JSON 创建 `Album` 对象。
使用 模式匹配 转换 JSON 只是其中一种选择。更多信息,请参阅关于 JSON 和序列化 的完整文章。
class Album {
final int id;
final String title;
const Album({required this.id, required this.title});
factory Album.fromJson(Map<String, dynamic> json) {
return switch (json) {
{'id': int id, 'title': String title} => Album(id: id, title: title),
_ => throw const FormatException('Failed to load album.'),
};
}
}
将 `http.Response` 转换为 `Album` 对象
#使用以下步骤更新 createAlbum()
函数,使其返回一个 Future<Album>
- 使用 `dart:convert` 包将响应体转换为 JSON `Map`。
- 如果服务器返回状态码为 201 的
CREATED
响应,则使用fromJson()
工厂方法将 JSONMap
转换为Album
。 - 如果服务器没有返回状态码为 201 的
CREATED
响应,则抛出异常。(即使在“404 Not Found”服务器响应的情况下,也要抛出异常。不要返回null
。这在检查snapshot
中的数据时很重要,如下所示。)
Future<Album> createAlbum(String title) async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, String>{'title': title}),
);
if (response.statusCode == 201) {
// If the server did return a 201 CREATED response,
// then parse the JSON.
return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
} else {
// If the server did not return a 201 CREATED response,
// then throw an exception.
throw Exception('Failed to create album.');
}
}
太棒了!现在你已经有了一个将标题发送到服务器以创建专辑的函数。
4. 从用户输入中获取标题
#接下来,创建一个 TextField
用于输入标题,以及一个 ElevatedButton
用于向服务器发送数据。同时定义一个 TextEditingController
来读取 TextField
中的用户输入。
当 ElevatedButton
被按下时,_futureAlbum
将被设置为 createAlbum()
方法返回的值。
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: _controller,
decoration: const InputDecoration(hintText: 'Enter Title'),
),
ElevatedButton(
onPressed: () {
setState(() {
_futureAlbum = createAlbum(_controller.text);
});
},
child: const Text('Create Data'),
),
],
)
按下创建数据按钮时,发出网络请求,将 TextField
中的数据作为 POST
请求发送到服务器。Future 对象 _futureAlbum
将在下一步中使用。
5. 在屏幕上显示响应
#要在屏幕上显示数据,请使用 FutureBuilder
widget。FutureBuilder
widget 是 Flutter 内置的,可以轻松处理异步数据源。您必须提供两个参数
- 您希望处理的
Future
。在本例中,是createAlbum()
函数返回的 Future。 - 一个 `builder` 函数,它根据 `Future` 的状态(加载中、成功或错误)告诉 Flutter 要渲染什么。
请注意,只有当 snapshot 包含非空数据值时,snapshot.hasData
才返回 true
。这就是为什么 createAlbum()
函数即使在“404 Not Found”服务器响应的情况下也应该抛出异常的原因。如果 createAlbum()
返回 null
,那么 CircularProgressIndicator
将无限期地显示。
FutureBuilder<Album>(
future: _futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.title);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
)
完整示例
#import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<Album> createAlbum(String title) async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, String>{'title': title}),
);
if (response.statusCode == 201) {
// If the server did return a 201 CREATED response,
// then parse the JSON.
return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
} else {
// If the server did not return a 201 CREATED response,
// then throw an exception.
throw Exception('Failed to create album.');
}
}
class Album {
final int id;
final String title;
const Album({required this.id, required this.title});
factory Album.fromJson(Map<String, dynamic> json) {
return switch (json) {
{'id': int id, 'title': String title} => Album(id: id, title: title),
_ => throw const FormatException('Failed to load album.'),
};
}
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
final TextEditingController _controller = TextEditingController();
Future<Album>? _futureAlbum;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Create Data Example',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: Scaffold(
appBar: AppBar(title: const Text('Create Data Example')),
body: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8),
child: (_futureAlbum == null) ? buildColumn() : buildFutureBuilder(),
),
),
);
}
Column buildColumn() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: _controller,
decoration: const InputDecoration(hintText: 'Enter Title'),
),
ElevatedButton(
onPressed: () {
setState(() {
_futureAlbum = createAlbum(_controller.text);
});
},
child: const Text('Create Data'),
),
],
);
}
FutureBuilder<Album> buildFutureBuilder() {
return FutureBuilder<Album>(
future: _futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.title);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
);
}
}