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

A custom widget that wraps a Shimmer widget and properly uses the color scheme from the theme to create a shimmer effect.

Shimmer Skeleton #

A Flutter widget that provides a customizable shimmer effect, ideal for displaying loading states while fetching data from an API. This package allows you to wrap any widget and display a shimmer skeleton, enhancing the user experience during loading.

Features #

  • Simple integration with any widget.
  • Customizable shimmer colors, directions, and animation loops.
  • Lightweight and performant.
  • Follows Flutter Material design guidelines.

Installing #

Add shimmer_skeleton to your pubspec.yaml file:

dependencies:
  shimmer_skeleton:

Usage #

To use the ShimmerSkeleton widget, wrap your child widget with ShimmerSkeleton and control the loading state with the isLoading parameter.

import 'package:shimmer_skeleton/shimmer_skeleton.dart';
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shimmer Skeleton Example')),
      body: Center(
        child: ShimmerSkeleton(
          isLoading: true, // Set to false when data is loaded
          child: Container(
            width: 300,
            height: 150,
            // Actual content area
          ),
        ),
      ),
    );
  }
}

Parameters #

  • child: The widget that will be displayed while loading.
  • isLoading: A boolean to control whether the shimmer effect should be shown.
  • baseColor: The base color of the shimmer effect (defaults to the theme's secondary color).
  • highlightColor: The highlight color of the shimmer effect (defaults to the theme's primary color).
  • direction: The direction of the shimmer effect (defaults to ShimmerDirection.ltr).
  • loop: The number of animation loops; set to 0 for infinite animation (defaults to 0).
  • enabled: A boolean to enable or disable the shimmer effect (defaults to true).

Contributing #

Contributions are welcome! Please feel free to submit issues or pull requests.

License #

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

Changelog #

See CHANGELOG.md for a list of changes.

Contact #

For collaboration, inquiries, or support, feel free to reach out to us via email: italiya.in@gmail.com

2
likes
140
points
26
downloads

Publisher

unverified uploader

Weekly Downloads

A custom widget that wraps a Shimmer widget and properly uses the color scheme from the theme to create a shimmer effect.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on shimmer_skeleton