shimmer_auto 0.0.1

An intelligent shimmer effect package that auto-detects widget appearance and generates skeleton loading states.

Shimmer Auto

An intelligent shimmer effect package for Flutter that automatically detects widget appearance and generates skeleton loading states. No manual configuration needed!

✨ Features

• 🎯 Smart Auto-Detection: Automatically detects widget colors, sizes, and shapes
• 🎨 Theme-Aware: Adapts to light and dark themes automatically
• 🔧 Easy to Use: Simple extension methods - just add .withAutoShimmer(loading: isLoading)
• 🎭 Multiple Directions: Left-to-right, right-to-left, top-to-bottom, bottom-to-top
• ⚡ Performance Optimized: Efficient animations with minimal overhead
• 🎪 Versatile: Works with any widget - Container, SizedBox, Text, Image, Card, ListTile, etc.
• 🎛️ Customizable: Full control over colors, duration, and animation style when needed

📦 Installation

Add this to your package's pubspec.yaml file:

dependencies:
  shimmer_auto: ^0.0.1

Then run:

flutter pub get

🚀 Getting Started

To start using Shimmer Auto, import the package and apply the shimmer effect to your widgets during loading states. This package requires Flutter SDK and works seamlessly with Material or Cupertino themes.

Usage

Import the package:

import 'package:shimmer_auto/shimmer_auto.dart';

Basic Usage

Simply add .withAutoShimmer(loading: isLoading) to any widget:

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
).withAutoShimmer(loading: isLoading);

With SizedBox

SizedBox(
  width: 100,
  height: 50,
).withAutoShimmer(loading: isLoading);

With Text

Text(
  'Loading text...',
  style: TextStyle(fontSize: 16),
).withAutoShimmer(loading: isLoading);

📚 Advanced Usage

Custom Shimmer Configuration

Container(
  width: 200,
  height: 100,
).withShimmer(
  loading: isLoading,
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  duration: Duration(milliseconds: 1500),
  direction: ShimmerDirection.leftToRight,
);

Different Shimmer Directions

// Left to Right (default)
widget.withShimmer(
  loading: true,
  direction: ShimmerDirection.leftToRight,
);

// Right to Left
widget.withShimmer(
  loading: true,
  direction: ShimmerDirection.rightToLeft,
);

// Top to Bottom
widget.withShimmer(
  loading: true,
  direction: ShimmerDirection.topToBottom,
);

// Bottom to Top
widget.withShimmer(
  loading: true,
  direction: ShimmerDirection.bottomToTop,
);

Circular Shimmer (for Avatars)

CircleAvatar(
  radius: 30,
  backgroundImage: NetworkImage('...'),
).withCircularShimmer(loading: isLoading);

Speed Variations

// Fast shimmer (800ms)
widget.withFastShimmer(loading: isLoading);

// Slow shimmer (2500ms)
widget.withSlowShimmer(loading: isLoading);

🎯 Real-World Examples

Loading Card with Profile

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Row(
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
        ).withCircularShimmer(loading: isLoading),
        
        SizedBox(width: 16),
        
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 16,
                width: double.infinity,
                color: Colors.grey[300],
              ).withAutoShimmer(loading: isLoading),
              
              SizedBox(height: 8),
              
              Container(
                height: 12,
                width: 150,
                color: Colors.grey[300],
              ).withAutoShimmer(loading: isLoading),
            ],
          ),
        ),
      ],
    ),
  ),
);

Loading List

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
      ),
      title: Text('Item $index'),
      subtitle: Text('Subtitle $index'),
    ).withAutoShimmer(loading: isLoading);
  },
);

Complete Example

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Future<void> loadData() async {
    // Simulate network request
    await Future.delayed(Duration(seconds: 2));
    
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: double.infinity,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(12),
          ),
        ).withAutoShimmer(loading: isLoading),
        
        SizedBox(height: 16),
        
        Text(
          'Content Title',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ).withAutoShimmer(loading: isLoading),
        
        SizedBox(height: 8),
        
        Text(
          'Content description goes here...',
          style: TextStyle(fontSize: 16),
        ).withAutoShimmer(loading: isLoading),
      ],
    );
  }
}

🎨 Customization Options

ShimmerConfig

ShimmerConfig(
  baseColor: Colors.grey[300],        // Base color of shimmer
  highlightColor: Colors.grey[100],   // Highlight color
  duration: Duration(milliseconds: 1500),  // Animation duration
  direction: ShimmerDirection.leftToRight, // Animation direction
  autoDetectTheme: true,              // Auto-detect theme colors
  borderRadius: 4.0,                  // Corner radius
  opacity: 1.0,                       // Opacity of effect
)

Using ShimmerAuto Widget Directly

ShimmerAuto(
  loading: isLoading,
  config: ShimmerConfig(
    baseColor: Colors.red[200],
    highlightColor: Colors.red[50],
    duration: Duration(milliseconds: 1000),
  ),
  child: YourWidget(),
)

🌟 Extension Methods

All widgets can use these extension methods:

• .withAutoShimmer(loading: bool) - Auto-detect and apply shimmer
• .withShimmer(...) - Custom shimmer configuration
• .withCircularShimmer(loading: bool) - Circular shimmer for avatars
• .withFastShimmer(loading: bool) - Fast animation (800ms)
• .withSlowShimmer(loading: bool) - Slow animation (2500ms)

🎯 Supported Widgets

The package automatically detects and creates appropriate skeletons for:

• ✅ Container
• ✅ SizedBox
• ✅ Text
• ✅ Image
• ✅ CircleAvatar
• ✅ Card
• ✅ ListTile
• ✅ Any custom widget

🔧 Theme Support

The package automatically adapts to your app's theme:

MaterialApp(
  theme: ThemeData.light(),  // Light theme colors
  darkTheme: ThemeData.dark(), // Dark theme colors
  // ...
)

In light mode: Uses light grey colors
In dark mode: Uses dark grey colors

📱 Platform Support

• ✅ iOS
• ✅ Android
• ✅ Web
• ✅ Windows
• ✅ macOS
• ✅ Linux

🐛 Issues and Feedback

Please file issues, bugs, or feature requests in our issue tracker.

For more information, check the example folder in the repository.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. We aim to review and merge contributions within a week.

📄 License

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

👏 Credits

Created with ❤️ for the Flutter community.

---

Happy Coding! 🚀