shimmer_pacage 0.0.1 copy "shimmer_pacage: ^0.0.1" to clipboard
shimmer_pacage: ^0.0.1 copied to clipboard

A Flutter package that provides shimmer loading placeholder effects for any widget.

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.

1
likes
130
points
2
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter package that provides shimmer loading placeholder effects for any widget.

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on shimmer_pacage