Shimmer Loading Placeholder

A Flutter package that provides shimmer loading placeholder effects for any widget. This package helps you create beautiful loading states with shimmer effects, similar to those used in Facebook, Instagram, and other popular apps.

Features

  • Easy to use with any widget
  • Customizable shimmer colors
  • Adjustable animation duration
  • Support for rounded corners
  • Configurable shimmer direction (left-to-right or right-to-left)
  • Works with ListView and GridView

Getting Started

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

dependencies:
  shimmer_pacage: ^0.0.1

Usage

Basic Usage

import 'package:shimmer_pacage/shimmer_pacage.dart';

// Wrap any widget with ShimmerContainer
ShimmerContainer(
  child: Container(
    width: 200,
    height: 100,
    color: Colors.white,
  ),
)

Custom Colors

ShimmerContainer(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Container(
    width: 200,
    height: 100,
    color: Colors.white,
  ),
)

Custom Duration

ShimmerContainer(
  duration: Duration(milliseconds: 2000),
  child: Container(
    width: 200,
    height: 100,
    color: Colors.white,
  ),
)

Rounded Corners

ShimmerContainer(
  borderRadius: 8.0,
  child: Container(
    width: 200,
    height: 100,
    color: Colors.white,
  ),
)

Custom Direction

ShimmerContainer(
  direction: ShimmerDirection.rtl, // Right to left
  child: Container(
    width: 200,
    height: 100,
    color: Colors.white,
  ),
)

With ListView

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ShimmerContainer(
        child: Container(
          height: 80,
          color: Colors.white,
        ),
      ),
    );
  },
)

Example

Here's a complete example showing how to use the package:

import 'package:flutter/material.dart';
import 'package:shimmer_pacage/shimmer_pacage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shimmer Example'),
        ),
        body: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: ShimmerContainer(
                borderRadius: 8.0,
                baseColor: Colors.grey[300],
                highlightColor: Colors.grey[100],
                duration: Duration(milliseconds: 1500),
                child: Container(
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Contributing

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

License

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

Libraries

shimmer_pacage