stately_notifier 是一个轻量级的状态管理插件，专为 Flutter 设计。它基于 ValueNotifier 和 ChangeNotifier，提供了更简洁和灵活的状态管理方式。stately_notifier 的核心思想是通过 Notifier 来管理状态，并通过 Provider 或 Consumer 来访问和监听状态的变化。

安装

首先，你需要在 pubspec.yaml 文件中添加 stately_notifier 依赖：

dependencies:
  flutter:
    sdk: flutter
  stately_notifier: ^1.0.0

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

基本用法

1. 创建一个 Notifier

Notifier 是 stately_notifier 的核心类，用于管理状态。你可以通过继承 Notifier 来创建自定义的 Notifier。

import 'package:stately_notifier/stately_notifier.dart';

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

  void increment() {
    state = state + 1;
  }

  void decrement() {
    state = state - 1;
  }
}

在这个例子中，CounterNotifier 管理一个整数状态，并提供了 increment 和 decrement 方法来更新状态。

2. 使用 Provider 提供 Notifier

你可以使用 Provider 来在 widget 树中提供 Notifier 实例。

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

void main() {
  runApp(
    NotifierProvider(
      create: (_) => CounterNotifier(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

在这个例子中，NotifierProvider 提供了一个 CounterNotifier 实例，并将其注入到 widget 树中。

3. 使用 Consumer 监听状态变化

你可以使用 Consumer 来监听 Notifier 的状态变化，并在状态变化时重建 widget。

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Consumer<CounterNotifier, int>(
          builder: (context, notifier, state) {
            return Text('Count: $state');
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => context.read<CounterNotifier>().increment(),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => context.read<CounterNotifier>().decrement(),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

在这个例子中，Consumer 监听 CounterNotifier 的状态变化，并在状态变化时更新 Text widget。context.read<CounterNotifier>() 用于获取 Notifier 实例并调用其方法。

高级用法

1. 使用 Selector 选择性重建

Selector 允许你选择性地监听 Notifier 的某些部分，从而避免不必要的重建。

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Selector<CounterNotifier, int, String>(
          selector: (notifier) => notifier.state.toString(),
          builder: (context, state) {
            return Text('Count: $state');
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => context.read<CounterNotifier>().increment(),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => context.read<CounterNotifier>().decrement(),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

在这个例子中，Selector 只监听 CounterNotifier 的 state 的字符串表示，并在其变化时重建 Text widget。

2. 使用 NotifierProvider 的 value 参数

你可以使用 NotifierProvider 的 value 参数来直接提供一个 Notifier 实例，而不是通过 create 回调。

void main() {
  final counterNotifier = CounterNotifier();

  runApp(
    NotifierProvider.value(
      value: counterNotifier,
      child: MyApp(),
    ),
  );
}