Riverpod - flutter 状态管理的应用

前言

Riverpod 是 Flutter 下知名度较高的状态管理依赖，同样出自 Provider 的开发者 rrousselGit 之手。

其实仔细去看 Riverpod 似乎只是 Provider 的拼写打乱了顺序，其提供了更简洁的API 设计，实现了依赖注入。

如果去看过 rrousselGit 的主页，你可以发现，他也是著名的 Flutter_hooks 的作者，RiverPod 也理所当然的拥有 hook 相关的血统 > HookConsumerWidget, 我们可以在享受 hooks 的同时，直接使用Widget.ref(provider).watch 来监听变更并自动刷新页面。

为什么 Flutter 需要状态管理

Flutter 作为优秀的跨端框架，其使用的声明式UI有诸多优势，但嵌套的组件给数据传递带来了极大的挑战。

如果将数据在 组件类的构造函数中携带，并在数层中进行传递，随着代码量的提升，将会极大的增加代码的复杂和易理解程度。

因此状态管理组件出现了，其提供了一个清晰的模型来管理数据流，确保数据在正确的时机以正确的方式流动。这有助于避免数据不一致和难以追踪的 bug。通过集中的状态管理，我们可以更加容易的理解和增删需要传递的数据。

举个例子

我们可以使用最常见的 Flutter demo 来看, 在初始化完成项目之后，我们便可以看到这个例子

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

因为 需要渲染的页面和按钮在 同一个组件 MyHomePage 下 因此我们可以很简单的在按钮点击的同时 setState 来使Flutter 感知数据的变化 并重新渲染页面。

组件分离

但是 多数情况下, 我们需要渲染的页面，和改变数据的按钮 并不在一个组件中，例如，如果我们将这个按钮单独封装在一个类中。这种情况下，我们应该如何在点击按钮的时候增加数据呢？

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${_counter._count}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: const Button(),
    );
  }
}

class Button extends StatelessWidget {
  const Button({super.key});

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: _counter.increment,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}

使用 ChangeNotify

ChangeNotify 是 Flutter 下用于监听数据变更的组件，在这个场景下，我们可以使用其监听 counter 的变化, 并重新渲染页面

class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}

Counter _counter = Counter();
......
  
class _MyHomePageState extends State<MyHomePage> {

  @override
  void dispose() {
    _counter.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    _counter.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${_counter._count}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: const Button(),
    );
  }
}
......

使用 RiverPod

再简单场景下，ChangeNotify 和 ValueNotify 已经能够胜任, 但对于复杂场景，还是有一定的局限性。

先添加如下依赖 (这里使用 Flutter_hooks 举例)

dependencies:
  flutter_hooks: ^0.20.5
  hooks_riverpod: ^2.5.1
  riverpod_annotation: ^2.3.5

dev_dependencies:
  build_runner: ^2.4.11
  riverpod_generator: ^2.4.0

别忘记在最外围增加一个 ProvideScope

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

接着新增一个 counter_provider.dart 文件

import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'counter_provider.g.dart';

@Riverpod(keepAlive: true)
class Counter extends _$Counter {
  @override
  int build() => 0;
  void increment() {
    state++;
  }
}

运行 代码生成

$ dart run build_runner build

他将会生成一个 counter_provider.g.dart 文件

// 接着我们可以使用 `ref.watch` 来监听数据的变化
ref.watch(counterProvider);
// 使用 ref.read().increment() 增加1
ref.read(counterProvider.notifier).increment;

完整的例子:

import 'package:daka/counter_provider.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
               ref.watch(counterProvider).toString(),
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: const Button(),
    );
  }
}

class Button extends HookConsumerWidget {
  const Button({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final counter = ref.read(counterProvider.notifier);

    return FloatingActionButton(
      onPressed: counter.increment,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}