A beautiful, customizable shimmer loading widget for Flutter that provides smooth gradient animations while content is loading. Perfect for creating skeleton screens and loading placeholders.

Features

  • ✨ Simple Integration - Add shimmer loading effects with just one line of code using extension methods
  • 🎨 Fully Customizable - Control colors, animation duration, border radius, and more
  • ⚡ Lightweight & Performant - Optimized animations with minimal overhead
  • 📱 Adaptive Size - Automatically measures and fits any widget size
  • 🔧 Flexible API - Use as extension method or widget directly
  • 🎯 Type Safe - Full Dart null-safety support

Getting started

Add shadify_loading to your pubspec.yaml:

dependencies:
  shadify: ^1.0.0

Then run:

flutter pub get

Import the package in your Dart code:

import 'package:shadify_loading/shadify_loading.dart';

Usage

Basic Example

The simplest way to add loading animation to any widget:

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // Simulate data loading
    Future.delayed(Duration(seconds: 3), () {
      setState(() => isLoading = false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Shadify Loading Example')),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 24),
          ).withShadifyLoading(loading: isLoading),
        ),
      ),
    );
  }
}

Customized Loading

Customize the appearance to match your app's design:

Container(
  width: 200,
  height: 100,
  child: Text('Custom Loading'),
).withShadifyLoading(
  loading: isLoading,
  baseColor: Colors.blue[100],
  highlightColor: Colors.blue[50],
  borderRadius: BorderRadius.circular(16),
  duration: Duration(milliseconds: 1500),
);

Loading List Items

Perfect for creating skeleton screens:

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          CircleAvatar(
            radius: 30,
            child: Icon(Icons.person),
          ).withShadifyLoading(loading: isLoading),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 20,
                  child: Text('User Name'),
                ).withShadifyLoading(loading: isLoading),
                SizedBox(height: 8),
                Container(
                  height: 16,
                  width: 150,
                  child: Text('User description'),
                ).withShadifyLoading(loading: isLoading),
              ],
            ),
          ),
        ],
      ),
    );
  },
);

Using Widget Directly

You can also use CustomShadeLoading widget directly:

CustomShadeLoading(
  loading: isLoading,
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  borderRadius: BorderRadius.circular(12),
  duration: Duration(milliseconds: 2000),
  child: Container(
    width: 300,
    height: 200,
    child: YourWidget(),
  ),
);

Card Loading Example

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          height: 200,
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(8),
          ),
        ).withShadifyLoading(loading: isLoading),
        SizedBox(height: 16),
        Container(
          height: 24,
          child: Text('Card Title'),
        ).withShadifyLoading(loading: isLoading),
        SizedBox(height: 8),
        Container(
          height: 16,
          child: Text('Card description text'),
        ).withShadifyLoading(loading: isLoading),
      ],
    ),
  ),
);

API Reference

Extension Method: withShadifyLoading

Widget.withShadifyLoading({
  required bool loading,
  BorderRadius? borderRadius,
  Color? baseColor,
  Color? highlightColor,
  Duration? duration,
})

Widget: CustomShadeLoading

CustomShadeLoading({
  required Widget child,
  required bool loading,
  Duration? duration,
  BorderRadius? borderRadius,
  Color? baseColor,
  Color? highlightColor,
})

Parameters

Parameter Type Required Default Description
loading bool Yes - Whether to show the loading animation
child Widget Yes - The widget to wrap with loading effect
baseColor Color? No Colors.grey[300] Base color of the shimmer gradient
highlightColor Color? No Colors.grey[300] (60% opacity) Highlight color of the shimmer
borderRadius BorderRadius? No BorderRadius.circular(5) Border radius of the loading container
duration Duration? No 1800ms Duration of one complete animation cycle

Additional information

Best Practices

  • Match baseColor and highlightColor with your app's theme for a cohesive look
  • Use consistent loading patterns across your app for better user experience
  • The widget automatically measures child dimensions, so it works seamlessly with any widget
  • Animation automatically pauses when loading is set to false to save resources

Contributing

Contributions are welcome! Here's how you can help:

  1. Report bugs - Open an issue describing the problem
  2. Suggest features - Share your ideas for improvements
  3. Submit pull requests - Fork the repo and create a PR with your changes

Please follow these steps for contributions:

# Fork and clone the repository
git clone https://github.com/yourusername/shadify_loading.git

# Create a feature branch
git checkout -b feature/amazing-feature

# Make your changes and commit
git commit -m 'Add some amazing feature'

# Push to your fork
git push origin feature/amazing-feature

# Open a Pull Request

Issues & Support

If you encounter any problems or have questions:

  • File an issue: GitHub Issues
  • Check existing issues: Someone might have already solved your problem
  • Provide details: Include Flutter version, device info, and code samples when reporting bugs

Package Development

This package follows Flutter's official package development guidelines. For more information:

Changelog

See CHANGELOG.md for a list of changes in each version.

License

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

Author

Created and maintained by Your Name

If you find this package helpful, please give it a ⭐ on GitHub!

Made with ❤️ for the Flutter community

Libraries

shadify