每天一个Flutter开发小项目 (8) : 掌握Flutter网络请求 - 构建每日名言应用

引言

欢迎再次回到 每天一个Flutter开发小项目 系列博客！在之前的七篇博客中，我们已经掌握了 Flutter UI 构建、状态管理、路由导航、表单处理，甚至数据持久化等一系列核心技能。您已经能够构建功能相对完善的本地应用。

然而，在互联网时代，绝大多数应用都需要与服务器进行数据交互，从远程 API 获取数据，才能展现更丰富的内容和更强大的功能。今天，我们将聚焦 Flutter 应用的 “网络连接” —— 网络请求，并构建一个充满智慧和启迪的 每日名言应用，让您掌握 Flutter 应用连接互联网、获取远程数据的专业技巧。

通过本篇博客，您将深入学习：

• Flutter 网络请求的核心概念: 理解 HTTP 协议，掌握 Flutter 中进行网络请求的基本流程和关键组件。
• http 插件的专业应用: 深入学习 http 插件，掌握在 Flutter 应用中使用 http 插件发送网络请求、接收响应、处理数据等全流程。
• 异步网络请求的最佳实践: 理解 Flutter 中网络请求的异步特性，掌握 Future、async/await 等异步编程技巧，确保应用流畅性和用户体验。
• JSON 数据解析: 学习如何解析从 API 接口返回的 JSON 数据，将 JSON 数据转换为 Dart 对象，方便在 Flutter 应用中使用。
• 每日名言应用的功能实现: 构建一个简洁优雅的每日名言应用，包括每日名言展示、加载动画、错误处理等核心功能。
• Flutter 应用联网能力的专业技能: 从网络请求发送到数据解析展示，全面提升 Flutter 应用联网能力的专业技能。

项目简介： 每日名言应用

我们的每日名言应用将围绕以下核心功能展开：

• 每日名言展示: 应用启动后，从远程 API 获取一句每日名言，并在应用界面上优雅展示名言内容和作者。
• 加载状态: 在网络请求过程中，显示加载动画，提升用户等待体验。
• 错误处理: 当网络请求失败或 API 接口返回错误时，应用能够友好地提示用户，并提供重试机制 (可选，本篇博客核心聚焦网络请求，重试机制可选实现)。
• 简洁优雅的UI: 应用界面设计简洁优雅，突出名言内容，提升用户阅读体验。

通过构建每日名言应用，我们将重点实践：

• http 插件集成: 在 Flutter 应用中集成 http 插件，搭建网络请求环境。
• API 接口调用: 调用远程每日名言 API 接口，发送 HTTP GET 请求。
• JSON 数据解析: 解析 API 接口返回的 JSON 数据，提取名言内容和作者信息。
• 异步操作处理: 使用 FutureBuilder Widget 处理异步网络请求结果，构建动态 UI。
• Flutter 网络请求完整流程: 从网络请求发送到数据解析展示，完整实现 Flutter 网络请求的流程。

Flutter 网络请求核心概念详解

在开始构建每日名言应用之前，我们先来深入理解 Flutter 网络请求的核心概念，为后续的实战打牢理论基础。

• HTTP 协议: 超文本传输协议 (Hypertext Transfer Protocol)，是互联网上应用最广泛的网络协议之一，用于在客户端 (例如，Flutter 应用) 和服务器之间传输数据。 我们常用的网页浏览、API 接口调用等都基于 HTTP 协议。 HTTP 协议定义了客户端和服务器之间通信的请求 (Request) 和 响应 (Response) 格式。

• HTTP 请求方法: HTTP 协议定义了多种请求方法，常用的有：

  • GET: 获取资源，例如，从服务器获取数据，通常用于查询数据。 在每日名言应用中，我们将使用 GET 请求从 API 接口获取每日名言数据。
  • POST: 提交数据，例如，向服务器提交表单数据、上传文件等，通常用于创建或更新数据。
  • PUT: 更新资源，类似于 POST，但通常用于幂等性地更新资源 (多次请求结果相同)。
  • DELETE: 删除资源，例如，删除服务器上的数据。

• URL (统一资源定位符): 统一资源定位符 (Uniform Resource Locator)，用于唯一标识互联网上的资源 (例如，网页、图片、API 接口等)。 URL 通常由协议、域名、路径、查询参数等组成。 例如，https://api.example.com/quotes/daily 就是一个 URL，指向一个 API 接口，用于获取每日名言数据。

• JSON (JavaScript 对象表示法): JavaScript 对象表示法 (JavaScript Object Notation)，是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 JSON 格式常用于 API 接口的数据返回格式。 在每日名言应用中，我们将接收 API 接口返回的 JSON 数据，并解析 JSON 数据，提取名言内容和作者信息。

• http 插件: Flutter 官方提供的 HTTP 客户端插件，用于在 Flutter 应用中发送 HTTP 请求、接收 HTTP 响应、处理 HTTP 头部、上传文件等。 http 插件提供了易于使用的 API，方便 Flutter 开发者进行网络编程。

• 异步编程 (Future, async/await): 网络请求通常是耗时的操作，为了避免阻塞 UI 线程，影响用户体验，Flutter 中的网络请求操作都是 异步 (Asynchronous) 的。 Flutter 使用 Future 和 async/await 等关键字来处理异步操作。

  • Future: Future 代表一个异步操作的最终结果，可以理解为一个“未来的值”，该值在异步操作完成后才会返回。 网络请求方法通常返回一个 Future 对象，表示网络请求的响应结果将在未来某个时刻返回。
  • async/await: async/await 是 Dart 中用于简化异步编程的关键字。 async 关键字用于声明一个异步函数，await 关键字用于等待一个 Future 对象完成，并获取 Future 对象的结果。 使用 async/await 可以使异步代码看起来更像同步代码，提高代码可读性。

实战步骤： 构建每日名言应用

接下来，我们将一步步使用 http 插件构建我们的每日名言应用。

步骤 1： 创建新的 Flutter 项目并添加 http 依赖

首先，创建一个新的 Flutter 项目，命名为 daily_quote_app。

然后在 pubspec.yaml 文件中添加 http 依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.0 #  使用最新版本，请查阅 pub.dev 获取最新版本号

运行 flutter pub get 命令获取依赖。

步骤 2： 选择每日名言 API 接口

我们需要选择一个提供每日名言 API 接口的网站。 网上有很多免费的每日名言 API 接口，例如：

• TheySaidSo Quote API: https://quotes.rest/qod.json (需要注册获取 API Key，免费版有请求次数限制)
• 公共免费API合集 (github 仓库): https://github.com/public-apis/public-apis (可以在这个仓库中搜索 “quote” 关键词，找到其他免费的 quote API)
• Inspirational Quotes API: https://api.quotable.io/random (简单易用，无需 API Key，返回 JSON 数据) 本篇博客将使用 Inspirational Quotes API

我们将使用 Inspirational Quotes API，它的 API 接口 URL 为： https://api.quotable.io/random，访问该 URL 将返回一个 JSON 数据，包含一句随机的名言。

步骤 3： 定义名言数据模型 (Quote)

我们需要定义一个 Quote 类来表示名言数据，包含名言内容和作者信息。

创建 lib/models/quote.dart 文件，定义 Quote 类：

class Quote {
   
  final String content; //  名言内容
  final String author; //  名言作者

  const Quote({
    //  使用 const 构造函数
    required this.content,
    required this.author,
  });

  factory Quote.fromJson(Map<String, dynamic> json) {
    //  工厂构造函数，从 JSON 数据创建 Quote 对象
    return Quote