每天一个Flutter开发小项目 (9) : Flutter状态管理进阶 - Provider构建你的简易购物车应用

---

引言

欢迎再次回到 每天一个Flutter开发小项目 系列博客！ 在前八篇博客中，我们已经系统学习了 Flutter UI 构建、用户交互、路由导航、数据持久化，以及网络请求等一系列关键技能。 您已经具备了构建功能较为全面的 Flutter 应用的能力。

随着应用功能的日益复杂，页面和组件之间的数据共享和状态同步变得越来越重要。 如果应用状态管理不当，代码将变得难以维护、难以扩展，甚至容易出现各种难以调试的 Bug。 因此，状态管理 (State Management) 是构建大型、复杂 Flutter 应用的核心技术之一。 今天，我们将聚焦 Flutter 应用的 “大脑” —— 状态管理，并使用 Flutter 社区广泛认可的状态管理方案 Provider，构建一个功能完备的 简易购物车应用，让您掌握 Flutter 应用状态管理的精髓。

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

• Flutter 状态管理的核心概念: 理解状态管理的重要性，掌握 Flutter 中常用的状态管理方案，以及 Provider 的核心优势。
• Provider 状态管理方案的专业应用: 深入学习 Provider 插件，掌握在 Flutter 应用中使用 Provider 进行状态管理的全流程，包括 Provider 的安装、配置、状态Provider 创建、状态消费、状态更新等。
• Provider 核心组件: 熟练掌握 Provider 提供的核心 Widget，例如 Provider, Consumer, Provider.of, ChangeNotifier, ChangeNotifierProvider 等，理解它们的作用和使用场景。
• Provider 状态管理最佳实践: 学习如何使用 Provider 构建清晰、可维护的状态管理架构，包括状态隔离、状态复用、状态更新等最佳实践。
• 简易购物车应用的功能实现: 构建一个功能完善的简易购物车应用，包括商品列表展示、商品加入购物车、购物车商品数量增减、购物车总价计算、购物车页面展示等核心功能。
• Flutter 应用架构设计能力的专业技能: 从状态管理方案选择到应用架构设计，全面提升 Flutter 应用架构设计和状态管理能力。

项目简介： 简易购物车应用

我们的简易购物车应用将围绕以下核心功能展开：

• 商品列表展示: 应用主页以列表形式展示商品信息，包括商品名称、图片、价格等。
• 加入购物车: 在商品列表页，用户可以点击 “加入购物车” 按钮，将商品添加到购物车。
• 购物车数量展示: 在应用顶部 AppBar 或底部导航栏等位置，实时展示购物车中的商品数量。
• 购物车页面: 用户可以点击购物车图标，进入购物车页面，查看购物车中的所有商品，包括商品名称、图片、价格、数量、小计等信息。
• 购物车商品数量增减: 在购物车页面，用户可以增加或减少购物车中商品的数量。
• 购物车总价计算: 在购物车页面，实时计算购物车中所有商品的总价。
• 状态管理: 购物车商品数据、购物车商品数量、购物车总价等状态将使用 Provider 进行集中管理，实现跨组件、跨页面的状态共享和同步。

通过构建简易购物车应用，我们将重点实践：

• Provider 插件集成: 在 Flutter 应用中集成 provider 插件，搭建 Provider 状态管理环境。
• 状态Provider 创建: 创建 ChangeNotifierProvider 或 Provider 来管理应用状态 (例如，购物车数据)。
• 状态消费: 使用 Consumer 或 Provider.of 在 Widget 中消费状态，获取状态数据。
• 状态更新: 在 Widget 中触发状态更新，并通知所有依赖该状态的 Widget 重新构建。
• 购物车应用完整功能实现: 从 UI 界面到状态管理逻辑，完整构建一个实用的简易购物车应用。

Flutter 状态管理核心概念与 Provider 方案解析

在开始构建购物车应用之前，我们先来深入理解 Flutter 状态管理的核心概念，并重点解析 Provider 状态管理方案，为后续的实战打牢理论基础。

• 状态 (State) 的概念: 在 Flutter 应用中，状态 (State) 指的是 Widget 在构建和生命周期中可以变化的数据。 例如，一个计数器应用的计数器值、一个文本输入框的文本内容、一个开关按钮的开关状态，都是状态。 状态是驱动 UI 变化的根本原因，当状态发生改变时，Flutter 会根据新的状态重新构建 UI，从而实现动态的 UI 效果。

• 状态管理 (State Management) 的重要性: 对于简单的 Flutter 应用，可以使用 setState() 方法在 Widget 内部管理状态。 但是，当应用变得复杂，组件之间的状态共享和同步变得频繁时，使用 setState() 方法进行状态管理会变得非常困难，容易导致代码耦合度高、难以维护、状态更新混乱等问题。 状态管理 (State Management) 的目的是为了更好地组织、管理和共享应用状态，使得状态变化可预测、可追踪，代码结构更清晰、更易维护、更易扩展。

• Flutter 中常用的状态管理方案: Flutter 社区提供了多种状态管理方案，各有优缺点，适用于不同的应用场景。 常用的状态管理方案包括：

  • setState() (Widget 内部状态管理): Flutter 内置的状态管理方案，适用于简单的、局部的状态管理。 优点： 简单易用，无需引入第三方插件。 缺点： 不适合管理复杂、全局的状态，状态共享和同步困难。
  • Provider (声明式、响应式状态管理): Flutter 社区广泛认可的状态管理方案，基于 InheritedWidget 和 ChangeNotifier 实现，简单易用，功能强大，性能良好，适用于中小型到大型应用的状态管理。 优点： 简单易用，学习曲线平缓，代码简洁，性能良好，易于测试，社区支持活跃。 缺点： 对于非常大型、状态非常复杂的应用，可能需要结合更复杂的状态管理方案 (例如，Bloc/Cubit, Riverpod, Redux 等)。
  • Bloc/Cubit (业务逻辑组件状态管理): 基于 Bloc (Business Logic Component) 和 Cubit 模式实现的状态管理方案，适用于业务逻辑复杂、状态变化较为复杂的应用。 优点： 结构清晰，状态变化可预测，易于测试，适合大型应用。 缺点： 学习曲线较陡峭，代码相对较为冗余。
  • Riverpod (类型安全、依赖注入式状态管理): Provider 的作者 Remi Rousselet 开发的新一代状态管理方案，解决了 Provider 的一些痛点，并引入了类型安全和依赖注入。 优点： 类型安全，编译时检查错误，依赖注入，解耦组件和状态，更灵活，性能更好。 缺点： 学习曲线相对 Provider 稍陡峭，社区生态不如 Provider 完善。
  • Redux (单向数据流状态管理): 基于 Redux 架构的状态管理方案，适用于状态变化复杂、需要状态回溯和时间旅行的应用。 优点： 状态变化可预测，易于调试和测试，适合大型、状态复杂的应用。 缺点： 学习曲线较陡峭，代码较为冗余，配置较为繁琐。

• Provider 状态管理方案的核心优势: Provider 凭借其 简单易用、功能强大、性能良好、社区活跃 等优势，成为 Flutter 社区最受欢迎的状态管理方案之一。 Provider 的核心优势包括：

  • 简单易用: API 设计简洁明了，学习曲线平缓，易于上手，即使是初学者也能快速掌握。
  • 声明式、响应式: 基于 Flutter 的 Widget 树结构，以声明式的方式管理状态，当状态发生变化时，Provider 会自动通知所有依赖该状态的 Widget 重新构建，实现响应式 UI 更新。
  • 代码简洁: 使用 Provider 可以显著减少状态管理相关的样板代码，使代码更简洁、更易读、更易维护。
  • 性能良好: 基于 InheritedWidget 和 ChangeNotifier 实现，性能良好，能够满足绝大多数 Flutter 应用的性能需求。
  • 易于测试: Provider 的状态和逻辑可以方便地进行单元测试和集成测试。
  • 社区活跃: Flutter 社区对 Provider 的支持非常活跃，拥有大量的文档、示例和教程，遇到问题容易找到解决方案。

Provider 核心组件详解

Provider 提供了多个核心 Widget 和类，用于实现状态管理，我们来重点了解以下几个核心组件：

• Provider: 最基础的 Provider 组件，用于提供任意类型的值 (T) 给其子树。 Provider 本身并不具备状态管理能力，只是简单的值传递。 通常与其他 Provider 组件 (例如，ChangeNotifierProvider) 结合使用。 Provider 可以用于提供各种类型的值，例如，常量、变量、对象、函数等。

• ChangeNotifier: 一个 Flutter SDK 提供的类，用于封装可变状态，并提供状态变更通知机制。 任何继承自 ChangeNotifier 的类，都可以作为 Provider 的状态Provider。 ChangeNotifier 提供了 notifyListeners() 方法，用于通知所有监听器 (Consumer) 状态已发生改变，需要重新构建 UI。

• ChangeNotifierProvider: 一个 Provider 组件，用于创建并提供 ChangeNotifier 类型的状态Provider 给其子树。 ChangeNotifierProvider 负责创建 ChangeNotifier 对象，并在 Widget 树中提供该对象。 ChangeNotifierProvider 通常用于管理可变状态，例如，应用数据、UI 状态等。

• Consumer: 一个 Provider 组件，用于在其子树中消费由 Provider 或 ChangeNotifierProvider 提供的状态。 Consumer 会在其 builder 函数中接收状态值 (T)，并在状态值发生变化时，自动重新构建其 builder 函数返回的 Widget。 Consumer 是 最常用的状态消费方式，可以精确地控制 Widget 的重新构建范围，提高性能。

• Provider.of(BuildContext context): 一个静态方法，用于在 Widget 树中向上查找最近的 Provider 或 ChangeNotifierProvider 提供的状态。 Provider.of(context) 会返回状态值 (T)，但不会监听状态变化，状态变化时不会自动重新构建 Widget。 Provider.of(context) 通常用于在 Widget 的 build 函数之外 (例如，在事件处理函数中) 获取状态值。 如果需要在 Widget 的 build 函数中获取状态值并监听状态变化，应该使用 Consumer。

实战步骤： 构建简易购物车应用

接下来，我们将一步步使用 Provider 构建我们的简易购物车应用。

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

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

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

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

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

步骤 2： 定义商品数据模型 (Product)

我们需要定义一个 Product 类来表示商品数据，包含商品ID、名称、图片、价格等信息。

创建 lib/models/product.dart 文件，定义 Product 类：

class Product {
   
  final int id; //  商品 ID
  final String name; //  商品名称
  final double price; //  商品价格
  final String imageUrl; //  商品图片 URL

  const Product({
    //  使用 const 构造函数
    required this.id,
    required this.name,
    required this.price,
    required this.imageUrl,
  });
}

步骤 3： 定义购物车状态Provider (CartProvider)

我们需要创建一个 CartProvider 类，继承自 ChangeNotifier，用于管理购物车状态，包括购物车商品列表、购物车商品数量、购物车总价等状态，并提供状态更新和通知机制。

创建 lib/providers/cart_provider.dart 文件，定义 CartProvider 类：

import 'package:flutter/material.dart';

import '../models/product.dart'; //  导入 Product 类

class CartProvider extends ChangeNotifier {
   
  final List<Product> _products = []; //  购物车商品列表 (私有)

  List<Product> get products => _products; //  购物车商品列表 Getter (只读)

  double get totalPrice => _products.fold(0, (sum, product) => sum + product.price); //  购物车总价 Getter (只读)

  int get itemCount => _products.length; //  购物车商品数量 Getter (只读)

  void addProduct(Product product) {
    //  添加商品到购物车
    _products.add(product); //  将商品添加到购物车商品列表
    notifyListeners(); //  通知所有监听器 (Consumer) 状态已发生改变，需要重新构建 UI
  }

  void removeProduct(Product product) {
    //  从购物车移除商品
    _products.remove(product); //  从购物车商品列表移除商品
    notifyListeners(); //  通知所有监听器 (Consumer) 状态已发生改变，需要重新构建 UI
  }

  void clearCart() {
    //  清空购物车
    _products.clear(); //  清空购物车商品列表
    notifyListeners(); //  通知所有监听器 (Consumer) 状态已发生改变，需要重新构建 UI
  }
}

代码解释:

• CartProvider 类: 继承自 ChangeNotifier，作为购物车状态Provider。
• _products: List 类型，私有变量，用于存储购物车商品列表。 使用 _ 开头的变量名表示私有变量，只能在当前类内部访问。