fade_shimmer 2.4.0 copy "fade_shimmer: ^2.4.0" to clipboard
fade_shimmer: ^2.4.0 copied to clipboard

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

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.

185
likes
160
points
6.91k
downloads

Publisher

verified publisherquango.xyz

Weekly Downloads

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

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on fade_shimmer