Flutter消息管理插件riverpod_messages的使用

Flutter消息管理插件riverpod_messages的使用

Riverpod Messages Listener

Riverpod Messages Listener 是一个为使用 Riverpod 构建的应用程序提供消息通知监听的包。它适用于显示错误或信息消息给用户，这些消息可能来自 StateNotifiers 或 ChangeNotifiers。

谁是这个包的目标用户？

这个包对于处理应用程序中的错误和信息消息非常有用。 它可以帮助我们管理所有可能在 StateNotifiers 或 ChangeNotifiers 中抛出的异常，例如内部错误或 API 调用时发生的错误。

如何使用

这个包提供了一个名为 MessageListener 的的 widget，该 widget 需要一个 provider 作为参数，可以是 StateNotifierProvider 或 ChangeNotifierProvider。当错误发生或信息消息生成时，MessageListener 会自动监听 notifier 并知道何时向用户显示消息。

UI

这个包提供了两个实现 MessageListener widget 的的版本：

• MessageSnackbarListener：使用 Snackbar 显示消息
• MessageOverlayListener：使用 Overlay API 显示消息

当然，你可以根据需要自定义其他方式来显示消息！只需将 MessageListener 包裹并自定义 showError 和 showInfo 方法即可！

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
        child: MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          snackBarTheme:
              const SnackBarThemeData(behavior: SnackBarBehavior.floating)),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    ));
  }
}

class MyHomePage extends ConsumerStatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends ConsumerState<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Riverpod Messages example'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                child: const Text('State notifier with Snackbar'),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const StateNotifierSnackbarPage()));
                }),
            ElevatedButton(
                child: const Text('State notifier with Overlay'),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const StateNotifierOverlayPage()));
                }),
            ElevatedButton(
                child: const Text('Change notifier with Snackbar'),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) =>
                          const ChangeNotifierSnackbarPage()));
                }),
            ElevatedButton(
                child: const Text('Change notifier with Overlay'),
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const ChangeNotifierOverlayPage()));
                })
          ],
        ),
      ),
    );
  }
}

示例项目下载与运行

你可以在 GitHub 上下载示例项目并运行：

1. 下载项目：

   git clone https://github.com/ftognetto/riverpod_messages.git
   cd riverpod_messages/example
   

2. 运行示例项目：

   flutter run