shadify 1.0.1

shadify: ^1.0.1 copied to clipboard

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 to your pubspec.yaml:

dependencies:
  shadify: ^1.0.0

Then run:

flutter pub get

Import the package in your Dart code:

import 'package:shadify/shadify.dart';

Usage #

Basic Example #

The simplest way to add loading animation to any widget:

import 'package:flutter/material.dart';
import 'package:shadify/shadify.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 #

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

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:

• Creating packages
• Developing packages and plugins
• Writing package pages

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 [Rakibul Islam]

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

Made with ❤️ for the Flutter community