App Shimmer #

A customizable and easy-to-use Flutter package for creating beautiful shimmer loading effects. Perfect for showing loading states in your app with pre-built widgets for ListTiles, ListViews, Grids, and custom containers.

Features #

✨ Pre-built Shimmer Widgets: Ready-to-use shimmer effects for common UI patterns
🎨 Highly Customizable: Full control over colors, sizes, shapes, and animations
📦 Lightweight: Minimal dependencies and optimized performance
🚀 Easy Integration: Simple API that works out of the box
🎯 Type Safe: Built with Flutter's latest best practices

Widgets Included #

• AppShimmerContainer - Single shimmer container
• AppShimmerContainerList - Horizontal or vertical list of shimmer containers
• AppShimmerListTile - Shimmer effect for ListTile layouts
• AppShimmerListTileListView - ListView of shimmer ListTiles
• AppShimmerGrid - Grid layout shimmer effect
• SkeletonContainerExpanded - Expanded shimmer container

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  app_shimmer: ^1.0.3

Then run:

flutter pub get

Usage #

Basic Container #

import 'package:app_shimmer/app_shimmer.dart';

AppShimmerContainer(
  skeletonContainerStyle: ShimmerContainerStyle(
    width: 200,
    height: 100,
    borderRadiusDouble: 12,
  ),
)

ListTile with Shimmer #

AppShimmerListTile(
  padding: EdgeInsets.all(16),
  leadingStyle: ShimmerContainerStyle(
    width: 40,
    height: 40,
    boxShape: BoxShape.circle,
  ),
  titleStyle: ShimmerContainerStyle(
    width: 150,
    height: 16,
  ),
  subtitleStyle: ShimmerContainerStyle(
    width: 100,
    height: 12,
  ),
  trailingStyle: ShimmerContainerStyle(
    width: 40,
    height: 40,
    boxShape: BoxShape.circle,
  ),
  contentSpacing: 16,
  verticalSpacing: 4,
  hasContainer: true,
)

ListView with Shimmer #

AppShimmerListTileListView(
  itemCount: 5,
  hasContainer: true,
  titleStyle: ShimmerContainerStyle(
    width: 200,
    height: 16,
  ),
  subtitleStyle: ShimmerContainerStyle(
    width: 150,
    height: 12,
  ),
  leadingStyle: ShimmerContainerStyle(
    width: 40,
    height: 40,
    boxShape: BoxShape.circle,
  ),
  dividerWidget: SizedBox(height: 8),
)

Grid with Shimmer #

AppShimmerGrid(
  itemCount: 6,
  containerStyle: ShimmerContainerStyle(
    width: double.infinity,
    height: 90,
    borderRadiusDouble: 8,
    customColor: Colors.grey.shade300,
  ),
  iconContainerStyle: ShimmerContainerStyle(
    width: 35,
    height: 35,
    boxShape: BoxShape.circle,
  ),
  crossAxisCount: 3,
  crossAxisSpacing: 8,
  mainAxisSpacing: 8,
)

Custom Colors #

ShimmerContainerStyle(
  width: 200,
  height: 100,
  customColor: Color(0xFF898AC4), // Your custom color
  borderRadiusDouble: 12,
)

Container List (Horizontal) #

AppShimmerContainerList(
  itemCount: 5,
  isColumn: false, // Horizontal
  skeletonContainerStyle: ShimmerContainerStyle(
    width: 100,
    height: 100,
    borderRadiusDouble: 12,
  ),
)

ShimmerContainerStyle Properties #

Example #

Check out the example folder for a complete working example with different shimmer patterns and use cases.

Screenshots #

Shimmer loading effects for ListTiles, ListViews, and Grids

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Authors #

Created by Cristian Cruz

Support #

If you find this package useful, please give it a ⭐ on GitHub!

For issues, feature requests, or questions, please visit our issue tracker.