imageflow 1.0.8

A powerful Flutter image loader with lazy loading, caching, and progressive loading capabilities. Built by jamalihassan0307.

🌟 ImageFlow 🌟

An advanced Flutter package for optimized image loading with caching and lazy loading capabilities

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"/>

copied to clipboard

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

copied to clipboard

💻 Usage Examples

Basic Usage

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

copied to clipboard

With Advanced Caching

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

copied to clipboard

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(),
  ),
)

copied to clipboard

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'),
          ),
        ],
      ),
    ),
  ),
)

copied to clipboard

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,
  ),
)

copied to clipboard

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...'),
)

copied to clipboard

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();

copied to clipboard

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'),
      ],
    ),
  ),
)

copied to clipboard

🎯 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,
    ),
  ),
)

copied to clipboard

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,
  ),
)

copied to clipboard

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,
  ),
)

copied to clipboard

🤝 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: [e-mail]
• 🔗 LinkedIn