FadeShimmer

pub package License: MIT

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.

Libraries

fade_shimmer
A Flutter package that provides a customizable shimmer loading effect with fading animation.