An advanced image loader for Flutter with caching, placeholders, and progressive loading. ImageFlow provides optimized lazy loading capabilities, ensuring your app's images load efficiently and smoothly.

✨ Features

🏎️ Optimized Lazy Loading

• Loads images only when they become visible in the viewport
• Reduces memory usage and initial load time

🛠️ Advanced Caching Support

• Efficient local storage caching
• Customizable cache duration
• Automatic cache management

🔄 Placeholder & Error Handling

• Customizable loading placeholders
• Elegant error states
• Smooth transitions between states

📱 Adaptive Image Quality

• Progressive image loading
• Low-res to high-res transitions
• Bandwidth-aware loading

🚀 Prefetching & Preloading

• Smart preloading of off-screen images
• Configurable prefetch policies
• Background loading support

🌍 Network & Offline Support

• Offline-first approach
• Automatic network state detection
• Fallback mechanisms for offline usage

🎨 Extended Format Support

• GIF support
• SVG rendering
• Extensible format handlers

Android Setup

Add the following permission to your Android Manifest (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.INTERNET"/>

This permission is required for loading images from the internet.

🚀 Getting Started

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

dependencies:
  imageflow: ^1.0.7

💻 Usage Examples

Basic Usage

LazyCacheImage(
  imageUrl: 'https://example.com/image.jpg',
)

With Custom Placeholder

LazyCacheImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: const Center(
    child: CircularProgressIndicator(),
  ),
)

With Error Handling

LazyCacheImage(
  imageUrl: 'https://example.com/image.jpg',
  errorWidget: const Icon(
    Icons.error_outline,
    color: Colors.red,
  ),
)

Advanced Usage

LazyCacheImage(
  imageUrl: 'https://example.com/image.jpg',
  fit: BoxFit.cover,
  maxWidth: 300,
  maxHeight: 300,
  visibilityFraction: 0.1,
  cacheDuration: const Duration(days: 7),
)

Adaptive Quality Loading

LazyCacheImage(
  imageUrl: 'https://example.com/high-quality.jpg',
  lowResUrl: 'https://example.com/low-quality.jpg',
  enableAdaptiveLoading: true,
  fit: BoxFit.cover,
)

Offline Mode Support

LazyCacheImage(
  imageUrl: 'https://example.com/image.jpg',
  enableOfflineMode: true,
  placeholder: const Text('Loading from cache...'),
)

With Prefetching

// Prefetch multiple images
await ImageUtils.prefetchImages([
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
]);

// Use in widget
LazyCacheImage(
  imageUrl: 'https://example.com/image1.jpg',
  enableOfflineMode: true,
)

Interactive Image Viewer

InteractiveViewer(
  minScale: 0.5,
  maxScale: 4.0,
  child: LazyCacheImage(
    imageUrl: 'https://example.com/image.jpg',
    fit: BoxFit.contain,
  ),
)

🎯 Use Cases

1. Image Lists & Grids

Perfect for optimizing performance in scrolling lists:

ListView.builder(
  itemBuilder: (context, index) => LazyCacheImage(
    imageUrl: images[index],
    visibilityFraction: 0.1,
  ),
)

2. SVG Support

Automatically handles SVG images:

LazyCacheImage(
  imageUrl: 'https://example.com/vector.svg',
  fit: BoxFit.contain,
)

3. Offline Support

Images remain available offline after first load:

LazyCacheImage(
  imageUrl: url,
  placeholder: const Text('Loading from cache...'),
)

4. Cache Management

Easy cache control:

final cacheProvider = CacheProvider();

// Clear specific image
await cacheProvider.clearCache(imageUrl);

// Clear all cached images
await cacheProvider.clearAllCache();

// Get cache size
final size = await cacheProvider.getCacheSize();

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines first.

📄 License

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

Support

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

Contact

• 👨‍💻 Developed by Jam Ali Hassan
• 🌐 Portfolio
• 📧 Email: jamalihassan0307@gmail.com
• 🔗 LinkedIn