1. Flutter
  2. Assets Handling
  3. Using Cached Images

Using Cached Images in Flutter

Caching images in Flutter improves app performance by reducing unnecessary network requests and enabling offline access to previously loaded images. This guide introduces caching concepts, walks you through Flutter's caching capabilities, and explains how to use the popular cached_network_image package for effective image caching.

Why Cache Images?

Caching images offers several benefits:

  • Improved Performance: Images load faster as they are stored locally after the first download.

  • Reduced Data Usage: Minimizes repeated network calls to fetch the same images.

  • Offline Access: Displays previously cached images without requiring an internet connection.

  • User Experience: Provides smoother app interaction with reduced loading times.

How Image Caching Works

Image caching stores image data locally, either in memory or on disk. When the same image URL is requested, the app fetches it from the cache instead of downloading it again.

In Flutter:

  • The Image.network widget uses a basic caching mechanism.

  • For advanced caching, third-party packages like cached_network_image are recommended.

Using Cached Images with cached_network_image

1. Install the cached_network_image Package

Add the dependency in pubspec.yaml:

dependencies:
  cached_network_image: ^3.2.3

Run the command to install:

flutter pub get

2. Displaying a Cached Image

The CachedNetworkImage widget provides a straightforward way to display cached images.

Basic Example:

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class CachedImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Cached Image Example')),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: 'https://example.com/image.jpg',
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

Features:

  • placeholder: Widget displayed while the image loads (e.g., a spinner).

  • errorWidget: Widget displayed if the image fails to load (e.g., an error icon).

3. Customizing Cache Behavior

Cache Configuration:

You can configure the behavior of cached_network_image by customizing its cache management:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  cacheKey: 'custom-key', // Use a custom key for caching
  maxWidth: 200,          // Resize the image to save space
  memCacheHeight: 300,    // Cache smaller images in memory
);

Clear Cache:

To clear the cache programmatically:

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

void clearCache() async {
  await DefaultCacheManager().emptyCache();
}

4. Offline Access

CachedNetworkImage automatically supports offline access. After an image is downloaded and cached, it can be displayed without an active internet connection.

Optimizing Image Caching

  1. Compress Images: Use optimized formats (e.g., WebP) to reduce file size.

  2. Resize Images: Load appropriately sized images to minimize cache space usage.

  3. Set Cache Expiration: Control how long images are stored using cache headers on the server side or by customizing cache settings.

  4. Use Proper Cache Keys: If image URLs change frequently, consider setting static cache keys.

Example: Advanced Image Caching

Here’s a complete example demonstrating caching with placeholders, error handling, and custom configurations:

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class AdvancedCachedImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Advanced Cached Image Example')),
      body: ListView(
        children: [
          CachedNetworkImage(
            imageUrl: 'https://example.com/image1.jpg',
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
            cacheKey: 'unique-key-1',
          ),
          CachedNetworkImage(
            imageUrl: 'https://example.com/image2.jpg',
            placeholder: (context, url) => LinearProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.broken_image),
            memCacheHeight: 300,
          ),
        ],
      ),
    );
  }
}

Best Practices for Using Cached Images

  1. Use Proper Placeholders
    Display meaningful placeholders, such as a blurred version of the original image.

  2. Handle Errors Gracefully
    Always provide a fallback widget to handle loading errors.

  3. Limit Cache Size
    Avoid consuming excessive storage by managing cache size programmatically.

  4. Test Across Platforms
    Ensure consistent behavior on Android, iOS, and other supported platforms.

Conclusion

Caching images in Flutter is essential for building efficient, user-friendly apps. With tools like cached_network_image, you can easily enhance app performance, reduce data usage, and provide a seamless user experience. Follow this guide to integrate advanced image caching into your Flutter project.

For more in-depth Flutter tutorials, visit askflutter.com!

 

Previous
Next