Flutter Riverpod 教程及其使用和优势

对于初学者，让我们从对 Flutter 状态管理的基本概念理解，以及Flutter Riverpod仓库的作用开始。基本上，Flutter 确实会自行处理状态管理，但是，随着应用程序的增长和扩展，您可能需要与多个类共享应用程序状态。

Flutter 提供了许多用于管理应用程序状态的选项。在这里，我们将讨论Riverpod。

什么是 Riverpod Flutter？

Riverpod 是 Flutter/Dart 的响应式缓存框架。它可以自动获取、缓存、组合和重新计算网络请求，同时还为您处理错误。它是 Provider 包的重构；这意味着它减少了依赖性。

然而，在 Riverpod 与 Provider 的战斗中，Riverpod 相对于 Provider 的优势是：

🟠 你不会再得到 'provider not found' 异常
🟠 你可以定义全局提供者
🟠 你可以显着简化“提供者”的组合，而不是繁琐且容易出错的 ProxyProvider。

Riverpod Flutter 的用途：

🟠 在编译时而不是运行时捕获编程错误
🟠 轻松从远程源获取、缓存和更新数据
🟠 执行反应式缓存并轻松更新您的用户界面
🟠 依赖于异步或计算状态
🟠 编写可测试代码并将逻辑保持在小部件树
🟠 使用最少的样板代码创建、使用和组合提供程序
🟠 在不再使用时处理提供程序的状态

您是否希望通过过滤小部件重建或缓存昂贵的状态计算来优化您的 Flutter 应用程序性能？
从我们这里聘请Flutter 开发人员，他们将毫不费力地处理您的应用程序的状态并提高其性能。

Flutter Rivepod 安装

第一步是将最新的“flutter_riverpod”添加到'pubspec.yaml'文件作为依赖项。

依赖项：
  扑：
    SDK: 颤动  
  flutter_riverpod：^2.0.2

提供商范围

安装 Riverpod 后，我们可以用 `ProviderScope` 包装我们的根小部件：

无效主要（）{
  // 使用 ProviderScope 包装整个应用程序，以便小部件
  // 将能够读取提供者
  runApp(ProviderScope(
    孩子：我的应用程序（），
  ));}

`ProviderScope` 是一个小部件，用于存储我们创建的所有提供者的状态

🟠 它们完全取代了单例、服务定位器、依赖注入和 InheritedWidgets 等设计模式。
🟠 它们允许您存储一些状态并在多个位置轻松访问它。
🟠 它们允许您通过过滤小部件重建或缓存昂贵的状态计算来优化性能。
🟠 它们使您的代码更具可测试性，因为每个提供者都可以被覆盖以在测试期间表现不同。

创建和读取提供者

这是一个使用 Provider 创建的简单“Hello World”屏幕。

// 返回字符串值的提供者final helloWorldProvider = 提供者（（参考）{
  返回“你好世界”；});

这由三件事组成：

1. 声明：`final helloWorldProvider` 是我们将用来读取提供者状态的全局变量
2. 提供者：`Provider< String >` 告诉我们正在使用的是哪种提供者（更多信息见下文), 以及它所持有的状态的类型。
3. 创建状态的函数。这为我们提供了一个 ref 参数，我们可以使用它来读取其他提供者、执行一些自定义处理逻辑等等。

要在小部件内使用此提供程序，您将需要一个引用对象。有 3 种方法可以实现：

1. 使用 ConsumerWidget

最简单的方法是使用“ConsumerWidget”：

final helloWorldProvider = 提供者((_) => '你好世界');// 1. 小部件类现在扩展 [ConsumerWidget]类 HelloWorldWidget 扩展 ConsumerWidget {
  @覆盖
  // 2. build 方法有一个额外的 [WidgetRef] 参数
  小部件构建（BuildContext 上下文，WidgetRef ref）{
    // 3. 使用 ref.watch() 获取提供者的值
    final helloWorld = ref.watch(helloWorldProvider);
    返回文本（你好世界）；
  }}

2.使用消费者

作为替代方案，我们可以用 `Consumer` 包装我们的 `Text` 小部件：

final helloWorldProvider = 提供者((_) => '你好世界');类 HelloWorldWidget 扩展 StatelessWidget {
  @覆盖
  小部件构建（BuildContext 上下文）{
    // 1. 添加消费者
    返回消费者（
      // 2. 指定构建器并获取一个WidgetRef
      建造者：（_，WidgetRef ref，__）{
        // 3. 使用 ref.watch() 获取提供者的值
        final helloWorld = ref.watch(helloWorldProvider);
        返回文本（你好世界）；
      },
    );
  }}

3. 使用ConsumerStatefulWidget & ConsumerState

final helloWorldProvider = 提供者((_) => '你好世界');// 1. 扩展 [ConsumerStatefulWidget]类 HelloWorldWidget 扩展 ConsumerStatefulWidget {
  @覆盖
  消费者状态createState() => _HelloWorldWidgetState();}// 2. 扩展 [ConsumerState]类 _HelloWorldWidgetState 扩展了 ConsumerState{
  @覆盖
  无效初始化状态（）{
    super.initState();
    // 3. 如果需要，我们可以在 initState 中读取提供者
    final helloWorld = ref.read(helloWorldProvider);
    打印（你好世界）；// “你好世界”
  }
  @覆盖
  小部件构建（BuildContext 上下文）{
    // 4. 使用 ref.watch() 获取提供者的值
    final helloWorld = ref.watch(helloWorldProvider);
    返回文本（你好世界）；
  }}

结论

（言鼎科技）专做软件开发,微信小程序,网站开发,软件外包,手机APP开发，欢迎资讯！