flutter_loading_skeleton 1.0.1 copy "flutter_loading_skeleton: ^1.0.1" to clipboard
flutter_loading_skeleton: ^1.0.1 copied to clipboard

A highly customizable loading skeleton widget for Flutter with shimmer effects and smooth animations.

flutter_loading_skeleton #

pub package popularity likes pub points

A highly customizable and lightweight loading skeleton widget for Flutter applications. Create beautiful animated placeholders while your content loads, significantly improving perceived performance and user experience.

✨ Features #

  • 🎨 Fully Customizable - Control width, height, border radius, colors, and animation duration
  • ⚑ Smooth Animations - Buttery smooth shimmer effects with customizable timing
  • 🎯 Easy Integration - Drop-in replacement for loading states in lists, cards, and forms
  • πŸŒ— Theme Aware - Automatically adapts to light and dark themes
  • πŸ“± Responsive - Works perfectly across all screen sizes and orientations
  • πŸš€ Performance Optimized - Lightweight with minimal impact on app performance
  • πŸ”§ Width Animation - Optional animated width changes for dynamic loading effects

πŸ“¦ Installation #

Add flutter_loading_skeleton to your pubspec.yaml:

dependencies:
  flutter_loading_skeleton: ^0.0.1

Then run:

flutter pub get

πŸš€ Quick Start #

Import the package and start using it immediately:

import 'package:flutter_loading_skeleton/flutter_loading_skeleton.dart';

// Basic skeleton
LoadingSkeleton(
  height: 20,
  width: 200,
)

// Customized skeleton
LoadingSkeleton(
  height: 16,
  width: 150,
  borderRadius: 8.0,
  duration: Duration(seconds: 1),
)

// Animated width skeleton
SizedBox(
  width: 200,
  child: LoadingSkeleton(
    height: 20,
    animateWidth: true,
  ),
)

πŸ“š Comprehensive Usage Examples #

Basic Skeleton Shapes #

// Text line skeleton
LoadingSkeleton(
  height: 16,
  width: 200,
  borderRadius: 4,
)

// Circular avatar skeleton
LoadingSkeleton(
  height: 50,
  width: 50,
  borderRadius: 25,
)

// Card skeleton
LoadingSkeleton(
  height: 120,
  width: double.infinity,
  borderRadius: 12,
)

List Item Skeleton #

Widget buildListItemSkeleton() {
  return Padding(
    padding: EdgeInsets.all(16),
    child: Row(
      children: [
        // Avatar skeleton
        LoadingSkeleton(
          height: 40,
          width: 40,
          borderRadius: 20,
        ),
        SizedBox(width: 16),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Title skeleton
              LoadingSkeleton(
                height: 16,
                width: double.infinity,
                borderRadius: 4,
              ),
              SizedBox(height: 8),
              // Subtitle skeleton
              LoadingSkeleton(
                height: 14,
                width: 150,
                borderRadius: 4,
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Card Grid Skeleton #

Widget buildCardSkeleton() {
  return Card(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Image placeholder
          LoadingSkeleton(
            height: 120,
            width: double.infinity,
            borderRadius: 8,
          ),
          SizedBox(height: 12),
          // Title
          LoadingSkeleton(
            height: 18,
            width: double.infinity,
            borderRadius: 4,
          ),
          SizedBox(height: 8),
          // Description lines
          LoadingSkeleton(
            height: 14,
            width: double.infinity,
            borderRadius: 4,
          ),
          SizedBox(height: 4),
          LoadingSkeleton(
            height: 14,
            width: 180,
            borderRadius: 4,
          ),
        ],
      ),
    ),
  );
}

Animated Width Example #

// For dynamic loading effects
SizedBox(
  width: 250,
  child: LoadingSkeleton(
    height: 20,
    borderRadius: 10,
    animateWidth: true,
    duration: Duration(milliseconds: 1500),
  ),
)

πŸŽ›οΈ API Reference #

LoadingSkeleton Properties #

Property Type Default Description
height double 16.0 Height of the skeleton widget
width double 120.0 Width of the skeleton widget
borderRadius double 8.0 Corner radius for rounded rectangles
duration Duration Duration(seconds: 1) Animation cycle duration
animateWidth bool false Enable width animation effect

Complete Example #

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

class MyLoadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Loading Skeleton Demo')),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return ListTile(
            leading: LoadingSkeleton(
              height: 40,
              width: 40,
              borderRadius: 20,
            ),
            title: LoadingSkeleton(
              height: 16,
              width: 200,
            ),
            subtitle: LoadingSkeleton(
              height: 14,
              width: 150,
            ),
          );
        },
      ),
    );
  }
}

🎨 Theming & Customization #

The skeleton automatically adapts to your app's theme, using appropriate colors for light and dark modes. The animation smoothly transitions between Colors.grey[300] and Colors.grey[100] by default.

πŸ“± Platform Support #

  • βœ… Android
  • βœ… iOS
  • βœ… Web
  • βœ… Windows
  • βœ… macOS
  • βœ… Linux

🀝 Contributing #

For more information about the package, please visit the GitHub repository.

If you'd like to contribute to the package, please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and commit them with clear messages.
  4. Submit a pull request.

To file issues or request features, please use the GitHub Issues page.

The package authors strive to respond to issues and pull requests in a timely manner, but please be patient as they may have other commitments.

1
likes
150
points
142
downloads

Publisher

verified publishergasobu.com

Weekly Downloads

A highly customizable loading skeleton widget for Flutter with shimmer effects and smooth animations.

Repository (GitHub)
View/report issues

Topics

#loading #skeleton #shimmer #animation #placeholder

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on flutter_loading_skeleton