编写了一个辅助Flutter弹出Toast的Package

2,859 阅读1分钟

前言

在日常 APP 开发过程中,经常会使用到 Toast 来弹出应用内的小通知来告知用户一些小情况。但 Flutter 中并没有带有类似 Toast 这样的工具类,翻了 StackOverflow 都是建议使用 SnackBar 来弹出提示。例如:

  Scaffold.of(context).showSnackBar(SnackBar(content: Text('message')));

个人不太满意这样的实现方式。在巧合之下,我发现了 Overlay 这个类,于是诞生了借用 Overlay 来实现 toast 的想法。

项目的地址在 github.com/boyan01/ove…

预览

先放两张效果图来展示最终效果

notification toast
notification
toast

怎么使用

使用的方式很简单,引入包后简单调用即可。

//弹出toast
toast(context, '消息');

//弹出notification
showSimpleNotification(context, Text('消息'));

实现过程

整体实现的核心逻辑在 showOverlay(BuildContext, builder, ...)中:

NotificationEntry showOverlay(
    BuildContext context, AnimatedOverlayWidgetBuilder builder,
    {bool autoDismiss = true, Curve curve}) {
  assert(autoDismiss != null);

  GlobalKey<AnimatedOverlayState> key = GlobalKey();

  //步骤1 创建OverlayEntry
  final entry = OverlayEntry(builder: (context) {
    return AnimatedOverlay(
      key: key,
      builder: builder,
      curve: curve,
    );
  });

  NotificationEntry notification = NotificationEntry(entry, key);

  //步骤2 将OverlayEntry添加到Overlay中
  Overlay.of(context).insert(entry);

  if (autoDismiss) {
    Future.delayed(kNotificationDuration + kNotificationSlideDuration)
        .whenComplete(() {
      //ensure entry has been inserted into screen
      WidgetsBinding.instance
          .scheduleFrameCallback((_) => notification.dismiss());
    });
  }
  return notification;
}

主要分为这么几个部分:

  1. 创建OverlayEntry。为了方便实现动画效果,我抽出了一个单独的 widget —— AnimatedOverlay
  2. OverlayEntry 添加到 Overlay 中。
  3. 如果 autoDismiss 设置为 true 的话,就在一段事件之后(kNotificationDuration + kNotificationSlideDuration),将 OverlayEntryOverlay 中移除。

弊端

使用 Overlay 来实现 Toast 效果很简便,但是有一个弊端:无法在后台弹出

最后

如果大家有什么想法或者建议的话,可以直接在 Github 中提 issues 或者 PR,这样可以让库的可用性更高一些,谢谢大家。