✨ shimmer_ai – Effortless Flutter Shimmer

Instantly Create Skeleton Screens & Animated Loading Effects with .withShimmerAi()

shimmer_ai is a lightweight, zero-configuration Flutter package that instantly adds beautiful, smooth shimmer loading effects and skeleton screens to any widget — including Text, Images, Buttons, Cards, ListTiles, and more — with just one line of code! ✨

Perfect for creating engaging skeleton UIs, dynamic content placeholders, and polished preload states that enhance UI/UX, delight users, and make your app feel incredibly responsive and professional.

🚀 Key Features & Benefits

  • ⚡️ Universal Application: Apply shimmer animations on any Flutter widget – no need to build custom placeholder widgets.
  • 🧠 Minimal API: Just add .withShimmerAi(loading: true) to any widget.
  • 🎨 Extensive Customization: Colors, duration, direction, tilt, border radius, loop, custom gradient.
  • 🎯 Pixel‑Perfect Layout (v1.3.0+): Control width, height, margin, padding, decoration without wrappers.
  • ⚙️ No External Dependencies
  • ✅ High Performance
  • 📱 Responsive & Adaptive
  • 💡 Perfect for: Loading states, skeleton UIs, onboarding animations, list/grid loaders.

🎉 Getting Started

dependencies:
  shimmer_ai: ^1.3.0

flutter pub get

import 'package:shimmer_ai/shimmer_ai.dart';

💡 Simple Usage

Text('Loading Data').withShimmerAi(loading: true);

Card( child: Column(children: []), ).withShimmerAi(loading: true);

🔧 Advanced Usage & Customization

Direct Parameters

Text('Loading...')
  .withShimmerAi(
    loading: true,
    baseColor: Colors.grey.shade300,
    highlightColor: Colors.grey.shade100,
    borderRadius: 16,
    duration: Duration(seconds: 2),
    direction: ShimmerDirection.rtl,
    angle: 0.5,
    repeat: false,
    loopCount: 3,
  );

Using ShimmerAiConfig

const myCustomShimmerConfig = ShimmerAiConfig(
  baseColor: Colors.deepPurple,
  highlightColor: Colors.purpleAccent,
  duration: Duration(milliseconds: 2500),
  direction: ShimmerDirection.btt,
  angle: -0.7,
  borderRadius: 8,
);

CircleAvatar(radius: 50).withShimmerAi( loading: true, config: myCustomShimmerConfig, );

Custom Gradient

Container(
  width: 280,
  height: 60,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blueGrey,
    borderRadius: BorderRadius.circular(10),
  ),
  child: const Text('Animated Placeholder'),
).withShimmerAi(
  loading: true,
  customGradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.cyan.shade100,
      Colors.teal.shade50,
      Colors.cyan.shade100,
    ],
    stops: [0.0, 0.5, 1.0],
  ),
  duration: Duration(seconds: 3),
  angle: 0.8,
);

Pixel‑Perfect Layout (v1.3.0+)

Text(' ')
  .withShimmerAi(
    loading: true,
    width: 160,
    height: 16,
    margin: const EdgeInsets.only(bottom: 8),
    padding: const EdgeInsets.symmetric(horizontal: 8),
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(6)),
  );

📸 Examples

Text Placeholder

Text(' ').withShimmerAi(
  loading: loading,
  width: 220,
  height: 12,
  margin: const EdgeInsets.only(bottom: 16),
  padding: const EdgeInsets.symmetric(horizontal: 8),
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(6)),
);

Image Placeholder

Image.network('https://picsum.photos/seed/ai/600/400', fit: BoxFit.cover)
  .withShimmerAi(
    loading: loading,
    width: 280,
    height: 160,
    margin: const EdgeInsets.symmetric(vertical: 8),
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)),
  );

Circular Avatar

SizedBox.shrink().withShimmerAi(
  loading: loading,
  width: 64,
  height: 64,
  decoration: BoxDecoration(shape: BoxShape.circle),
);

Button

ElevatedButton(onPressed: () {}, child: const Text('Continue'))
  .withShimmerAi(
    loading: loading,
    width: 200,
    height: 48,
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
  );

Card Placeholder

Card(
  child: SizedBox(
    height: 120,
    child: Center(
      child: Text(loading ? ' ' : 'Loaded Card Content'),
    ),
  ),
).withShimmerAi(
  loading: loading,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)),
);

ListTile

ListTile(
  leading: const CircleAvatar(radius: 24),
  title: Text(loading ? ' ' : 'Title'),
  subtitle: Text(loading ? ' ' : 'Subtitle'),
).withShimmerAi(
  loading: loading,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)),
);

Icon

Icon(Icons.star, size: 28).withShimmerAi(
  loading: loading,
  width: 44,
  height: 44,
  decoration: BoxDecoration(shape: BoxShape.circle),
);

Grid

GridView.builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  itemCount: 6,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
  ),
  itemBuilder: (_, i) {
    return SizedBox.shrink().withShimmerAi(
      loading: loading,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)),
    );
  },
);

🤝 Contributing

We welcome PRs, bug reports, and suggestions! Open an issue or PR on GitHub.

📄 License

MIT © karanpadaliya

Libraries

shimmer_ai