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.