fade_shimmer 2.4.0
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 #
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 #
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 backgroundsFadeTheme.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.