✨ shimmer_ai – Effortless Flutter Shimmer with the `.withShimmerAi()` Extension

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

Perfect for creating stunning skeleton loaders, loading placeholders, and polished preload UI states that delight users and keep your app feeling responsive and professional.

🚀 Key Features

• ⚡ Universal shimmer wrapper: Apply shimmer on any widget type — no need to build custom placeholders
• 🧠 Minimal & intuitive API: Simply add .withShimmerAi(loading: true) and you’re done!
• 🎨 Customizable shimmer styles: Control base color, highlight color, shimmer radius, and animation speed
• ⚙️ Zero setup required: Built for instant integration and lightning-fast performance
• 📱 Responsive & adaptive: Works seamlessly on all screen sizes and Flutter platforms (mobile, web, desktop)
• ✅ Production-ready: Fully tested, null-safe, and easy to maintain

🎉 Getting Started

Add the package to your project's pubspec.yaml:

dependencies:
  shimmer_ai: ^1.1.0

Then run:

flutter pub get

💡 Simple Usage

Import the package in your Dart file:

import 'package:shimmer_ai/shimmer_ai.dart';

Wrap any widget with the .withShimmerAi() extension method:

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

🔧 Example Usage

Column(
  children: [
    // Shimmer on simple text
    Text('Welcome to shimmer_ai').withShimmerAi(loading: isLoading),

    // Shimmer on images
    Image.network('https://example.com/avatar.jpg').withShimmerAi(loading: isLoading),

    // Shimmer wrapping complex widgets like Cards or ListTiles
    Card(
      child: ListTile(
        leading: CircleAvatar(backgroundImage: NetworkImage('https://example.com/profile.jpg')),
        title: Text('John Doe'),
        subtitle: Text('Software Developer'),
      ),
    ).withShimmerAi(loading: isLoading),
  ],
);

🎨 Customizing Shimmer Appearance

Control shimmer color, border radius, and animation duration easily:

Text('Please wait...')
  .withShimmerAi(
    loading: true,
    baseColor: Colors.grey.shade300,
    highlightColor: Colors.grey.shade100,
    borderRadius: 16,
    duration: const Duration(seconds: 2),
  );

📦 Full Example App

Try out the fully working demo bundled in the example folder:

git clone https://github.com/karanpadaliya/shimmer_ai.git
cd shimmer_ai/example
flutter run

Explore real-world use cases showing shimmer with list views, cards, avatars, buttons, and more.

❓ Support & Contributions

• Found a bug or want a new feature? Open an Issue here
• Contributions, improvements, and pull requests are always welcome!
• Maintained by Karan Padaliya – passionate Flutter developer and enthusiast.

📃 License

This project is MIT licensed – see the LICENSE file for details.

⭐️ If you enjoy using shimmer_ai, please give it a star on pub.dev and GitHub. Your support means a lot!

#flutter #shimmer #skeletonloader #loadinganimation #flutterui #flutterpackage #flutteropensource

Why Choose shimmer_ai?

Most shimmer packages require you to manually build skeleton placeholders for every widget, which is tedious and error-prone.

shimmer_ai does all the hard work for you by automatically detecting widget types and applying matching shimmer placeholders — saving you hours of development time while keeping your code clean and maintainable.

Contact

For questions or guidance, feel free to reach out on the GitHub repository or open an issue. Happy Fluttering! 🚀