背景

背景:我的项目中的 Toast 始终试用的是这个包 another_flushbar ,其 Likes 数量还挺多的,然而应用过程中遇到了一些问题,因为这个 Toast 的实现是利用相似 PageRouteBuilder 这样新关上一个路由页面的模式,然而页面中有些组件例如 showDialog、shouBottomSheet 也是应用这种形式,这样就产生了一个问题就是当 Toast 和 dialog 一起应用时当 Toast 呈现 同时和 Dialog 隐没时,路由就会产生抵触,就比拟麻烦。

解决方案:google 了一下发现实现 Toast 更好的办法是应用 Overlay

来自 chatgpt 的答复

在 Flutter 中,Overlay 是一个用于在应用程序中创立和治理覆盖层的组件。它容许你在应用程序的界面上增加或移除覆盖物,并管制它们的显示和地位。
Overlay 组件实质上是一个 Stack,它容许你在一个层次结构中搁置多个覆盖物,并依据须要调整它们的程序和地位。每个覆盖物都由 OverlayEntry 来示意,它定义了要在 Overlay 中显示的具体内容。
应用 OverlayOverlayEntry,你能够在应用程序的任何中央创立自定义的覆盖物,并将它们搁置在其余组件之上。这对于创立弹出窗口、浮动按钮、告诉栏等交互性或悬浮性的界面元素十分有用。
要在应用程序中应用 Overlay,你能够应用 Overlay.of(context) 办法获取以后上下文中的 Overlay。而后,你能够应用 insert 办法将 OverlayEntry 增加到 Overlay 中,并应用 remove 办法将其从 Overlay 中移除。

flutter_easyloading

在 pub 中找了一下,发现了一个 flutter_easyloading 库,Likes 数量很高,同时反对 loading 和 toast,底层也是应用了 Overlay 实现,但在把它引入我的项目中发现了一些问题:

  1. 因为这个库是全局单例,尽管它提供了 loading,toast ,但它的一些自定义配置只能针对一个实例也就说无奈对 loading 和 toast 别离配置色彩什么的 https://github.com/nslogx/flutter_easyloading/issues/188 ,而且该我的项目未解决的 issue 数量特地多不晓得是不是开发者曾经放弃了
  2. 我发现特地多的 flutter 第三方库,都是会给一些配置选项让开发者自定义款式,但这些配置往往很难满足使用者的需要,其实像 loading 和 toast 这种,第三方库只需提供外围动画,真正要展示的内容让使用者本人传进去就好了,这样的话也就不须要那么多的配置参数了,使用者也能实现本人的需要(flutter 官网的 widget 也是提供了很多配置参数,调试起来很吃力,再次吐槽一下为什么不能只把外围逻辑实现,具体展示交由用户传进去的 widget 来管制)

本人利用 Overlay 实现 Toast 、Loading

演示成果:

具体代码思路:

  • 在 MaterialApp 设置 Overlay 容器

    runApp(GetMaterialApp(  ...  builder: (context, child) => Scaffold(    // 将整个根页面都放进 overlay 外面,其余的像 toast 等组件后续会动静的插入这个 Overlay 的 Stack 外面    body: Overlay(      initialEntries: [OverlayEntry(builder: (context) => child)],    )  ),);
  • 以 Toast 为例:

    class Toast {// toast 展示工夫static int duration = 2500;// overlay entrystatic OverlayEntry? _overlayEntry;// overlay 存在工夫计时器static Timer? _timer;// 对外裸露 success 和 error 办法static void success(String? message) {  _show('success', message ?? '', context: Get.context!);}static void error(String? message) {  _show('error', message ?? '', context: Get.context!);}// toast 外围逻辑static void _show(  String type,  String message, {  required BuildContext context,}) {  // 每次调用前先把上次的销毁,避免频繁调用  _timer?.cancel();  _overlayEntry?.remove();  // 创立 overlay entry  _overlayEntry = OverlayEntry(    // toast 须要展示的内容,具体动画实现见文末    // CustomerToastBody 就是 toast 具体要展示的款式,齐全交给使用者本人定义    builder: (ctx) => CutomerAnimateWidget(child: CustomerToastBody()),  );  // 将该自定义的 overlay entry 插入到顶层 overlayentry stack 中  Overlay.of(context).insert(_overlayEntry!);  // 肯定工夫后主动敞开 overlay entry  _timer = Timer(Duration(milliseconds: duration), () {    _overlayEntry?.remove();    _overlayEntry = null;  });}}
  • 抛开动画不谈下面的代码就残缺的实现了一个 2.5s 主动隐没的 Toast
  • 含动画的残缺实现见下方链接
  • Toast https://gist.github.com/hugeorange/adb11487d8803cbd6aa3338cc399204c
  • Loading https://gist.github.com/hugeorange/828f54e13e5c954d83a6ac51730e3e53