插件详情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)