loading_animation_widget

安裝套件

flutter pub add loading_animation_widget

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供可自訂的載入動畫、旋轉器和載入器，用於在應用程式中視覺化表示載入或處理狀態。它支援多種動畫風格，非常適合在非同步作業期間增強使用者體驗。該組件輕量級、易於整合，並可在所有主要平台（包括 Android、iOS、Web、macOS、Windows 和 Linux）上運作。非常適合在資料取得或任務進行時顯示進度。

適用情境

在 API 呼叫期間顯示載入狀態
指示背景處理
在資料獲取期間增強UI
顯示應用程式初始化進度
改善螢幕切換期間的使用者體驗

主要特色

多種內建動畫樣式
可自定大小與顏色
跨平台相容性
與 Flutter 的簡單整合
輕量且高效能
支援圓形與線性載入器

適合對象

開發響應式 UI 的開發者
需要在異步操作期間提供視覺反饋的應用程式
尋求動畫指標的UI/UX設計師
針對多個平台的專案

使用建議

可能需要額外的樣式來實現複雜的設計
超出基本屬性的自訂功能有限
未針對極高頻率的更新進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

How to use

Installation

Add loading_animation_widget: to your pubspec.yaml dependencies then run flutter pub get

 dependencies:
  loading_animation_widget:

Import

Add this line to import the package.

import 'package:loading_animation_widget/loading_animation_widget.dart';

All loading animation APIs are same straight forward. There is a static method for each animation inside LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color.

Loading animation with one color

Scaffold(
    body: Center(
      child: LoadingAnimationWidget.staggeredDotsWave(
        color: Colors.white,
        size: 200,
      ),
    ),

Loading animation with more than one color. You have to provide both required colors.

Scaffold(
    body: Center(
        child: LoadingAnimationWidget.twistingDots(
          leftDotColor: const Color(0xFF1A1A3F),
          rightDotColor: const Color(0xFFEA3799),
          size: 200,
        ),
      ),