auto_shimmer_animate 0.1.1

A Flutter package that automatically converts existing widget trees into animated shimmer skeleton loading states.

Auto Shimmer Animate

auto_shimmer_animate automatically converts your existing Flutter widgets into animated shimmer skeleton loaders without creating separate placeholder UI.

Supports Null Safety

Wrap your real UI once and let the package render a shimmer skeleton while data is loading. The shimmer animation is powered internally by shimmer_animation, and default colors automatically adapt to light and dark themes. By default, shimmer color, opacity, speed, and angle follow shimmer_animation defaults.

Features

• Automatic shimmer skeleton generation
• No duplicate loading UI
• Theme-aware light and dark shimmer colors
• State-based shimmer support
• Custom loading UI builder
• Custom shimmer animation builder
• Global shimmer theme
• Uses shimmer_animation internally
• Android, iOS, Web, Windows, macOS, Linux

Preview

Installation

dependencies:
  auto_shimmer_animate: ^0.1.1

flutter pub get

Import

import 'package:auto_shimmer_animate/auto_shimmer_animate.dart';

Usage

Basic Auto Shimmer

AutoShimmerAnimate(
  isLoading: isLoading,
  child: ProductCard(),
)

The package automatically generates a skeleton from your widget tree with soft default colors and a subtle shimmer effect.

Custom Skeleton Colors

AutoShimmerAnimate(
  isLoading: isLoading,
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
  child: ProductCard(),
)

• baseColor: Skeleton shape color (parent surfaces)
• highlightColor: Moving shimmer highlight color
• childBaseColor: Skeleton color for child content (when layeredSkeleton is enabled)

Layered Skeleton

AutoShimmerAnimate(
  isLoading: isLoading,
  baseColor: Colors.grey.shade300,
  childBaseColor: Colors.grey.shade400,
  layeredSkeleton: true,
  child: ProductCard(),
)

Separates the skeleton color for container surfaces and content elements for better visual hierarchy.

Custom Loading UI

AutoShimmerAnimate(
  isLoading: isLoading,
  loadingBuilder: (context, _, config) {
    return Container(
      height: 100,
      color: config.baseColor,
      child: Center(
        child: CircularProgressIndicator(),
      ),
    );
  },
  child: ProductCard(),
)

When loadingBuilder is provided, the package skips automatic skeleton generation and uses your custom loading UI instead. The shimmer animation is still applied.

Custom Shimmer Animation

AutoShimmerAnimate(
  isLoading: isLoading,
  shimmerBuilder: (context, skeleton, config) {
    return Shimmer(
      color: config.highlightColor,
      duration: config.duration,
      interval: config.repeatDelay,
      enabled: config.enabled,
      child: skeleton,
    );
  },
  child: ProductCard(),
)

Use shimmerBuilder to customize how the shimmer animation wraps the generated skeleton. Only used when loadingBuilder is not provided.

State-Based Usage

AutoShimmerStateAnimate<ViewStatus>(
  state: status,
  loadingStates: const [ViewStatus.loading],
  child: ProfileView(),
)

Global Theme

AutoShimmerTheme(
  data: const AutoShimmerConfig(
    baseColor: Colors.grey.shade300,
    highlightColor: Colors.grey.shade100,
  ),
  child: MyApp(),
)

API Overview

API	Description
AutoShimmerAnimate	Automatically transforms widgets into shimmer skeletons
AutoShimmerStateAnimate<T>	State-driven shimmer wrapper
AutoShimmerTheme	Provides global shimmer configuration
AutoShimmerConfig	Controls shimmer appearance and behavior
AutoShimmerDirection	Controls shimmer sweep direction

Parameters

Parameter	Type	Default	Description
isLoading	bool	required	Show skeleton when true
child	Widget	required	Widget to skeletonize
baseColor	Color?	-	Skeleton base color
childBaseColor	Color?	-	Child content skeleton color
highlightColor	Color?	-	Shimmer highlight color
loadingBuilder	AutoShimmerBuilder?	-	Custom loading UI (skips auto-skeleton)
shimmerBuilder	AutoShimmerBuilder?	-	Custom shimmer animation wrapper
duration	Duration?	3s	Shimmer sweep duration
repeatDelay	Duration?	0ms	Delay between sweeps
borderRadius	BorderRadius?	8px	Skeleton border radius
layeredSkeleton	bool?	true	Separate colors for parent/child
highlightOpacity	double?	0.8	Shimmer highlight opacity
highlightWidth	double?	0.12	Shimmer highlight width

Example

cd example
flutter pub get
flutter run

See the example/ directory for a complete runnable Flutter app.

Additional Information

The package automatically transforms common Flutter widgets and gracefully falls back for unsupported custom widgets.

License

MIT License