Flutter扩展功能插件riverpod_community_extensions的使用

Flutter扩展功能插件riverpod_community_extensions的使用

Riverpod Community Extensions 是一组对 Riverpod 中 ref 类型的有用扩展。这些扩展使得与提供商（providers）交互更加灵活和强大，并可以轻松地添加一些常见的功能，例如自动刷新。

特性 🚀

该包为 ref 类型添加了以下方法：

• cacheFor 在 AutoDisposeRef 上 - 防止提供商在指定时间内被释放。
• cacheDataFor 在 AutoDisposeFutureProviderRef 上 - 保留未来提供商的数据指定时间。
• debounce 在 AutoDisposeFutureProviderRef 上 - 等待指定时间后调用提供商的计算，并取消之前的调用。
• autoRefresh 在 AutoDisposeRef 上 - 按指定间隔刷新值。适用于需要定期更新提供商值的场景。
• refreshWhenReturningToForeground 在 AutoDisposeRef 上 - 当应用程序返回到前台时刷新提供商的值，确保数据始终是最新的。
• refreshWhenNetworkAvailable 在 AutoDisposeFutureProviderRef 上 - 当网络可用时自动刷新具有错误状态的提供商。使用 connectivity_plus 包。

安装 💻

要开始使用 Riverpod Community Extensions，必须在您的机器上安装 Dart SDK。

通过 dart pub add 安装：

dart pub add riverpod_community_extensions

使用 🎨

只需导入包并使用提供的扩展方法即可。

示例代码（无代码生成）

import 'package:riverpod_community_extensions/riverpod_community_extensions.dart';
import 'package:riverpod/riverpod.dart';

final dataProvider = FutureProvider.autoDispose((ref) async {
  ref.cacheDataFor(const Duration(minutes: 5));
  return fetchData();
});

示例代码（有代码生成）

import 'package:riverpod_community_extensions/riverpod_community_extensions.dart';
import 'package:riverpod/riverpod.dart';

part 'data_provider.g.dart';

[@riverpod](/user/riverpod)
Future<int> data(DataRef ref) async {
  ref.cacheDataFor(const Duration(minutes: 5));
  return fetchData();
}

示例代码

以下是完整的示例代码，展示了如何使用 cacheDataFor 扩展方法。

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

part 'main.g.dart';

[@riverpod](/user/riverpod)
Future<int> cacheDataFor(CacheDataForRef ref) async {
  ref.cacheDataFor(const Duration(seconds: 4));
  await Future.delayed(const Duration(seconds: 3));

  return 42;
}

void main() {
  runApp(
    const ProviderScope(
      child: MaterialApp(
        home: HomeScreen(),
      ),
    ),
  );
}

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({
    super.key,
  });

  [@override](/user/override)
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _HomeScreenState();
  }
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // ignore: avoid-ref-read-inside-build , this is a demonstration for a side effect
    var data = ref.read(cacheDataForProvider.future);

    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Gets mock data. After 3 seconds, it returns 42, '
                'and then cache the result for 4 seconds.',
              ),
              const Divider(indent: 20, endIndent: 20),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ElevatedButton(
                    child: const Text(
                      'get data once again',
                    ),
                    onPressed: () {
                      setState(() {
                        data = ref.read(cacheDataForProvider.future);
                      });
                    },
                  ),
                  const SizedBox(width: 10),
                  Padding(
                    padding: const EdgeInsets.all(8),
                    child: FutureBuilder(
                      future: data,
                      builder: (context, snapshot) {
                        if (snapshot.connectionState == ConnectionState.done) {
                          final snapshotData = snapshot.data;
                          if (snapshotData == null) {
                            return const Text('no data');
                          }

                          return Text('data: $snapshotData');
                        }

                        return const CircularProgressIndicator();
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}