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
• Configurable visibility threshold for loading

🛠️ Advanced Caching Support

• Efficient local storage caching
• Permanent and temporary cache options
• Automatic cache size management
• Offline-first approach with cache fallback

🔄 Placeholder & Error Handling

• Customizable loading placeholders
• Elegant error states with retry options
• Smooth transitions between states
• Clear feedback for offline mode

📱 Adaptive Image Quality

• Progressive image loading with quality transitions
• Low-res to high-res automatic switching
• Bandwidth-aware loading strategies
• Configurable quality thresholds

🚀 Prefetching & Preloading

• Smart preloading of off-screen images
• Batch prefetching capabilities
• Background loading with progress tracking
• Optimized memory usage

🌍 Network & Offline Support

• Robust offline mode with permanent cache
• Automatic network state detection
• Clear UI feedback for connectivity status
• Seamless offline-online transitions

🎨 Extended Format Support

• GIF and animated image support
• SVG rendering capabilities
• Interactive image viewing with zoom
• Responsive layout handling

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.8

💻 Usage Examples

Basic Usage

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

With Advanced Caching

LazyCacheImage(
  imageUrl: 'https://example.com/image.jpg',
  enableOfflineMode: true,
  storeInCache: true, // For permanent storage
  cacheDuration: const Duration(days: 30),
)

Adaptive Quality Loading

LazyCacheImage(
  imageUrl: 'https://example.com/high-quality.jpg',
  lowResUrl: 'https://example.com/low-quality.jpg',
  enableAdaptiveLoading: true,
  visibilityFraction: 0.1,
  placeholder: const Center(
    child: CircularProgressIndicator(),
  ),
)

Interactive Viewer with Error Handling

InteractiveViewer(
  minScale: 0.5,
  maxScale: 4.0,
  child: LazyCacheImage(
    imageUrl: 'https://example.com/image.jpg',
    fit: BoxFit.contain,
    errorWidget: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.error_outline, color: Colors.red),
          Text('Failed to load image'),
          ElevatedButton(
            onPressed: () => {/* Retry logic */},
            child: Text('Retry'),
          ),
        ],
      ),
    ),
  ),
)

Grid View with Lazy Loading

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 0.75,
  ),
  itemBuilder: (context, index) => LazyCacheImage(
    imageUrl: images[index],
    visibilityFraction: 0.1,
    enableAdaptiveLoading: true,
    enableOfflineMode: true,
    fit: BoxFit.cover,
  ),
)

Batch Image Prefetching

// Prefetch and store images permanently
await ImageUtils.prefetchImages(
  [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
  ],
  storeInCache: true,
);

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

Advanced Cache Management

final cacheProvider = CacheProvider();

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

// Check cache status
final isCached = await ImageUtils.isImageCached(
  url,
  checkPermanent: true,
);

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

// Clear all cache
await cacheProvider.clearAllCache();

Offline-First Implementation

LazyCacheImage(
  imageUrl: url,
  enableOfflineMode: true,
  storeInCache: true,
  placeholder: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CircularProgressIndicator(),
        Text('Loading from cache...'),
      ],
    ),
  ),
  errorWidget: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.cloud_off),
        Text('Image not available offline'),
      ],
    ),
  ),
)

🎯 Use Cases

1. Social Media Feed

Perfect for image-heavy social feeds:

ListView.builder(
  itemBuilder: (context, index) => Card(
    child: LazyCacheImage(
      imageUrl: posts[index].imageUrl,
      enableAdaptiveLoading: true,
      visibilityFraction: 0.1,
      storeInCache: true,
    ),
  ),
)

2. Photo Gallery

Ideal for photo galleries with zoom:

InteractiveViewer(
  minScale: 0.5,
  maxScale: 4.0,
  child: LazyCacheImage(
    imageUrl: photo.url,
    fit: BoxFit.contain,
    enableOfflineMode: true,
    storeInCache: true,
  ),
)

3. E-commerce Product Images

Great for product listings:

GridView.builder(
  itemBuilder: (context, index) => LazyCacheImage(
    imageUrl: products[index].imageUrl,
    lowResUrl: products[index].thumbnailUrl,
    enableAdaptiveLoading: true,
    storeInCache: true,
  ),
)

🤝 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