Flutter消息提示插件toaster_next的使用

Toaster Next

这是一个用于显示消息提示（Toast）的包。相比于其他类似的包，它具有以下优点：

• 更可定制化：可以使用默认的消息提示样式，也可以自定义消息提示。
• 更灵活：消息提示样式足够通用，可以适用于所有场景；错误、警告、成功等信息，或者自定义类型。
• 易于测试：Toaster 使用了一个简单的 API，便于在测试中进行模拟。
• 简单易用：将 Toaster 小部件添加到小部件树中，然后开始添加消息提示。简单且方便。

快速上手

参考示例代码来了解如何使用。

快速设置步骤如下：

1. 在你的小部件树中使用 Toaster.mount 添加 Toaster 小部件：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toaster Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Toaster.mount(child: const Scaffold(body: AddToasts())),
    );
  }
}

1. 然后，使用 Toaster 添加消息提示：

toaster.of(context).add(Toast(
    message: 'Im a message',
    type: warningToast
))

这样就完成了基本的配置！

不同的消息提示类型

默认情况下，提供了警告（warningToast）、成功（successToast）和错误（errorToast）三种类型。如果你想为其他用途创建新的消息提示类型，例如信息提示（infoToast）或通知提示（notificationToast），你可以创建一个 ToastType 的实例，如下所示：

final infoToast = ToastType(
  actionColor: Colors.red.blue900,
  iconBgColor: Colors.red.blue50,
  icon: const Icon(
    Icons.info,
    color: Colors.blue,
    size: ToastType.defaultToastIconSize,
  ),
);

这将自定义你在调用 toaster.of(context).add 时传递的提示样式。这样可以将提示的样式与提示本身分离，从而可以在不同的场合下（如错误、成功或警告）重用同一个小部件。

消息提示事件

消息提示有两个事件钩子：onDismiss 和 toastAction。onDismiss 会在消息提示被关闭时触发，包括用户手动关闭、点击操作按钮或超时时。toastAction 会在消息提示的操作按钮被点击时触发，这在确认某些操作时非常有用，例如用户执行破坏性操作前的确认。

Button(
  onClick: toaster.of(context).add(Toast(
    type: warningToast,
    message: 'Are you sure you want to do a destructive action?',
    action: ToastAction(
      action: destructiveActionHandler,
      text: 'Yes, I\'m sure'
    )
  ))
)

有关更多详细信息和选项，请参阅文档。

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:toaster_next/toaster.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toaster Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Toaster.mount(child: const Scaffold(body: AddToasts())),
    );
  }
}

class AddToasts extends StatefulWidget {
  const AddToasts({Key? key}) : super(key: key);

  [@override](/user/override)
  State<AddToasts> createState() => _AddToastsState();
}

class _AddToastsState extends State<AddToasts> {
  int counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('Add Toast'),
        onPressed: () {
          setState(() {
            counter++;
          });
          Toaster.of(context).add(Toast(
            action: ToastAction(
              // 忽略：避免打印
              action: () => print('Clicked on action'),
              actionText: 'Click me',
            ),
            duration: null,
            onDismiss: () =>
              // 忽略：避免打印
              print('Ive been dismissed; the action was not performed'),
            message: counter.toString(),
            type: counter % 3 == 0
                ? warningToast
                : counter % 3 == 1
                    ? successToast
                    : errorToast,
          ));
        },
      ),
    );
  }
}