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.创建模型类