Flutter Toast 通知

2025年3月17日 | 阅读 3 分钟

Flutter Toast 也被称为 Toast Notification 消息。它是一个非常小的消息,主要在设备屏幕的底部弹出。 它将在开发人员提供的时间结束后自行消失。 开发人员主要使用 toast 通知来显示用户执行的操作的反馈。

显示 toast 通知消息是 android 应用程序中的一个基本功能。 我们可以使用简单的代码行来实现它。 在本节中,我们将学习如何在 android 和 iOS 中通过在 Flutter 中实现它来显示 toast 消息。 要实现 toast 通知,我们需要在 Flutter 中导入 fluttertoast 库。

在 Flutter 中显示 toast 通知需要以下步骤

  • 创建 Flutter 项目
  • 在项目中添加 Flutter Toast 依赖项
  • 在库中导入 fluttertoast dart 包
  • 实现用于在 Flutter 中显示 toast 消息的代码

Flutter 为用户提供了几个用于显示 toast 消息的属性,如下所示

属性描述
msg字符串(必需)
toastlengthToast.LENGTH_SHORT 或 Toast.LENGTH_LONG
gravityToastGravity.TOP 或 ToastGravity.CENTER 或 ToastGravity.BOTTOM
timeInSecForIos它仅用于 Ios(1 秒或更长)
backgroundColor它指定背景颜色。
textColor它指定文本颜色。
fontSize它指定通知消息的字体大小。

FlutterToast.cancel(): 当您想取消所有向用户显示消息的请求时,使用此函数。

让我们看看如何通过以下步骤在 Flutter 应用程序中显示 toast 通知

步骤 1: 在 IDE 中创建一个 Flutter 项目。 在这里,我将使用 Android Studio。

步骤 2:Android Studio 中打开项目,并导航到 lib 文件夹。 在此文件夹中,打开 pubspec.yaml 文件。 在这里,我们需要在依赖项部分添加 flutter toast 库,然后单击 get package 链接以将库导入您的 main.dart 文件中。

pubspec.yaml

它确保在添加依赖项时,您从 fluttertoast 依赖项的左侧 留出两个空格。 fluttertoast 依赖项提供了以简单方式显示 toast 通知的功能。 也可以非常轻松地自定义 toast 弹出的外观。

步骤 3: 打开 main.dart 文件,并在 widget 中创建 toast 通知,如下面的代码所示。

让我们看看上述步骤的完整代码。 打开 main.dart 文件并替换以下代码。 此代码包含一个按钮,当我们按下此按钮时,它将通过调用 FlutterToast.showToast 来显示 toast 消息。

输出

现在,在 Android Studio 中运行该应用程序。 它将显示以下屏幕。

Flutter Toast Notification

当我们单击 “click to show” 按钮时,我们可以在屏幕底部看到 toast 消息。 见下图

Flutter Toast Notification
下一个主题Flutter 复选框