发送数据到互联网
对于大多数应用程序来说，向互联网发送数据是必要的。 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 文件以添加 Internet 权限。
<!-- 获取互联网数据所需。 -->
<uses-permission android:name="android.permission.INTERNET" />同样，如果您要部署到 macOS，请编辑您的 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 文件以包含网络客户端授权。
<!-- 获取互联网数据所需。 -->
<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包将响应主体转换为 JSONMap。 - 如果服务器返回状态代码为 201 的
CREATED响应，则使用fromJson()工厂方法将 JSONMap转换为Album。 - 如果服务器没有返回状态代码为 201 的
CREATED响应，则抛出异常。（即使在“404 未找到”服务器响应的情况下，也要抛出异常。不要返回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) {
// 如果服务器返回了 201 CREATED 响应，则解析 JSON。
return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
} else {
// 如果服务器没有返回 201 CREATED 响应，则抛出异常。
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 请求发送到服务器。_futureAlbum 将在下一步中使用。
5. 在屏幕上显示响应
#要在屏幕上显示数据，请使用 FutureBuilder 小部件。FutureBuilder 小部件随 Flutter 提供，并且可以轻松处理异步数据源。您必须提供两个参数：
- 您要使用的
Future。在本例中，是createAlbum()函数返回的 future。 - 一个
builder函数，告诉 Flutter 根据Future的状态（加载、成功或错误）渲染什么内容。
请注意，只有当快照包含非空数据值时，snapshot.hasData 才会返回 true。这就是为什么即使在“404 未找到”服务器响应的情况下，createAlbum() 函数也应该抛出异常的原因。如果 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) {
// 如果服务器返回了 201 CREATED 响应，则解析 JSON。
return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
} else {
// 如果服务器没有返回 201 CREATED 响应，则抛出异常。
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();
},
);
}
}除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。