Flutter状态管理插件stately_riverpod的使用

在Flutter开发中，状态管理是一个非常重要的部分。stately_riverpod 是一个基于 Stately 的状态管理插件，它可以帮助开发者创建声明式且可预测的状态机，并与流行的其他状态管理工具（如 Riverpod）无缝集成。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 stately_riverpod 依赖：

dependencies:
  stately_riverpod: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 创建状态机

接下来，我们创建一个简单的计数器状态机。首先定义事件类型和状态类型。

// 定义事件类型
class CounterEvent {
  const CounterEvent(this.value);

  final int value;
}

// 定义状态机类
class CounterValueNotifier extends StatelyChangeNotifier<CounterEvent, int> {
  CounterValueNotifier(super.state);

  // 定义状态图
  [@override](/user/override)
  StatelyGraph<CounterEvent, int> get graph => StatelyGraph<CounterEvent, int>(
        graph: {
          // 初始状态为0
          0: {
            CounterEvent: transition((event, state) => state + event.value),
          },
        },
      );
}

3. 集成到 Riverpod

接下来，我们将状态机集成到 Riverpod 中。首先，创建一个 Provider 来管理状态机实例。

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stately_riverpod/stately_riverpod.dart';

// 创建一个 Provider 来管理 CounterValueNotifier
final counterProvider = StatelyProvider(
  (ref) => CounterValueNotifier(0), // 初始化状态为0
);

4. 使用状态机

现在，我们可以使用 Riverpod 的 ConsumerWidget 来监听状态变化并更新 UI。

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

class Home extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    // 获取状态机实例
    final counter = ref.watch(counterProvider);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 显示当前状态
        Text(
          counter.state.toString(),
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        SizedBox(height: 20),
        // 增加计数的按钮
        ElevatedButton(
          onPressed: () {
            // 触发增加事件
            counter.add(CounterEvent(1));
          },
          child: Text('Increase'),
        ),
        SizedBox(height: 10),
        // 减少计数的按钮
        ElevatedButton(
          onPressed: () {
            // 触发减少事件
            counter.add(CounterEvent(-1));
          },
          child: Text('Decrease'),
        ),
      ],
    );
  }
}

5. 运行应用

运行应用后，你应该会看到一个简单的计数器界面，点击按钮可以增加或减少计数值。

示例代码完整版

以下是完整的示例代码：

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

// 定义事件类型
class CounterEvent {
  const CounterEvent(this.value);

  final int value;
}

// 定义状态机类
class CounterValueNotifier extends StatelyChangeNotifier<CounterEvent, int> {
  CounterValueNotifier(super.state);

  // 定义状态图
  [@override](/user/override)
  StatelyGraph<CounterEvent, int> get graph => StatelyGraph<CounterEvent, int>(
        graph: {
          // 初始状态为0
          0: {
            CounterEvent: transition((event, state) => state + event.value),
          },
        },
      );
}

// 创建一个 Provider 来管理 CounterValueNotifier
final counterProvider = StatelyProvider(
  (ref) => CounterValueNotifier(0), // 初始化状态为0
);

class Home extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    // 获取状态机实例
    final counter = ref.watch(counterProvider);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 显示当前状态
        Text(
          counter.state.toString(),
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        SizedBox(height: 20),
        // 增加计数的按钮
        ElevatedButton(
          onPressed: () {
            // 触发增加事件
            counter.add(CounterEvent(1));
          },
          child: Text('Increase'),
        ),
        SizedBox(height: 10),
        // 减少计数的按钮
        ElevatedButton(
          onPressed: () {
            // 触发减少事件
            counter.add(CounterEvent(-1));
          },
          child: Text('Decrease'),
        ),
      ],
    );
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}