Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果
目录
[Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果](#Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果)
[二、简单介绍 futtertoast](#二、简单介绍 futtertoast)
[三、安装 fluttertoast](#三、安装 fluttertoast)
一、简单介绍
Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。
二、简单介绍 futtertoast
网址：fluttertoast | Flutter package
fluttertoast 是一个用于在 Flutter 应用程序中显示 Toast 消息的插件。它允许开发者以一种简单、高效的方式向用户显示短暂的通知或提示消息。
三、安装 fluttertoast
1、直接运行命令
使用 Flutter：flutter pub add fluttertoast
2、或者在 pubspec.yaml 添加
Dart
dependencies:
fluttertoast: ^8.2.12
四、简单案例实现
1、这里使用 Android Studio 进行创建 Flutter 项目
2、创建一个 application 的 Flutter 项目
3、工程创建后如下
4、添加脚本，实现 ToastUtils 的 Toast 功能封装
5、在 main 中 测试封装ToastUtils 的 Toast 功能
6、连接设备，运行项目，简单效果如下
五、关键脚本
1、fluttertoast_plugin.dart
Dart
import 'package:flutter/material.dart'; // 导入 Flutter 的 Material 组件库
import 'package:fluttertoast/fluttertoast.dart'; // 导入 fluttertoast 插件
/// Toast 工具类，封装了常用的 Toast 显示功能
class ToastUtils {
/// 显示普通 Toast 消息
/// [msg]：要显示的消息内容
static void showToast(String msg) {
// 调用 Fluttertoast 的 showToast 方法显示 Toast
Fluttertoast.showToast(
// msg：Toast 显示的消息内容
msg: msg,
// toastLength：Toast 显示的时长，Toast.LENGTH_SHORT 表示短时间显示
toastLength: Toast.LENGTH_SHORT,
// gravity：Toast 显示的位置，ToastGravity.BOTTOM 表示在屏幕底部显示
gravity: ToastGravity.BOTTOM,
// timeInSecForIosWeb：在 iOS 和 Web 平台上 Toast 显示的时间（秒）
timeInSecForIosWeb: 1,
// backgroundColor：Toast 的背景颜色，这里设置为半透明黑色
backgroundColor: Colors.black54,
// textColor：Toast 文本的颜色，这里设置为白色
textColor: Colors.white,
// fontSize：Toast 文本的字体大小，这里设置为 16.0
fontSize: 16.0,
);
}
/// 显示自定义样式 Toast 消息
/// [msg]：要显示的消息内容
static void showCustomToast(String msg) {
// 调用 Fluttertoast 的 showToast 方法显示 Toast
Fluttertoast.showToast(
// msg：Toast 显示的消息内容
msg: msg,
// toastLength：Toast 显示的时长，Toast.LENGTH_LONG 表示长时间显示
toastLength: Toast.LENGTH_LONG,
// gravity：Toast 显示的位置，ToastGravity.CENTER 表示在屏幕中央显示
gravity: ToastGravity.CENTER,
// timeInSecForIosWeb：在 iOS 和 Web 平台上 Toast 显示的时间（秒）
timeInSecForIosWeb: 2,
// backgroundColor：Toast 的背景颜色，这里设置为蓝色
backgroundColor: Colors.blue,
// textColor：Toast 文本的颜色，这里设置为白色
textColor: Colors.white,
// fontSize：Toast 文本的字体大小，这里设置为 18.0
fontSize: 18.0,
);
}
/// 显示错误 Toast 消息
/// [msg]：要显示的消息内容
static void showErrorToast(String msg) {
// 调用 Fluttertoast 的 showToast 方法显示 Toast
Fluttertoast.showToast(
// msg：Toast 显示的消息内容
msg: msg,
// toastLength：Toast 显示的时长，Toast.LENGTH_SHORT 表示短时间显示
toastLength: Toast.LENGTH_SHORT,
// gravity：Toast 显示的位置，ToastGravity.BOTTOM 表示在屏幕底部显示
gravity: ToastGravity.BOTTOM,
// timeInSecForIosWeb：在 iOS 和 Web 平台上 Toast 显示的时间（秒）
timeInSecForIosWeb: 1,
// backgroundColor：Toast 的背景颜色，这里设置为红色
backgroundColor: Colors.red,
// textColor：Toast 文本的颜色，这里设置为白色
textColor: Colors.white,
// fontSize：Toast 文本的字体大小，这里设置为 16.0
fontSize: 16.0,
);
}
/// 取消所有正在显示的 Toast 消息
static void cancelToast() {
// 调用 Fluttertoast 的 cancel 方法取消所有正在显示的 Toast
Fluttertoast.cancel();
}
}代码说明
import语句：
package:flutter/material.dart：导入 Flutter 的 Material 组件库，提供基本的 UI 组件。
package:fluttertoast/fluttertoast.dart：导入fluttertoast插件，用于显示 Toast 消息。
ToastUtils类：
- 这是一个工具类，封装了常用的 Toast 显示功能，所有方法都是静态方法，可以直接通过类名调用。
showToast方法：
显示一个普通 Toast 消息，参数
msg是要显示的消息内容。使用
Fluttertoast.showToast方法显示 Toast，设置了显示时长、位置、背景颜色、文本颜色和字体大小等参数。
showCustomToast方法：
显示一个自定义样式的 Toast 消息，参数
msg是要显示的消息内容。与
showToast类似，但设置了不同的显示时长、位置和背景颜色。
showErrorToast方法：
显示一个错误 Toast 消息，参数
msg是要显示的消息内容。设置了红色背景，表示错误信息。
cancelToast方法：
- 取消所有正在显示的 Toast 消息，调用
Fluttertoast.cancel()方法实现。
2、main.dart
Dart
import 'package:flutter/material.dart'; // 导入 Flutter 的 Material 组件库
// 导入自定义的 Toast 工具类
import 'package:test_toast/toast/fluttertoast_plugin.dart';
void main() => runApp(MyApp());
// 主应用程序类
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 返回一个 MaterialApp，它是 Flutter 应用的基础组件
return MaterialApp(
title: 'Flutter Toast Demo', // 应用的标题
home: Scaffold( // 应用的主页面，Scaffold 是常用的页面布局组件
appBar: AppBar( // 应用的导航栏
title: Text('Flutter Toast Demo'), // 导航栏的标题
),
body: Center( // 页面的主体内容，居中显示
child: Column( // 使用 Column 垂直布局子组件
mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
children: [ // 子组件列表
// 第一个按钮：显示普通 Toast
ElevatedButton(
onPressed: () => ToastUtils.showToast("普通 Toast"), // 按钮点击事件
child: Text("显示普通 Toast"), // 按钮上的文字
),
SizedBox(height: 20), // 间隔组件，垂直间隔 20 像素
// 第二个按钮：显示自定义样式 Toast
ElevatedButton(
onPressed: () => ToastUtils.showCustomToast("自定义样式 Toast"), // 按钮点击事件
child: Text("显示自定义样式 Toast"), // 按钮上的文字
),
SizedBox(height: 20), // 间隔组件，垂直间隔 20 像素
// 第三个按钮：显示错误 Toast
ElevatedButton(
onPressed: () => ToastUtils.showErrorToast("错误信息"), // 按钮点击事件
child: Text("显示错误 Toast"), // 按钮上的文字
),
SizedBox(height: 20), // 间隔组件，垂直间隔 20 像素
// 第四个按钮：取消所有 Toast
ElevatedButton(
onPressed: () => ToastUtils.cancelToast(), // 按钮点击事件
child: Text("取消所有 Toast"), // 按钮上的文字
),
],
),
),
),
);
}
}代码说明
import语句：
package:flutter/material.dart：导入 Flutter 的 Material 组件库，提供基本的 UI 组件。
package:test_toast/toast/fluttertoast_plugin.dart：导入自定义的 Toast 工具类，包含了显示 Toast 的方法。
main函数：
- 应用的入口点，调用
runApp方法启动应用，并传入MyApp作为根组件。
MyApp类：
这是一个无状态的
StatelessWidget，定义了应用的根组件。
build方法返回了一个MaterialApp，它是 Flutter 应用的基础组件。
MaterialApp：
它是 Flutter 应用的入口点，提供了路由和主题等功能。
title属性设置了应用的标题。
Scaffold：
它是一个页面布局组件，提供了标准的材料设计布局结构。
appBar属性定义了页面的导航栏。
body属性定义了页面的主体内容。
Center和Column：
Center用于将子组件居中显示。
Column是一个垂直布局组件，用于垂直排列子组件。
mainAxisAlignment属性设置了子组件在垂直方向上的对齐方式。
ElevatedButton：
它是一个带有阴影的按钮组件。
onPressed属性定义了按钮的点击事件。
child属性定义了按钮上的文字。
SizedBox：
它是一个占位组件，用于设置高度或宽度。
在这里用于设置垂直间隔。