shimmer

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Shimmer 是一个 Flutter 包，可简化向 UI 组件添加闪烁加载效果的过程，创建出流畅、动画化的占位符外观。它非常适合模拟列表、卡片或图像中的内容加载状态，在数据获取期间提升用户体验。该包支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux，确保在各种设备上行为一致。通过最少的设置，开发者可以快速实现视觉上吸引人的加载指示器，而无需编写复杂的动画。

适合场景

列表中的加载占位符
动画卡片占位符
图像加载骨架
改进数据获取过程中的用户体验
动态内容预览

主要特点

简单 API 集成
跨平台支持
可自定义的闪烁颜色
流畅的动画效果
轻量且高效

适合对象

寻求视觉精致的UI设计师
开发动态内容屏幕的开发者
频繁加载数据的应用
原型设计交互界面
提升感知性能

使用建议

不适用于静态内容
需要在小部件树中正确放置
如果过度使用，可能会影响性能
超出基本样式的定制功能有限
最好与透明背景一起使用

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

A lightweight Flutter widget that paints a moving highlight over placeholder UI. Typical uses are skeleton screens while data loads, and a sliding highlight on a call to action.

Install

dependencies:
  shimmer: ^4.0.0
  material_ui: ^1.0.1

shimmer 4.0 uses Flutter's standalone material_ui package (Flutter 3.44+). Apps that still import package:flutter/material.dart can wrap those subtrees in MaterialUiCompatibilityBridge.

import 'package:material_ui/material_ui.dart';
import 'package:shimmer/shimmer.dart';

Usage

Skeleton placeholder

Shimmer.fromColors is the usual constructor. Build the child from solid shapes (Container, Row, Column). The gradient replaces those colors; transparent pixels stay transparent.

Shimmer.fromColors(
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
  child: Column(
    children: [
      Container(height: 200, color: Colors.white),
      const SizedBox(height: 16),
      Container(height: 12, color: Colors.white),
      const SizedBox(height: 8),
      Container(height: 12, width: 200, color: Colors.white),
    ],
  ),
);

Dark theme:

Shimmer.fromColors(
  baseColor: Colors.grey.shade800,
  highlightColor: Colors.grey.shade600,
  child: placeholder,
);

Custom gradient

Use the default constructor when you need a RadialGradient, SweepGradient, or a LinearGradient that follows Theme.

Shimmer(
  gradient: LinearGradient(
    colors: [
      Theme.of(context).colorScheme.surfaceContainerHighest,
      Theme.of(context).colorScheme.surface,
      Theme.of(context).colorScheme.surfaceContainerHighest,
    ],
    stops: const [0.35, 0.5, 0.65],
  ),
  child: placeholder,
);

Direction, speed, and loops

Shimmer.fromColors(
  direction: ShimmerDirection.rtl,
  period: const Duration(milliseconds: 1200),
  loop: 0, // 0 = forever
  enabled: isLoading,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
  child: placeholder,
);

Parameter	Default	Role
`child`	required	Opaque area the highlight is blended onto
`gradient`	required*	Highlight colors (`fromColors` builds this for you)
`direction`	`ltr`	`ltr`, `rtl`, `ttb`, `btt`
`period`	`1500ms`	Duration of one pass
`loop`	`0`	Passes before stopping; `0` repeats forever
`enabled`	`true`	`false` pauses the animation

*Required on Shimmer(...). Shimmer.fromColors takes baseColor and highlightColor instead.

Performance

Wrap a list of placeholders in one Shimmer, not one Shimmer per row.
Keep child simple and static. Fancy widgets (images, text with decoration, elevation) often look wrong because the shader replaces their colors.
Toggle enabled to false when loading finishes so the ticker stops.

Example

The example/ app shows a loading list and a “slide to unlock” highlight. From the repository root:

cd example && flutter run

How it works

Shimmer drives an AnimationController and paints a ShaderMaskLayer over the child (BlendMode.srcIn). The highlight rectangle is three times the child size so the band can travel fully across the widget.

Project internals, tests, and further optimization notes live in docs/overview.md and docs/optimization.md.