跳转至正文

发送网络数据

如何通过 http 包发送网络数据。

对于大部分应用来说，向互联网发送数据都是必不可少的。 http package 同样可以满足这一需求。

本教程包含以下步骤：

  1. 添加 http package。

  2. 使用 http package 向服务器发送数据。

  3. 将响应转换成一个自定义的 Dart 对象。

  4. 从用户输入获取 title。

  5. 在屏幕上显示响应。

1. 添加 http package

#

要将 http package 添加为依赖，请运行 flutter pub add： 

flutter pub add http

导入 http package。

dart 
import 'package:http/http.dart' as http;

如果你要部署 Android，请编辑 AndroidManifest.xml 文件，添加 Internet 权限。

xml 
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

同样，如果你要部署 macOS，请编辑 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 文件，添加 network client 权限。

xml 
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>

2. 向服务器发送数据

#

本教程介绍如何使用 http.post() 方法将相册标题发送到 JSONPlaceholder 以创建 Album。

导入 dart:convert 以使用 jsonEncode 编码数据：

dart 
import 'dart:convert';

使用 http.post() 方法发送编码后的数据：

dart 
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。

使用 pattern matching 转换 JSON 只是其中一种方式。想了解更多，请查看完整文章：JSON and serialization。

dart 
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>：

  1. 使用 dart:convert package 将响应体转换成 JSON Map。

  2. 如果服务器返回状态码为 201 的 CREATED 响应，则使用 fromJson() 工厂方法将 JSON Map 转换成 Album。

  3. 如果服务器没有返回状态码为 201 的 CREATED 响应，则抛出异常。（即使是「404 Not Found」的服务器响应，也要抛出异常。不要返回 null。在检查如下所示的 snapshot 中的数据时，这一点很重要。）

dart 
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() 方法返回的值。

dart 
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'),
    ),
  ],
)

按下 Create Data 按钮后，发起网络请求，以 POST 请求将 TextField 中的数据发送到服务器。下一步会使用 Future _futureAlbum。

5. 在屏幕上显示响应

#

要在屏幕上显示数据，请使用 FutureBuilder widget。 FutureBuilder widget 随 Flutter 提供，可让你轻松处理异步数据源。你必须提供两个参数：

  1. 你想要处理的 Future。在本例中，即 createAlbum() 函数返回的 future。

  2. 一个 builder 函数，根据 Future 的状态（loading、success 或 error）告诉 Flutter 渲染什么内容。

请注意，只有当快照包含非空数据值时， snapshot.hasData 才会返回 true。因此，即使在「404 Not Found」的服务器响应情况下， createAlbum() 函数也应抛出异常。如果 createAlbum() 返回 null，则 CircularProgressIndicator 会无限期显示。

dart 
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();
  },
)

完整样例

#
dart 
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();
      },
    );
  }
}

除非另有说明，本文档之所提及适用于 Flutter 3.44.0 版本。本页面最后更新时间：2026-06-04。查看文档源码 或者 为本页面内容提出建议。