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'),),],),),),);}
}