Flutter中 Provider 的基础用法超详细讲解(一)

目录

前言

一、什么是 Provider

二、引入 Provider 库

三、Provider 的基本结构

四、Provider的基础用法

1.ChangeNotifierProvider

1.ChangeNotifierProvider是什么

2.使用场景

3.示例代码

1.创建模型类

2.在入口处提供模型

3.在页面中使用模型

4.注意事项

2.FutureProvider

1.什么是FutureProvider

2.示例用法

1.创建异步函数

2.使用FutureProvider提供异步结果

3.注意事项

---

前言

        在 Flutter 的状态管理方案中，Provider 是一个非常常用且推荐的库。它轻量、功能强大、集成简洁，是 Google 官方推荐的状态管理工具之一。本文将通过一个完整示例，带你一步步掌握 Provider 的基础用法。

一、什么是 Provider

        简单来说，Provider 是基于 InheritedWidget 封装的一套状态管理工具。它的核心目标是 “提供数据并让子组件监听这些数据的变化”。

        相比直接使用 setState() 来更新页面，Provider 提供了更清晰、模块化的管理方式。

二、引入 Provider 库

        在 pubspec.yaml 中添加依赖：

dependencies:flutter:sdk: fluttercupertino_icons: ^1.0.8provider: ^6.1.5

安装依赖：

flutter pub get

三、Provider 的基本结构

        我们先看一张概念图：

MaterialApp└── ChangeNotifierProvider（提供模型）└── Consumer 或 context.watch<T>()（监听数据）

        你可以把 ChangeNotifierProvider 理解为数据的“提供者”，而 Consumer 是数据的“消费者”。

四、Provider的基础用法

1.ChangeNotifierProvider

1.ChangeNotifierProvider是什么

        ChangeNotifierProvider 是 provider 包中的一个类，它结合了 ChangeNotifier 和 InheritedWidget 的能力，用于构建响应式的 UI。

        它的作用是监听一个ChangeNotifier对象，并在数据变更时自动更新界面。

        常用于ViewModel（或State）的管理。

2.使用场景

        当你有一个对象内部状态需要变化，并且你希望在状态变化时通知 UI 更新，那么你就可以使用 ChangeNotifierProvider。

3.示例代码

        我们以下面的UI效果为例，看一下ChangeNotifierProvider的用法。

       在下面的demo中，我们点击按钮之后，会随机生成一个城市的名称，并且在UI上显示出来。

• 

        图1.ChangeNotifierProvider用法

1.创建模型类