跳至主要内容
内容

向互联网发送数据

内容

大多数应用都需要向互联网发送数据。http 软件包也涵盖了这一点。

此菜谱使用以下步骤

  1. 添加 http 软件包。
  2. 使用 http 软件包将数据发送到服务器。
  3. 将响应转换为自定义 Dart 对象。
  4. 从用户输入获取 title。
  5. 在屏幕上显示响应。

1. 添加 http 软件包

#

要将 http 软件包添加为依赖项，请运行 flutter pub add

flutter pub add http

导入http 包。

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文件以包含网络客户端权限。

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

2. 将数据发送到服务器

#

本教程介绍如何通过将专辑标题发送到JSONPlaceholder 来创建Album，使用http.post() 方法。

导入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。

使用模式匹配 转换 JSON 只是一个选项。有关更多信息，请参阅关于JSON 和序列化 的完整文章。

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 包将响应主体转换为 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'),
    ),
  ],
)

按下“创建数据”按钮时，发出网络请求，该请求将TextField中的数据作为POST请求发送到服务器。Future _futureAlbum将在下一步中使用。

5. 在屏幕上显示响应

#

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

  1. 您要使用的Future。在本例中，是createAlbum() 函数返回的 future。
  2. 一个builder 函数，它告诉 Flutter 根据Future的状态（加载、成功或错误）渲染什么内容。

请注意，只有当快照包含非空数据值时，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 的最新稳定版本。页面上次更新于 2024-09-16。 查看源代码 或 报告问题。