当前位置：首页 > news >正文

Flutter 学习之旅之 flutter 不使用插件，实现简单带加载动画的 LoadingToast 功能

news 来源：原创 2025/8/21 23:34:47

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属性返回一个Material widget，该widget包含一个透明的背景和一个居中的Center widget。

Center widget中包含另一个Material widget，用于显示加载提示的背景和内容，如加载图标和文本信息。

将创建的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的显示效果。