☕ Buy Me a Coffee #

🔽 Shimmer Effect (Flutter) #

shimmer_effects_plus is a Flutter package that creates a shimmering loading effect to indicate content is being loaded. It allows you to wrap any widget with a customizable animated placeholder. You can easily adjust the shimmer’s color, speed, and direction to match your app's design.

🎬 Demo Video #

#

📱 Use Cases #

• Simulate loading state for cards, lists, avatars, or detail sections.
• Improve perceived performance while fetching data.
• Display animated placeholders for text, images, or custom widgets.

✨ Features #

• Show shimmer effect on any widget then hide it when the function is finished
• 🔄 Repeating shimmer animation
• 🎨 Custom colors (mainColor, subColor)
• ⏱ Custom animation duration (period)
• 🔄 Supports left-to-right, right-to-left, top-to-bottom, bottom-to-top directions
• 🟦 Built-in widgets: ShimmerEffectWidget.cover, ShimmerEffectWidget.circle, ShimmerEffectWidget.triangle, ShimmerEffectWidget.rectangle
• ✅ Enable or disable shimmer with enabled flag
• Lightweight and fast.

🏗️ Architecture & Technologies #

🧾 Constructor Parameters #

🚀 Usage #

✅ Basic Usage #

⭐ Shimmer auto hide shimmer effect and loading child when function finish

ShimmerEffectWidget.auto(
    subColor: Colors.grey[300]!,
    mainColor: Colors.grey[100]!,
    period: const Duration(milliseconds: 1200),
        funcShimmer: () async {
        await Future.delayed(Duration(seconds: 3)); /// remember await function action (load api, read file, ... )
    },
    direction: ShimmerDirection.ttb,
    child: Container(
        padding: const EdgeInsets.all(5.0),
        color: Colors.redAccent,
        child: ClipPath(
            clipper: StarClipper(),
            child: Container(
                width: 200, 
                height: 200,
                color: Colors.amber,
                child: const Center(
                child: Text("⭐", style: TextStyle(fontSize: 40)),
                ),
            ),
        ),
    ),
)

📏 Basic Shimmer cover

ShimmerEffectWidget.cover(
    subColor: Colors.grey[300]!,
    mainColor: Colors.grey[100]!,
    period: const Duration(milliseconds: 1200),
    direction: ShimmerDirection.ttb,
    child: Container(width: 100, height: 100, color: Colors.white),
)

📏 Basic Shimmer cover (Text)

ShimmerEffectWidget.cover(
    subColor: Colors.grey[800]!,
    mainColor: Colors.grey[400]!,
    period: const Duration(milliseconds: 1500),
    direction: ShimmerDirection.ttb,
    child: const Text("Shimmer loading text", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),),
),

🟢 Circular shimmer (e.g., for avatar)

ShimmerEffectWidget.circle(size: 60),

🔺 Shimmer Triangle

ShimmerEffectWidget.triangle(size: 60),

✅ Shimmer Triangle

ShimmerEffectWidget.rectangle(width: 60, height: 15,),

📋 Shimmer List

const ShimmerList(
  qtyLine: 2,
),

📄 Shimmer List Page

const ShimmerListPage(
    qtyPerLine: 3,
    quantity: 3,
    shape: ShimmerShapeType.square,
),

⚙️ Setup #

To install the shimmer_effects_plus package, add the following to your pubspec.yaml file:

dependencies:
  expandable_tile: ^1.0.2

📦 Supported SDKs #

• Flutter: Stable channel
• Android: SDK 21+
• iOS: iOS 9+

🙌 Contributions #

Feel free to open issues or pull requests on GitHub.

📄 License #

MIT License. See LICENSE for details.