【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

一、前言

在这篇文章中，我将与你分享如何在 Flutter 项目中使用 fluttertoast 包来显示 Toast 消息。

Toast 是一个简短的、非模态的消息提示框，它可以在应用的前端显示，不会打断用户的操作。fluttertoast 是一个非常受欢迎的 Flutter 包，用于在 Flutter 项目中轻松创建 Toast 消息。

本文的重点：

• fluttertoast 包的基础使用方法
• 如何自定义 Toast 的样式和内容
• 在实际业务中如何使用 fluttertoast
• 一个基于 Web 端的完整 Flutter 项目示例

版本信息：

• Flutter 版本：3.10
• Dart 版本：3.0
• fluttertoast 包版本：8.2.2

你是否对成为 Flutter 高手充满渴望，想要掌握更多前沿技巧和最佳实践？现在，你的机会来了！

Flutter 从零到一：基础入门到应用上线全攻略 正在热烈招募参与者！

✅ 这个专栏不仅包括了全面的 Flutter 学习资源，还有实用的代码示例和深入的解析教程。
✅ 专栏内容会持续更新，价格也会随之上涨。现在加入，享受最优惠的价格，抓住属于你的机会！
✅ 想要与其他 Flutter 学习者互动交流吗？点击这里 加入我们的讨论群，一起成长、一起进步。

别再等待，让我们今天就启程，共同开启 Flutter 的精彩学习之旅吧！

二、安装和基础使用

首先，我们需要在项目中添加 fluttertoast 的依赖。打开你的 pubspec.yaml 文件，然后在 dependencies 下添加以下代码：

fluttertoast: ^8.2.2

然后，运行 flutter pub get 命令来安装新的依赖。

接下来，我们可以开始使用 fluttertoast 了。首先，确保你已经导入了这个包：

import 'package:fluttertoast/fluttertoast.dart';

现在，你可以使用以下代码来显示一个基础的 Toast 消息：

Fluttertoast.showToast(
 msg: "这是一个 Toast 消息",
 toastLength: Toast.LENGTH_SHORT,
 gravity: ToastGravity.CENTER,
 timeInSecForIosWeb: 1,
 backgroundColor: Colors.red,
 textColor: Colors.white,
 fontSize: 16.0
);

三、不同平台的支持情况

fluttertoast 支持 Android、iOS 和 Web 三个平台。但是，根据平台的不同，Toast 的显示方式和特性也有所不同。

1. Android 和 iOS：这两个平台上的 Toast 支持不需要 BuildContext 和需要 BuildContext 两种方式。不需要 BuildContext 的方式有限的 UI 控制，而需要 BuildContext 的方式则提供了完全的 UI 控制。
2. Web：Web 平台上的 Toast 使用了 Toastify-JS，因此它的特性和 Android、iOS 上的 Toast 有所不同。例如，Web 上的 Toast 只支持顶部和底部的显示位置。

这是小雨青年于 2023 年发布在 CSDN 的博客，由于目前采集站侵权行为猖獗，如果你不是在 CSDN 看到本文，麻烦你通过 CSDN 联系我，谢谢你的支持。

四、如何自定义 Toast

在 Flutter 中，我们有很多方式可以自定义 Toast 的样式和内容。fluttertoast 包也提供了丰富的参数供我们使用。

1. 自定义文本和背景颜色
   你可以通过 backgroundColor 和 textColor 参数来自定义 Toast 的背景颜色和文本颜色。

Fluttertoast.showToast(
  msg: "自定义背景和文本颜色",
  backgroundColor: Colors.blue,
  textColor: Colors.yellow,
);

2. 自定义显示位置
   通过 gravity 参数，你可以控制 Toast 出现在屏幕的哪个位置。

Fluttertoast.showToast(
  msg: "我在屏幕顶部",
  gravity: ToastGravity.TOP,
);

3. 自定义显示时间
   使用 timeInSecForIosWeb 参数，你可以设置 Toast 在屏幕上停留的时间。

Fluttertoast.showToast(
  msg: "我会停留 3 秒",
  timeInSecForIosWeb: 3,
);

五、在实际业务中的应用

Toast 在实际业务中有很多用途，比如用于显示操作成功或失败的提示、网络请求的状态等。

1. 操作反馈
   当用户完成某个操作（如提交表单、删除条目等）后，你可以使用 Toast 来给出即时的反馈。

Fluttertoast.showToast(
  msg: "删除成功！",
  backgroundColor: Colors.green,
  textColor: Colors.white,
);

2. 网络请求状态
   在进行网络请求时，你可以使用 Toast 来显示请求的状态，如“加载中”、“请求成功”或“请求失败”。

// 请求开始
Fluttertoast.showToast(
  msg: "加载中...",
  backgroundColor: Colors.blue,
);

// 请求成功
Fluttertoast.showToast(
  msg: "请求成功！",
  backgroundColor: Colors.green,
);

// 请求失败
Fluttertoast.showToast(
  msg: "请求失败，请重试！",
  backgroundColor: Colors.red,
);

六、完整的业务代码示例（基于 Web 端）

在这一节中，我将给出一个基于 Web 端的完整 Flutter 项目示例，展示如何在实际业务中使用 fluttertoast。

首先，确保你的 Flutter 项目支持 Web 端。然后，按照第二节的步骤添加 fluttertoast 包的依赖。

接下来，我们创建一个简单的 Web 应用，其中包含一个按钮。点击这个按钮时，会显示一个 Toast 消息。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Toast Web 示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Fluttertoast.showToast(
                msg: "你点击了按钮！",
                toastLength: Toast.LENGTH_SHORT,
                gravity: ToastGravity.CENTER,
                timeInSecForIosWeb: 1,
                backgroundColor: Colors.red,
                textColor: Colors.white,
                fontSize: 16.0,
              );
            },
            child: Text('点击我'),
          ),
        ),
      ),
    );
  }
}

运行这个 Web 应用，点击按钮，你就会看到一个 Toast 消息出现在屏幕中央。

七、总结

经过上面的介绍，我相信你已经对 fluttertoast 包有了深入的了解。Toast 是一个非常实用的 UI 元素，它可以为用户提供及时的反馈，增强应用的交互性。fluttertoast 包为 Flutter 开发者提供了一个简单而强大的工具，使我们能够轻松地在应用中添加 Toast 消息。

回顾一下我们学到的内容：

• 如何在 Flutter 项目中安装和使用 fluttertoast 包。
• 如何自定义 Toast 的样式和内容。
• 在实际业务中如何使用 Toast 提供反馈。
• 一个基于 Web 端的完整 Flutter 项目示例。

对 Flutter 感兴趣，渴望深入探索和学习吗？Flutter 从零到一：基础入门到应用上线全攻略 正是你的完美起点！

在这个专栏中，你将发现丰富的 Flutter 学习资源，从代码示例到深入的技术解读，一应俱全。
️ 想要了解如何用 Flutter 构建出色的应用吗？所有的秘诀和答案都在我们的专栏里等着你！
别再犹豫，专栏内容将不断更新，价格也将逐渐上涨。现在就加入，享受最优惠的价格，开启你的 Flutter 探索之旅！

想了解更多？点击这里查看 Flutter Developer 101：入门小册 & 专栏指引。

还有，别忘了点击这里 加入我们的讨论群，与其他 Flutter 爱好者一起交流和学习，共同成长！