Flutter Animated Skeleton

A production-ready, Impeller-optimized skeleton/shimmer loader for Flutter.

Features

🚀 Performance Optimized: Built with Impeller GPU rendering in mind for smooth 60fps animations
✨ Shimmer Effects: Beautiful gradient-based shimmer animations with customizable intensity
🎨 Themeable: Built-in light/dark themes with full customization support
🧩 Modular: Mix and match primitives or use pre-built components
📱 Responsive: Automatically adapts to different screen sizes and densities

Getting Started

Add the package to your pubspec.yaml:

dependencies:
  flutter_animated_skeleton: ^0.1.0

Basic Usage

Simple Skeleton Loader

import 'package:flutter_animated_skeleton/flutter_animated_skeleton.dart';

SkeletonLoader(
  enabled: isLoading,
  shimmer: true,
  child: YourWidget(),
)

Themed Skeleton

SkeletonTheme(
  data: SkeletonThemeData.dark(),
  child: SkeletonLoader(
    enabled: true,
    child: Column(
      children: [
        SkeletonListTile(hasLeading: true, titleLines: 2),
        SkeletonCard(hasImage: true),
        SkeletonProfileHeader(),
      ],
    ),
  ),
)

Components

Primitives

  • RectSkeleton: Rectangular placeholders
  • CircleSkeleton: Circular avatars and icons
  • LineSkeleton: Text line placeholders
  • RoundedSkeleton: Rounded rectangular elements

Presets

  • SkeletonListTile: List item with leading, title, subtitle, trailing
  • SkeletonCard: Card with optional image, title, subtitle, actions
  • SkeletonProfileHeader: Profile with avatar, name, and subtitle

Layouts

  • SkeletonList: List view with skeleton items
  • SkeletonGrid: Grid view with skeleton items

Customization

Theme Configuration

SkeletonThemeData(
  baseColor: Color(0xFFE0E0E0),
  highlightColor: Color(0xFFF5F5F5),
  density: 1.0,
  elevation: 2.0,
  brightness: Brightness.light,
)

Animation Control

SkeletonLoader(
  duration: Duration(milliseconds: 800),
  intensity: 0.3,
  direction: Axis.horizontal,
  curve: Curves.easeInOut,
  child: YourWidget(),
)

Performance

  • ✅ GPU-accelerated shimmer effects
  • ✅ Efficient animation controllers
  • ✅ Minimal overdraw with proper clipping
  • ✅ Reused shaders and resources
  • ✅ Frame budget compliant (< 4ms paint time)

Examples

Run the example app to see all features in action:

cd example
flutter run

The example demonstrates:

  • Different skeleton types and configurations
  • Light/dark theme switching
  • Shimmer on/off toggles
  • Multiple screen layouts (List, Grid, Profile)

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for guidelines.

License

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

Changelog

See CHANGELOG.md for release notes and version history.

Issues

If you encounter any issues or have feature requests, please file them in the GitHub issue tracker.

Support

For support and questions, please use the GitHub Discussions or file an issue.

Libraries

flutter_animated_skeleton
A production-ready, Impeller-optimized skeleton/shimmer loader for Flutter.