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

Flutter 学习之旅之 flutter 不使用插件，实现简单带加载动画的 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，进而获取Overlay
  static final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  /// 显示加载提示Toast的静态方法
  static void show(BuildContext context, String message) {
    // 获取当前NavigatorState的OverlayState
    final 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，用于居中显示Toast
          child: 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中，以显示Toast
    overlayState.insert(_overlayEntry!);
  }

  /// 移除加载提示Toast的静态方法
  static void remove() {
    // 如果存在_overlayEntry实例，则移除它并将其设置为null
    if (_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 {
  @override
  Widget build(BuildContext context) {
    // 返回MaterialApp组件，它是Flutter应用程序的主要入口点
    return MaterialApp(
      // 设置navigatorKey，这是为了确保LoadingToast类能够访问到Overlay
      navigatorKey: LoadingToast.navigatorKey,
      // 设置MaterialApp的主页为Scaffold组件
      home: Scaffold(
        // 设置Scaffold的AppBar，其中包含一个标题
        appBar: AppBar(
          title: Text('Loading Toast Example'),
        ),
        // 设置Scaffold的主体为Center组件，其中包含一个Column
        body: Center(
          // 设置Column的mainAxisAlignment属性为MainAxisAlignment.center，使其子组件垂直居中
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            // 设置Column的子组件为一个ElevatedButton
            children: <Widget>[
              ElevatedButton(
                // 设置按钮的点击事件处理函数
                onPressed: () {
                  // 调用LoadingToast的show方法显示加载提示Toast
                  LoadingToast.show(context, '正在加载');
                  // 使用Future.delayed模拟异步操作，并在3秒后调用LoadingToast的remove方法隐藏Toast
                  Future.delayed(Duration(seconds: 3)).then((_) {
                    LoadingToast.remove();
                  });
                },
                // 设置按钮的子组件为Text，显示按钮的文本
                child: Text('Show Loading Toast'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码定义了一个简单的Flutter应用程序，其中包含一个按钮。当按钮被点击时，它将显示一个加载提示Toast，并在3秒后自动隐藏。LoadingToast类负责管理Toast的显示和隐藏，它通过操作Overlay来实现Toast的显示效果。

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