Flutter 学习之旅 之 flutter 不使用插件，实现简单带加载动画的 LoadingToast 功能
目录
Flutter 学习之旅 之 flutter 不使用插件，实现简单带加载动画的 LoadingToast 功能
一、简单介绍
二、LoadingToast
三、简单案例实现
四、关键代码
一、简单介绍
Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。
二、LoadingToast
LoadingToast 是一种用户界面元素，通常用于移动和桌面应用程序中，以向用户显示一个过程正在进行中，比如数据加载或后台任务处理。在Flutter框架中，LoadingToast可以通过一个浮动的图形用户界面（GUI）元素实现，这个元素通常包含一个旋转的加载图标和/或相应的文字提示，如“正在加载”或“请稍候”。
LoadingToast的设计目的是提高用户体验，通过提供即时的视觉反馈来告知用户应用程序没有冻结或停止响应，而是在后台进行操作。这种提示有助于减少用户的焦虑感，并增强对应用程序的信任感。在Flutter中实现LoadingToast，可以通过Overlay或其他类似的机制来创建一个覆盖在应用主界面上的浮动提示框。
在使用
LoadingToast进行开发时，应注意以下几个关键事项以确保最佳用户体验和代码的健壮性：
全局访问：确保
LoadingToast的显示和隐藏方法可以在应用的任何地方被调用。这通常通过使用GlobalKey和静态方法实现。性能考虑：由于
LoadingToast是一个覆盖在应用主界面上的浮动元素，频繁地显示和隐藏可能会影响应用性能。应优化其显示逻辑，避免不必要的渲染。用户体验：
LoadingToast应仅在必要时显示，以避免干扰用户操作或分散用户注意力。同时，应提供清晰的信息，让用户了解当前正在进行的操作。可访问性：考虑到不同用户的需求，
LoadingToast应包含适当的文本描述，以支持屏幕阅读器等辅助技术。多任务处理：在多任务或长时间运行的操作中，应确保
LoadingToast能够正确地显示和更新，以反映操作的进度或状态。错误处理：在操作失败或出现错误时，应提供一种机制来更新
LoadingToast的内容或隐藏它，并给出相应的错误信息。样式一致性：
LoadingToast的样式应与应用的整体设计和风格保持一致，以提供统一的用户体验。测试：在开发过程中，应充分测试
LoadingToast在不同场景下的行为，包括快速连续触发显示和隐藏的情况。资源管理：确保在
LoadingToast不再需要时正确地移除和清理资源，避免内存泄漏。自定义：根据应用的具体需求，可能需要对
LoadingToast进行自定义，如调整位置、大小、颜色等，以适应不同的用户界面布局。通过注意这些事项，可以确保
LoadingToast不仅能够有效地传达信息，还能增强应用的整体质量和用户满意度。
这个案例的实现过程主要涉及创建一个自定义的加载提示，它可以在Flutter应用中以悬浮窗的形式显示。以下是实现过程的简单介绍：
定义
LoadingToast类：
创建一个名为
LoadingToast的类，用于封装加载提示的显示和隐藏逻辑。使用
OverlayEntry：
在
LoadingToast类中定义一个静态的OverlayEntry?类型的变量_overlayEntry，用于存储创建的悬浮窗实例，以便之后可以移除它。创建
navigatorKey：
定义一个静态的
GlobalKey<NavigatorState>类型的变量navigatorKey，用于访问应用的Navigator，从而获取到Overlay。实现
show方法：
在
LoadingToast类中实现一个静态的show方法，该方法接受一个BuildContext和一个String类型的message作为参数。在
show方法中，首先获取OverlayState，如果为空，则打印错误信息并返回。创建一个新的
OverlayEntry实例，其builder属性返回一个Materialwidget，该widget包含一个透明的背景和一个居中的Centerwidget。
Centerwidget中包含另一个Materialwidget，用于显示加载提示的背景和内容，如加载图标和文本信息。将创建的
OverlayEntry实例插入到Overlay中，以显示加载提示。实现
remove方法：
在
LoadingToast类中实现一个静态的remove方法，用于移除显示的加载提示。如果
_overlayEntry不为空，则调用其remove方法移除悬浮窗，并将其设置为null。在
main函数中使用LoadingToast：
在
main函数中创建并运行MyApp应用。在
MyApp的build方法中，使用MaterialApp并设置navigatorKey。在
Scaffold的body中添加一个ElevatedButton，当按钮被点击时，调用LoadingToast.show方法显示加载提示，并在3秒后调用LoadingToast.remove方法隐藏提示。
通过以上步骤，我们实现了一个可以在Flutter应用中显示和隐藏的自定义加载提示Toast组件。这个组件可以用于在执行长时间操作时向用户显示加载状态，提高用户体验。
三、简单案例实现
1、这里使用 Android Studio 进行创建 Flutter 项目
2、创建一个 application 的 Flutter 项目
3、初次的项目结构如下
4、编写一个 LoadingToast 逻辑，实现 show 调用
5、在 main 中调用Loading 功能
6、连接设备，运行效果如下
四、关键代码
1、LoadingToast
import 'package:flutter/material.dart';class LoadingToast {// 定义一个静态的OverlayEntry?类型的变量，用于存储Toast的OverlayEntry实例，以便后续可以移除它static OverlayEntry? _overlayEntry;// 定义一个静态的GlobalKey，用于访问NavigatorState，进而获取Overlaystatic final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();/// 显示加载提示Toast的静态方法static void show(BuildContext context, String message) {// 获取当前NavigatorState的OverlayStatefinal OverlayState? overlayState = navigatorKey.currentState?.overlay;// 如果overlayState为空，则打印错误信息并返回if (overlayState == null) {print("[LoadingToast] show : OverlayState is null. Make sure to use MaterialApp with navigatorKey.");return;}// 创建一个新的OverlayEntry实例_overlayEntry = OverlayEntry(builder: (context) {// 返回一个Material widget，设置颜色为透明，作为Toast的背景return Material(color: Colors.transparent,// 设置Material的子widget为Center，用于居中显示Toastchild: Center(child: Material(// 设置Toast背景颜色为半透明黑色color: Colors.black.withOpacity(0.8),// 设置Toast背景的圆角shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),),// 设置Material的子widget为Padding，用于添加内边距child: Padding(padding: const EdgeInsets.all(16.0), // 设置内边距大小child: Column(mainAxisSize: MainAxisSize.min, // 设置Column的主轴尺寸为最小children: <Widget>[// 添加一个CircularProgressIndicator作为加载提示CircularProgressIndicator(strokeWidth: 2,// 设置加载提示的颜色为白色valueColor: AlwaysStoppedAnimation<Color>(Colors.white),),SizedBox(height: 8), // 设置加载提示和文本之间的间距// 添加一个Text widget作为Toast的消息文本Text(message,style: TextStyle(color: Colors.white, // 设置文本颜色为白色fontSize: 16, // 设置文本字体大小),),],),),),),);},);// 将OverlayEntry实例插入到Overlay中，以显示ToastoverlayState.insert(_overlayEntry!);}/// 移除加载提示Toast的静态方法static void remove() {// 如果存在_overlayEntry实例，则移除它并将其设置为nullif (_overlayEntry != null) {_overlayEntry!.remove();_overlayEntry = null;}}
}这段代码定义了一个名为
LoadingToast的类，该类提供了两个静态方法：show和remove。show方法用于显示一个加载提示Toast，而remove方法用于移除该Toast。Toast的显示是通过创建一个OverlayEntry实例并将其插入到Overlay中实现的。Toast的移除是通过调用OverlayEntry的remove方法实现的。
2、main
import 'package:flutter/material.dart';
// 引入自定义的LoadingToast类，该类负责显示和隐藏加载提示Toast
import 'package:test_loading_toast/loading_toast.dart';void main() {// 运行Flutter应用程序runApp(MyApp());
}// 定义应用程序的根组件MyApp
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// 返回MaterialApp组件，它是Flutter应用程序的主要入口点return MaterialApp(// 设置navigatorKey，这是为了确保LoadingToast类能够访问到OverlaynavigatorKey: LoadingToast.navigatorKey,// 设置MaterialApp的主页为Scaffold组件home: Scaffold(// 设置Scaffold的AppBar，其中包含一个标题appBar: AppBar(title: Text('Loading Toast Example'),),// 设置Scaffold的主体为Center组件，其中包含一个Columnbody: Center(// 设置Column的mainAxisAlignment属性为MainAxisAlignment.center，使其子组件垂直居中child: Column(mainAxisAlignment: MainAxisAlignment.center,// 设置Column的子组件为一个ElevatedButtonchildren: <Widget>[ElevatedButton(// 设置按钮的点击事件处理函数onPressed: () {// 调用LoadingToast的show方法显示加载提示ToastLoadingToast.show(context, '正在加载');// 使用Future.delayed模拟异步操作，并在3秒后调用LoadingToast的remove方法隐藏ToastFuture.delayed(Duration(seconds: 3)).then((_) {LoadingToast.remove();});},// 设置按钮的子组件为Text，显示按钮的文本child: Text('Show Loading Toast'),),],),),),);}
}这段代码定义了一个简单的Flutter应用程序，其中包含一个按钮。当按钮被点击时，它将显示一个加载提示Toast，并在3秒后自动隐藏。
LoadingToast类负责管理Toast的显示和隐藏，它通过操作Overlay来实现Toast的显示效果。
