Flutter依赖注入与状态管理插件riverpod_builder的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter依赖注入与状态管理插件riverpod_builder的使用

目的

这个包是为了方便使用一些设计模式的Riverpod包。我创建这个包是为了让使用Riverpod的Provider像ListView和PageView一样在Flutter标准库中实现。我们相信有Flutter开发经验的人可以轻松地处理它。

视图构建器 (builder)

@override
Widget build(BuildContext context) {
  // 包装这个构建器
  return RiverpodBuilder(
    // 设置要使用的Provider
    provider: firstViewModelProvider,
    builder: (context, ref, vm, state, reader) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('First View'),
          automaticallyImplyLeading: false,
        ),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("${vm.count}"),
              const SizedBox(height: 20),
              ElevatedButton(
                child: const Text("Add Count"),
                onPressed: () {
                  reader.addCount();
                },
              )
            ],
          ),
        ),
      );
    },
  );
}

参数

名称 意义
provider Riverpod Provider
builder 使用方式类似于ListView或PageView

builder 属性

名称 意义
context 构建上下文
ref 表示WidgetRef
vm (通知者) ref.watch(provider.notifier)
state ref.watch(provider)
reader ref.read(provider.notifier)

日志

日志图片

视图模型

class FirstViewModel extends BaseViewModel<FirstViewState> {
  @override
  get instanse => const FirstViewState();

  int get count => state.count;

  // 监听其他Provider
  SecondViewModel get secondVM =>
      widgetRef.read(secondViewModelProvider.notifier);

  @override
  void onInit() async {
    // 异步处理也是可能的
    await Future.delayed(const Duration(seconds: 1));
    super.onInit();
  }

  void addCount() {
    state = state.copyWith(count: state.count + 1);
  }

  void showNextView() {
    // 有BuildContext
    // 不需要传递任何参数
    Navigator.of(context).pushNamed("second_view");
  }
}

属性

名称 意义
context 构建上下文
ref 表示ProviderRef
widgetRef 表示WidgetRef
state 这个状态

方法

名称 意义
onInit 当此类初始化时调用(异步处理也是可能的)
onDispose 当此关闭时调用
refreshProvider 使用invalidate(refresh)刷新其他Provider

预览

支持的Providers类型的状态

注意:这个包需要Riverpod 2或更高版本。

对应关系

构建器 Provider类型 基础VM
RiverpodBuilder NotifierProvider BaseViewModel
KeepRiverpodBuilder AutoDisposeNotifierProvider KeepBaseViewModel

目前我们提供了两种类型的构建器。我们计划在未来增加支持的Provider类型,并适应钩子。

补充信息

我们知道很多人在这种情况下使用stateNotifierProvider。 然而,由于Riverpod开发者推荐使用NotifierProvider,我们决定率先响应。

扩展包

扩展这个包非常简单。 例如:如果您想定义在所有VM中都想要使用的通用方法…

在这种情况下,在定义其他Provider之后,为InnerViewModel创建一个扩展类。

import 'package:fluttertoast/fluttertoast.dart';

extension InnerViewModelEXT on InnerViewModel {

  // OverlayLoadingView.provider = 管理加载的provider

  bool get isLoading => providerRef.read(OverlayLoadingView.provider);

  // 显示加载
  void showLoading() {
    providerRef.read(OverlayLoadingView.provider.notifier).show();
  }

  // 隐藏加载
  void hideLoading() {
    providerRef.read(OverlayLoadingView.provider.notifier).hide();
  }

  void showAlert(String message) {
    // 警告方法
  }

  void showToast(String message) {
    // 其他包也可以在这里定义和使用
    Fluttertoast.showToast(
        msg: message, toastLength: Toast.LENGTH_SHORT, timeInSecForIosWeb: 1);
  }
}

更多关于Flutter依赖注入与状态管理插件riverpod_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter依赖注入与状态管理插件riverpod_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,依赖注入和状态管理是两个核心概念,它们对构建可维护和可扩展的应用程序至关重要。riverpod_builder 是一个基于 Riverpod 的依赖注入和状态管理插件,它提供了一些简化的 API 来处理这些需求。下面是一个使用 riverpod_builder 的代码案例,展示了如何进行依赖注入和状态管理。

首先,确保你的 pubspec.yaml 文件中包含了必要的依赖:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^2.0.0  # 请检查最新版本
  flutter_riverpod: ^2.0.0  # 请检查最新版本

然后,运行 flutter pub get 来安装这些依赖。

接下来,让我们编写一些代码来展示如何使用 riverpod_builder。虽然 riverpod_builder 不是一个官方包(注意:在撰写本文时,riverpod_builder 并不是一个广泛认可的包名,这里假设你指的是使用 Riverpod 进行构建的过程),但我们将展示如何使用 Riverpod 来实现依赖注入和状态管理。

创建 Riverpod Provider

首先,我们需要创建一些 Riverpod providers。假设我们有一个简单的计数器应用:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() {
    state++;
  }
}

使用 Riverpod 进行依赖注入和状态管理

接下来,我们在 Flutter 应用中使用这些 providers:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_provider.dart';  // 假设上面的代码保存在这个文件中

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$count',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(counterProvider.notifier).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个例子中,ProviderScope 是 Riverpod 的顶级 widget,它提供了一个环境,让所有的子 widget 可以访问到 providers。ConsumerWidget 是一个方便的基类,它允许你使用 ref.watchref.read 来访问和监听 providers 的状态。

总结

上述代码展示了如何使用 Riverpod 进行依赖注入和状态管理。虽然没有直接使用名为 riverpod_builder 的包(因为它可能不是一个存在的包),但通过使用 Riverpod 本身的 API,我们可以实现类似的功能。Riverpod 提供了一个强大且灵活的方式来管理应用的状态和依赖项,使得构建复杂的 Flutter 应用变得更加容易。

回到顶部