【FlutterUtilCode】Flutter工具篇之ToastUtils

前言

FlutterUtilCode 是一个 Flutter 工具类集合插件，封装了常用的工具类和函数，方便开发者调用。

本篇是 Flutter工具篇之ToastUtils，系列文章内容主要介绍插件中工具类的功能、用法和代码实现等，感兴趣的同学可以持续关注。

FlutterUtilCode 系列（一）—— Flutter工具篇之LogUtils、SharedPerfsUtils

FlutterUtilCode 系列（二）—— Flutter工具篇之ToastUtils

FlutterUtilCode 系列（三）—— Flutter工具篇之UuidUtils

吐司工具类-ToastUtils

作为移动开发，对于 App 使用 吐司(Toast) 弹出提示想必不会陌生，那么在 Flutter 中，如何使用 Toast 功能呢？~答案是 fluttertoast

fluttertoast 是 Pub 上一个非常热门的 Toast 插件，支持 Android、iOS 和 Web。其中 Android 和 iOS 调用的系统原生 Api，而 Web 则是使用的 Toastify-JS 库。

WX20230604-134351@2x.png

毫无疑问，我们的 ToastUtils 工具类也是基于 fluttertoast 来实现的。

首先我们定义了 Toast 的背景颜色、文字颜色和字体大小，在 init() 方法中进行初始化，若不初始化则调用默认颜色和字体大小。代码如下：

  /// 背景色
  static Color toastBgColor = const Color(0x80000000);

  /// Text颜色
  static Color toastTextColor = Colors.white;

  /// 字体大小
  static double toastFontSize = 16.0;

  /// 初始化 Toast
  /// [bgColor] 背景色
  /// [textColor] Text颜色
  /// [fontSize] 字体大小
  static void init({Color? bgColor, Color? textColor, double? fontSize}) {
    toastBgColor = bgColor ?? toastBgColor;
    toastTextColor = textColor ?? toastTextColor;
    toastFontSize = fontSize ?? toastFontSize;
  }

基于 fluttertoast 插件的特点，我们封装了如下 3个 Api 调用。

 /// 显示中间的Toast
  /// [msg] 显示的内容
  static void showCenter(String msg) {
    Fluttertoast.showToast(
      msg: msg,
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      backgroundColor: toastBgColor,
      textColor: toastTextColor,
      fontSize: 16.0,
    );
  }

  /// 显示底部的Toast
  /// [msg] 显示的内容
  static void show(String msg) {
    Fluttertoast.showToast(
      msg: msg,
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      backgroundColor: toastBgColor,
      textColor: toastTextColor,
      fontSize: 16.0,
    );
  }

  /// 显示的Toast
  /// [msg] 显示的内容
  /// [toast] 显示的时间
  /// [gravity] 显示的位置
  /// [bgColor] 背景色
  /// [textColor] Text颜色
  /// [fontSize] 字体大小
  static void showToast(
    String msg, {
    FToast toast = FToast.lengthShort,
    FToastGravity gravity = FToastGravity.bottom,
    Color? bgColor,
    Color? textColor,
    double? fontSize,
  }) {
    Fluttertoast.showToast(
      msg: msg,
      toastLength: _getToastLength(toast),
      gravity: _getToastGravity(gravity),
      backgroundColor: bgColor ?? toastBgColor,
      textColor: textColor ?? toastTextColor,
      fontSize: fontSize ?? toastFontSize,
    );
  }

基于原生 Toast 的特点，默认调用 show() 在 App 底部显示 Toast 的内容。也支持 showCenter() 在 App 的中间显示 Toast 内容。对于其他自定义的需求，可以调用 showToast() 方法，支持 FToast显示时长、FToastGravity显示位置、bgColor背景色、textColor文字颜色、fontSize文字大小 的自定义。

FToastGravity 是一个枚举类，支持的显示位置如下：

/// Toast显示位置
enum FToastGravity {
  top,
  bottom,
  center,
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
  centerLeft,
  centerRight,
  snackBar,
  none
}

**FToast **也是一个枚举类，支持两种模式：lengthShort 显示时长 1秒钟、lengthLong 显示时长 5秒钟。

/// Toast显示时间
/// 两种模式：[lengthShort] 显示时长 1秒钟、[lengthLong] 显示时长 5秒钟
/// Only for Android Platform
enum FToast {
  /// Show Short toast for 1 sec
  lengthShort,

  /// Show Long toast for 5 sec
  lengthLong
}

看到这里，大家可能比较好奇：明明 fluttertoast 已经定义了相关枚举类，为什么在这里还要多此一举呢？—— 这里主要是从隔离的角度来考虑，如果我们定义了相关枚举，那么调用者将无需和 fluttertoast 打交道。一旦未来我们替换了该插件，对调用者来说将是无破坏性的。

使用案例：

// 显示Toast
ToastUtils.show('这是一条测试Toast');
// 显示中间Toast
ToastUtils.showCenter('这是一条测试Toast');
// 显示自定义Toast
ToastUtils.showToast(
      '这是一条测试Toast',
      gravity: FToastGravity.snackBar,
      toast: FToast.lengthLong,
      bgColor: Colors.red,
      textColor: Colors.white,
      fontSize: 20,
    );

结语

好了，今天的工具类整理文章就到这里，目前插件已发布到 Pub 中，欢迎大家体验。

如果觉得这篇文章对你有所帮助的话，不要忘记一键三连哦，大家的点赞是我更新的动力🥰。

Pub: flutter_util_code

项目源码：FlutterUtilCode

使用案例：Example