↓ 跳过正文
彩票号码助手
  1. 文章/

Flutter Riverpod 使用指南

·2 分钟·
Riverpod Flutter
目录

Riverpod 是 Flutter 中一个强大的状态管理库，它是 Provider 的改进版，解决了 Provider 的一些限制。以下是 Riverpod 的基本使用方法：

1. 安装依赖
#

首先在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_riverpod: ^2.0.0

然后运行 flutter pub get

2. 基本使用
#

创建 Provider
# 

// 创建一个简单的计数器 provider
final counterProvider = StateProvider<int>((ref) => 0);

在 Widget 中使用
# 

import 'package:flutter_riverpod/flutter_riverpod.dart';

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    
    return Scaffold(
      body: Center(
        child: Text('Count: $counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}

3. Provider 类型
#

Riverpod 提供了多种类型的 Provider：

StateProvider
#

用于简单的状态管理：

final themeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.light);

StateNotifierProvider
#

用于更复杂的状态管理：

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  
  void increment() => state++;
  void decrement() => state--;
}

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

FutureProvider
#

用于异步操作：

final userDataProvider = FutureProvider<User>((ref) async {
  return fetchUserData();
});

StreamProvider
#

用于流数据：

final chatMessagesProvider = StreamProvider<List<Message>>((ref) {
  return chatRoom.messages;
});

4. 高级用法
#

Provider 依赖
# 

final configProvider = Provider<Config>((ref) => Config());

final apiClientProvider = Provider<ApiClient>((ref) {
  final config = ref.watch(configProvider);
  return ApiClient(config);
});

监听 Provider 变化
# 

ref.listen<int>(counterProvider, (previous, count) {
  if (count >= 10) {
    showDialog(context: context, ...);
  }
});

组合 Provider
# 

final userPreferencesProvider = Provider<UserPreferences>((ref) {
  final theme = ref.watch(themeProvider);
  final locale = ref.watch(localeProvider);
  return UserPreferences(theme, locale);
});

5. 最佳实践
#

  1. 将 Provider 定义在单独的文件中（如 providers.dart）
  2. 对于复杂逻辑，使用 StateNotifierProvider 而不是 StateProvider
  3. 使用 ConsumerWidget 或 Consumer 来最小化重建范围
  4. 考虑使用 autoDispose 修饰符来避免内存泄漏：
final tempProvider = StateProvider.autoDispose<int>((ref) => 0);

6. 示例：完整应用
# 

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

// 定义 Provider
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  
  void increment() => state++;
  void decrement() => state--;
}

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

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

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    final counterNotifier = ref.read(counterProvider.notifier);
    
    return Scaffold(
      appBar: AppBar(title: Text('Riverpod Example')),
      body: Center(
        child: Text('Count: $count', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: counterNotifier.increment,
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: counterNotifier.decrement,
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

Riverpod 提供了更灵活、更强大的状态管理解决方案，适合各种规模的 Flutter 应用。