wrap_riverpod 是一个基于 Riverpod 的状态管理插件，它提供了一种更简洁、更灵活的方式来管理 Flutter 应用中的状态。Riverpod 是 Provider 的改进版本，提供了更好的类型安全性和更灵活的依赖注入机制。

安装 wrap_riverpod

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

dependencies:
  flutter:
    sdk: flutter
  wrap_riverpod: ^1.0.0

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

基本用法

1. 创建 Provider

Riverpod 使用 Provider 来管理状态。你可以创建一个 Provider 来提供某个状态或服务。

import 'package:wrap_riverpod/wrap_riverpod.dart';

final counterProvider = StateProvider<int>((ref) => 0);

2. 在 Widget 中使用 Provider

你可以使用 ConsumerWidget 或 Consumer 来访问 Provider 中的状态。

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

class CounterApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final counter = watch(counterProvider).state;
              return Text('Count: $counter');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read(counterProvider).state++;
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

3. 使用 ProviderScope 包裹应用

为了让 Riverpod 正常工作，你需要在应用的根节点使用 ProviderScope 包裹。

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

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

高级用法

1. 使用 StateNotifierProvider

StateNotifierProvider 用于管理更复杂的状态逻辑。你可以创建一个 StateNotifier 类来封装状态和业务逻辑。

import 'package:wrap_riverpod/wrap_riverpod.dart';

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

  void increment() => state++;
}

final counterNotifierProvider = StateNotifierProvider<CounterNotifier>((ref) => CounterNotifier());

然后在 Widget 中使用：

class CounterApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final counter = watch(counterNotifierProvider).state;
              return Text('Count: $counter');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read(counterNotifierProvider.notifier).increment();
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

2. 使用 FutureProvider 和 StreamProvider

FutureProvider 和 StreamProvider 用于处理异步数据。

final futureProvider = FutureProvider<String>((ref) async {
  await Future.delayed(Duration(seconds: 2));
  return 'Hello, Future!';
});

final streamProvider = StreamProvider<int>((ref) {
  return Stream.periodic(Duration(seconds: 1), (i) => i);
});

在 Widget 中使用：

class AsyncDataApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Async Data App')),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final future = watch(futureProvider);
              final stream = watch(streamProvider);

              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  future.when(
                    data: (data) => Text('Future: $data'),
                    loading: () => CircularProgressIndicator(),
                    error: (error, stack) => Text('Error: $error'),
                  ),
                  stream.when(
                    data: (data) => Text('Stream: $data'),
                    loading: () => CircularProgressIndicator(),
                    error: (error, stack) => Text('Error: $error'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}