Flutter状态管理插件riverpod_hook_extensions的使用

Flutter状态管理插件riverpod_hook_extensions的使用

Riverpod Hooks ValueNotifier Extensions

Flutter Riverpod, Hooks和ValueNotifier缺失的扩展。

特性

• ✅ ValueNotifier 扩展
• ✅ StateNotifier 扩展
• ✅ FutureProvider 扩展
• ✅ useGlobalKey 扩展

开始使用

为了使用此包，你需要在pubspec.yaml文件中添加riverpod_hook_extensions作为依赖项。

dependencies:
  riverpod_hook_extensions: <latest_version>

然后，在终端中运行以下命令来添加依赖：

flutter pub add riverpod_hook_extensions

最后，运行flutter pub get以获取包。

文档

更多详细信息，请参阅文档。

贡献

欢迎贡献！如果你发现任何问题或有建议，请创建一个新的问题或提交一个拉取请求。

许可证

该项目受MIT许可证保护。

完整示例Demo

接下来，我们将展示如何使用riverpod_hook_extensions进行状态管理。我们将创建一个简单的应用，该应用使用ValueNotifier来管理状态，并通过hooks来监听状态变化。

示例代码

首先，确保你已经在pubspec.yaml文件中添加了riverpod_hook_extensions依赖。

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0
  hooks_riverpod: ^1.0.0
  riverpod_hook_extensions: ^1.0.0

然后，运行flutter pub get以获取依赖项。

主要代码

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_hook_extensions/riverpod_hook_extensions.dart';

// 定义一个ValueNotifier
final counterProvider = ValueNotifierProvider((ref) => ValueNotifier(0));

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Hook Extensions Demo')),
        body: CounterPage(),
      ),
    );
  }
}

class CounterPage extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // 使用useValueListenable监听counterProvider的变化
    final count = useValueListenable(watch(counterProvider)).value;

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('You have pushed the button this many times:'),
          Text('$count', style: Theme.of(context).textTheme.headline4),
          ElevatedButton(
            onPressed: () {
              // 更新ValueNotifier的值
              context.read(counterProvider).value++;
            },
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

代码解释

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:hooks_riverpod/hooks_riverpod.dart';
   import 'package:riverpod_hook_extensions/riverpod_hook_extensions.dart';
   

2. 定义一个ValueNotifierProvider：

   final counterProvider = ValueNotifierProvider((ref) => ValueNotifier(0));
   

3. 主应用入口：

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

4. 定义MyApp：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Riverpod Hook Extensions Demo')),
           body: CounterPage(),
         ),
       );
     }
   }
   

5. 定义CounterPage：

   class CounterPage extends HookConsumerWidget {
     @override
     Widget build(BuildContext context, ScopedReader watch) {
       // 使用useValueListenable监听counterProvider的变化
       final count = useValueListenable(watch(counterProvider)).value;
   
       return Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Text('You have pushed the button this many times:'),
             Text('$count', style: Theme.of(context).textTheme.headline4),
             ElevatedButton(
               onPressed: () {
                 // 更新ValueNotifier的值
                 context.read(counterProvider).value++;
               },
               child: Text('Increment'),
             ),
           ],
         ),
       );
     }
   }