flutter%20%E4%BD%BF%E7%94%A8%20fluttertoast%20%E7%9A%84%20toast%20%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%20Toast%20%E6%95%88%E6%9E%9C" name="Flutter%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%20%E4%B9%8B%20flutter%20%E4%BD%BF%E7%94%A8%20fluttertoast%20%E7%9A%84%20toast%20%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%20Toast%20%E6%95%88%E6%9E%9C" style="background-color:transparent">Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果
目录
flutter%20%E4%BD%BF%E7%94%A8%20fluttertoast%20%E7%9A%84%20toast%20%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%20Toast%20%E6%95%88%E6%9E%9C-toc" name="tableOfContents" style="margin-left:0px">Flutter 学习之旅 之 flutter 使用 fluttertoast 的 toast 实现简单的 Toast 效果
一、简单介绍
二、简单介绍 futtertoast
flutter-toc" name="tableOfContents" style="margin-left:40px">三、安装 fluttertoast
四、简单案例实现
五、关键脚本
一、简单介绍
Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。
二、简单介绍 futtertoast
网址：fluttertoast | Flutter package
fluttertoast 是一个用于在 Flutter 应用程序中显示 Toast 消息的插件。它允许开发者以一种简单、高效的方式向用户显示短暂的通知或提示消息。
flutter" name="%E4%B8%89%E3%80%81%E5%AE%89%E8%A3%85%20webview_flutter" style="background-color:transparent">三、安装 fluttertoast
1、直接运行命令
使用 Flutter：flutter pub add fluttertoast
2、或者在 pubspec.yaml 添加
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
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 方法显示 ToastFluttertoast.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.0fontSize: 16.0,);}/// 显示自定义样式 Toast 消息/// [msg]：要显示的消息内容static void showCustomToast(String msg) {// 调用 Fluttertoast 的 showToast 方法显示 ToastFluttertoast.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.0fontSize: 18.0,);}/// 显示错误 Toast 消息/// [msg]：要显示的消息内容static void showErrorToast(String msg) {// 调用 Fluttertoast 的 showToast 方法显示 ToastFluttertoast.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.0fontSize: 16.0,);}/// 取消所有正在显示的 Toast 消息static void cancelToast() {// 调用 Fluttertoast 的 cancel 方法取消所有正在显示的 ToastFluttertoast.cancel();}
}代码说明
2、main.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 {@overrideWidget 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: [ // 子组件列表// 第一个按钮：显示普通 ToastElevatedButton(onPressed: () => ToastUtils.showToast("普通 Toast"), // 按钮点击事件child: Text("显示普通 Toast"), // 按钮上的文字),SizedBox(height: 20), // 间隔组件，垂直间隔 20 像素// 第二个按钮：显示自定义样式 ToastElevatedButton(onPressed: () => ToastUtils.showCustomToast("自定义样式 Toast"), // 按钮点击事件child: Text("显示自定义样式 Toast"), // 按钮上的文字),SizedBox(height: 20), // 间隔组件，垂直间隔 20 像素// 第三个按钮：显示错误 ToastElevatedButton(onPressed: () => ToastUtils.showErrorToast("错误信息"), // 按钮点击事件child: Text("显示错误 Toast"), // 按钮上的文字),SizedBox(height: 20), // 间隔组件，垂直间隔 20 像素// 第四个按钮：取消所有 ToastElevatedButton(onPressed: () => ToastUtils.cancelToast(), // 按钮点击事件child: Text("取消所有 Toast"), // 按钮上的文字),],),),),);}
}代码说明
import语句：
main函数：
应用的入口点，调用
runApp方法启动应用，并传入MyApp作为根组件。
MyApp类：
这是一个无状态的
StatelessWidget，定义了应用的根组件。
build方法返回了一个MaterialApp，它是 Flutter 应用的基础组件。
MaterialApp：
它是 Flutter 应用的入口点，提供了路由和主题等功能。
title属性设置了应用的标题。
Scaffold：
它是一个页面布局组件，提供了标准的材料设计布局结构。
appBar属性定义了页面的导航栏。
body属性定义了页面的主体内容。
Center和Column：
Center用于将子组件居中显示。
Column是一个垂直布局组件，用于垂直排列子组件。
mainAxisAlignment属性设置了子组件在垂直方向上的对齐方式。
ElevatedButton：
它是一个带有阴影的按钮组件。
onPressed属性定义了按钮的点击事件。
child属性定义了按钮上的文字。
SizedBox：
它是一个占位组件，用于设置高度或宽度。
在这里用于设置垂直间隔。
