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

Flutter是一款由Google推出的跨平台UI框架，广泛用于开发高性能的移动应用、桌面应用及Web应用。本项目将帮助你更深入理解Flutter的网络请求机制，并展示如何构建一个简单的每日名言应用。通过该项目，你将能够掌握Flutter中如何进行网络请求、如何处理JSON数据、如何显示数据等技术，并将其应用于实际开发中。

项目概述

在本教程中，我们将会构建一个应用，能够每天获取一条名言并展示给用户。这是一个典型的网络请求应用，通过这个项目，你将了解如何与后端接口进行交互，如何处理API返回的数据，以及如何使用Flutter的UI框架展示这些数据。

项目的核心功能包括：

从网络获取每日一条名言
显示名言及作者
每次应用启动时自动请求新的名言

技术栈

Flutter：前端开发框架
Dart：编程语言
HTTP：用于处理网络请求
JSON：用于解析API返回的数据

第一步：准备工作

首先，确保你已经安装了Flutter和Dart环境。如果没有安装，可以参考Flutter官方网站进行安装。

创建Flutter项目

打开终端（或者命令行工具），使用以下命令来创建一个新的Flutter项目：

bashCopy Code
flutter create daily_quote_app

这将会创建一个名为daily_quote_app的Flutter项目。进入到项目目录中：

bashCopy Code
cd daily_quote_app

添加依赖包

我们将使用http包来处理网络请求。因此，需要在pubspec.yaml文件中添加该依赖：

yamlCopy Code
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

然后，运行以下命令来安装依赖：

bashCopy Code
flutter pub get

第二步：创建网络请求功能

在这个项目中，我们将从一个API获取每日名言。为了简化，我们可以使用一个免费的API——quotable.io。它提供了一个简单的REST API来获取名言。

创建网络请求类

在lib目录下，创建一个新的文件quote_service.dart，用于封装网络请求的逻辑。

dartCopy Code
import 'dart:convert';
import 'package:http/http.dart' as http;

class QuoteService {
  final String apiUrl = 'https://api.quotable.io/random';

  Future<Map<String, String>> fetchQuote() async {
    try {
      final response = await http.get(Uri.parse(apiUrl));
      
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        return {
          'content': data['content'],
          'author': data['author'],
        };
      } else {
        throw Exception('Failed to load quote');
      }
    } catch (e) {
      throw Exception('Failed to load quote: $e');
    }
  }
}

在上面的代码中：

我们定义了一个QuoteService类，它包含一个fetchQuote()方法，该方法向API发送HTTP GET请求。
当请求成功时，我们从响应中解析出名言内容和作者，并以Map<String, String>的形式返回。
如果请求失败，抛出一个异常。

测试网络请求

为了确保我们的网络请求逻辑没有问题，可以在main.dart中添加一个简单的测试代码来调用这个API并显示结果。

dartCopy Code
import 'package:flutter/material.dart';
import 'quote_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '每日名言',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QuoteScreen(),
    );
  }
}

class QuoteScreen extends StatefulWidget {
  @override
  _QuoteScreenState createState() => _QuoteScreenState();
}

class _QuoteScreenState extends State<QuoteScreen> {
  late Future<Map<String, String>> quote;

  @override
  void initState() {
    super.initState();
    quote = QuoteService().fetchQuote();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('每日名言'),
      ),
      body: FutureBuilder<Map<String, String>>(
        future: quote,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('请求失败'));
          } else if (snapshot.hasData) {
            final data = snapshot.data!;
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '"${data['content']}"',
                    style: TextStyle(fontSize: 24, fontStyle: FontStyle.italic),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 20),
                  Text(
                    '- ${data['author']}',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            );
          } else {
            return Center(child: Text('没有数据'));
          }
        },
      ),
    );
  }
}

解释代码

在QuoteScreen的State类中，我们通过initState()方法初始化了一个quote的Future，它会调用QuoteService().fetchQuote()来获取每日名言。
在build()方法中，我们使用了FutureBuilder来根据网络请求的状态显示不同的内容：
- 如果数据正在加载，显示一个加载动画。
- 如果请求失败，显示一个错误提示。
- 如果数据加载成功，显示名言和作者。

运行应用

现在，你可以运行应用：

bashCopy Code
flutter run

这时，你的应用应该会显示一条名言及其作者，数据通过网络请求加载并展示。

第三步：增强功能

自动获取名言

目前，每次启动应用时，我们都会请求并显示一条新的名言。如果你希望应用能够每天显示一条固定的名言（即每次启动应用时都请求新的名言），可以通过本地存储或定时任务来实现。

在这里，我们可以使用shared_preferences来保存最后一次显示的名言，以便下一次启动时获取同一条名言。

使用共享偏好存储

首先，在pubspec.yaml中添加shared_preferences依赖：

yamlCopy Code
dependencies:
  shared_preferences: ^2.0.15

然后，修改QuoteService类，使用SharedPreferences存储并获取名言数据：

dartCopy Code
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class QuoteService {
  final String apiUrl = 'https://api.quotable.io/random';

  Future<Map<String, String>> fetchQuote() async {
    try {
      final prefs = await SharedPreferences.getInstance();
      final lastQuote = prefs.getString('last_quote');
      
      if (lastQuote != null) {
        final data = json.decode(lastQuote);
        return {
          'content': data['content'],
          'author': data['author'],
        };
      }

      final response = await http.get(Uri.parse(apiUrl));
      
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        await prefs.setString('last_quote', response.body);
        return {
          'content': data['content'],
          'author': data['author'],
        };
      } else {
        throw Exception('Failed to load quote');
      }
    } catch (e) {
      throw Exception('Failed to load quote: $e');
    }
  }
}

这样，每次获取新的名言后，应用会将其保存到本地存储（SharedPreferences）中，下一次启动时会从本地获取最近的名言。

提高用户体验

除了展示每日名言外，你还可以考虑增加以下功能来提高应用的用户体验：

每天定时推送名言：利用Flutter的定时任务功能，设定每天的某个时间自动获取名言并推送到用户。
支持多语言：通过API获取不同语言的名言，根据用户的语言偏好自动切换。
名言收藏功能：让用户能够收藏自己喜欢的名言，并在应用中查看。

总结

通过本项目，你掌握了如何在Flutter中进行网络请求，如何处理JSON数据，如何展示网络请求的结果。在实际开发中，网络请求是常见且非常重要的功能，了解和掌握网络请求的相关知识是每个Flutter开发者必须具备的技能。

在这个项目中，我们通过构建一个简单的每日名言应用，展示了如何获取和展示来自网络的数据。在后续的学习中，你可以扩展这个项目，加入更多功能，进一步提升自己的开发能力。

希望通过这个教程，你能对Flutter网络请求有更深入的理解，能够在自己的Flutter项目中运用自如。