返回

Flutter的静默之声：Overlay创生Toast之全局幽灵

前端

在Android王国里，Toast以其简洁的静态调用、跨越界面的全局显示，成为了提示组件的掌上明珠，它优雅地穿梭在应用程序的舞台上，丝毫不影响任何界面布局。然而，当我们跨入Flutter大观园时，却发现这里没有为Toast预留一席之地，似乎它被遗忘在了Android的记忆里。

但Flutter开发者何等多才多艺，哪里容得下如此空白？于是，他们构思了一个巧妙的方案——Overlay与Toast的激情碰撞。Overlay作为Flutter舞台上的一块画布，可以覆盖在界面布局的任何位置，而Toast作为灵动的提示组件，可以自由地在这块画布上起舞。两者携手共创，便谱写出一曲Flutter独有的Toast奏鸣曲。

这种基于Overlay的Toast拥有以下诸多优势：

  • 无拘无束的静态调用：你可以随心所欲地从应用程序的任何角落召唤Toast，就像它一直在等待你的指令，随时准备登台献艺。
  • 无缝融合的全局显示：Toast如同一个幽灵，穿梭于界面布局之间，而不会扰乱任何既定秩序，轻盈的提示效果让你倍感惬意。
  • 精妙绝伦的精准定位：你可以随心所欲地指定Toast的位置，是居中而立，还是偏居一隅，全凭你的心意，Toast定会忠实执行你的指令。

下面，让我们一起踏上Flutter与Toast联袂演绎的代码之旅，亲手创建属于你的Overlay Toast：

import 'package:flutter/material.dart';

class OverlayToast {
  static OverlayEntry? _overlayEntry; // OverlayEntry对象，用于在Overlay中显示Toast

  // 显示Toast
  static void show(BuildContext context, String message, {Color? backgroundColor, Color? textColor}) {
    _overlayEntry = OverlayEntry(
      builder: (context) {
        return Material(
          color: Colors.transparent,
          child: Center(
            child: Container(
              padding: EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                color: backgroundColor ?? Colors.black.withOpacity(0.8),
                borderRadius: BorderRadius.circular(5.0),
              ),
              child: Text(
                message,
                style: TextStyle(
                  color: textColor ?? Colors.white,
                  fontSize: 16.0,
                ),
              ),
            ),
          ),
        );
      },
    );

    // 将OverlayEntry添加到Overlay中
    Overlay.of(context)?.insert(_overlayEntry!);
  }

  // 隐藏Toast
  static void dismiss() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }
}

为了让代码更加可读、便于理解，我们将代码分为了多个方法：

  • show：显示Toast的方法。它接受三个参数：context、message和一个可选的backgroundColor，用于设置Toast的背景色和文本颜色。
  • dismiss：隐藏Toast的方法。它会将OverlayEntry从Overlay中移除，从而达到隐藏Toast的效果。

你只需将上面这段代码复制到你的Flutter项目中，然后就可以随心所欲地创建和使用Toast了：

OverlayToast.show(context, 'Hello, world!');

只需一行代码，你就可以让Toast在你的应用程序中翩翩起舞，是不是非常简单呢？

Flutter的Overlay与Toast的结合，为开发