fade_shimmer 2.4.0

Published Aug 12, 2025

SDKflutter

Platformandroidioswindowslinuxmacosweb

A fade shimmer library to implement loading effects like the latest Facebook loading skeleton UI with smooth fade transitions.

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)

Predefined Themes

FadeTheme.light - Light gray colors suitable for light backgrounds
FadeTheme.dark - Dark gray colors suitable for dark backgrounds

Example Project

Check out the example directory for a complete sample application using FadeShimmer.

Compatibility

Supports Flutter 3.0 and above
Null safety compatible
Works on all platforms (Android, iOS, Web, Desktop)

Contributing

Contributions are welcome! If you find a bug or want a feature, please open an issue on the GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.