套件詳情v2.4.0

fade_shimmer

一個淡入淡出閃爍庫，用於實現最新版 Facebook 載入骨架 UI 的載入效果，具有順暢的淡入淡出過渡。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 7730
喜歡數: 225
Pub 分數: 160

安裝套件

flutter pub add fade_shimmer

套件介紹

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

Fade Shimmer 是一個 Flutter 套件，提供流暢的動畫載入效果，靈感來自 Facebook 的骨架 UI。它使用漸變過渡來創造視覺上吸引人的佔位符，非常適合內容載入狀態。此套件支援多個平台，並能順暢整合至現有的 Flutter 應用程式中。透過自訂持續時間、顏色與閃爍方向，它在資料取得期間提升使用者體驗。其輕量級設計確保極小的效能影響，同時呈現現代且精緻的載入動畫。

適用情境

載入佔位符畫面
列表和卡片的骨架 UI
內容加載指示器
應用入門畫面
動態數據獲取顯示
增強網路延遲期間的使用者體驗

主要特色

平滑漸變過渡動畫
可自定義的閃爍方向
可設定的動畫持續時間
支援多個平台
輕便高效
與現有小部件的輕鬆整合

適合對象

開發現代使用者介面的開發者
需要優雅加載狀態的應用程式
注重使用者體驗一致性的團隊
使用骨架佔位符的項目
Flutter 初學者探索動畫

使用建議

可能需要針對低階設備進行調校以獲得最佳效能
超出基本動畫屬性的自訂功能有限
不適合複雜的互動式加載場景
依賴於 Flutter 的渲染管道
最好與靜態或可預測的佈局結構一起使用

原始 README

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

FadeShimmer

A customizable Flutter package that provides elegant shimmer loading effects with smooth fade transitions. Perfect for creating skeleton screens while your content is loading.

Demo

FadeShimmer Demo

Features

🎨 Customizable colors and dimensions
🌓 Built-in light and dark themes
⏱️ Configurable animation duration
🌊 Support for staggered animations with delay parameter
🔄 Synchronized animations across multiple shimmer elements
🔘 Convenient factory for creating circular shimmer effects

Installation

Add fade_shimmer to your pubspec.yaml file:

dependencies:
  fade_shimmer: ^2.3.0

Run the following command to install:

flutter pub get

Usage

Import the package

import 'package:fade_shimmer/fade_shimmer.dart';

Basic Usage

Create a rectangular shimmer

FadeShimmer(
  height: 8,
  width: 150,
  radius: 4,
  fadeTheme: FadeTheme.light,
)

Create a circular shimmer (for avatars/profile pictures)

FadeShimmer.round(
  size: 60,
  fadeTheme: isDarkMode ? FadeTheme.dark : FadeTheme.light,
)

Custom colors

FadeShimmer(
  height: 8,
  width: 150,
  radius: 4,
  highlightColor: Color(0xffF9F9FB),
  baseColor: Color(0xffE6E8EB),
)

Advanced Usage

Staggered animation effect

Create a wave-like loading effect by adding delays to each shimmer element:

Column(
  children: [
    FadeShimmer(
      height: 8,
      width: 150,
      radius: 4,
      millisecondsDelay: 0,
      fadeTheme: FadeTheme.light,
    ),
    SizedBox(height: 8),
    FadeShimmer(
      height: 8,
      width: 170,
      radius: 4,
      millisecondsDelay: 300, // 300ms delay
      fadeTheme: FadeTheme.light,
    ),
    SizedBox(height: 8),
    FadeShimmer(
      height: 8,
      width: 120,
      radius: 4,
      millisecondsDelay: 600, // 600ms delay
      fadeTheme: FadeTheme.light,
    ),
  ],
)

Changing animation duration

You can change the global animation duration for all shimmer widgets:

// Change animation duration to 3 seconds (default is 1 second)
FadeShimmer.animationDurationInMillisecond = 3000;

Note: This change affects all FadeShimmer widgets in your application.

Customization

Available Properties

Property	Type	Description
`width`	`double`	Width of the shimmer container (required)
`height`	`double`	Height of the shimmer container (required)
`radius`	`double`	Border radius of the shimmer container (default: 0)
`fadeTheme`	`FadeTheme`	Predefined theme (light or dark)
`highlightColor`	`Color`	The brighter color that the shimmer transitions to
`baseColor`	`Color`	The darker color that the shimmer starts with
`millisecondsDelay`	`int`	Delay before the animation starts (default: 0)