Utilizing Caching Strategies for Network Requests and Images to Enhance Performance in Flutter

In Flutter development, optimizing performance is critical for providing a smooth and responsive user experience. One of the most effective techniques for enhancing performance is implementing caching strategies for network requests and images. Caching can significantly reduce latency, minimize data usage, and improve overall app responsiveness. This article delves into various caching strategies to boost your Flutter app’s performance.

Understanding Caching in Flutter

Caching is the process of storing copies of data in a temporary storage location so that they can be accessed more quickly. When an application requests data, the cache is checked first. If the data is found in the cache (a ‘cache hit’), it is served directly, bypassing the need to retrieve it from the original source. If the data is not found in the cache (a ‘cache miss’), it is fetched from the original source, stored in the cache, and then served to the application.

Why Implement Caching?

• Improved Performance: Faster data retrieval due to local storage.
• Reduced Latency: Minimizes delays in data loading.
• Lower Data Usage: Saves bandwidth and reduces costs for users.
• Offline Support: Enables the app to function (to some extent) even without an active internet connection.
• Better User Experience: Provides a smoother and more responsive app interface.

Caching Strategies for Network Requests

Network request caching involves storing the responses from API calls to reduce the need to make repeated requests for the same data.

1. HTTP Caching

HTTP caching uses standard HTTP headers to control how responses are cached by browsers and other HTTP clients. Flutter’s http package can be used to interact with HTTP caching headers.

Implementation

import 'package:http/http.dart' as http;
import 'package:http/src/client.dart';

class CachedHttpClient implements Client {
  final Client _inner;
  final Map<Uri, http.Response> _cache = {};

  CachedHttpClient(this._inner);

  @override
  Future<http.Response> get(Uri url, {Map<String, String>? headers}) async {
    if (_cache.containsKey(url)) {
      print('Cache hit for $url');
      return _cache[url]!;
    }

    print('Fetching $url from network');
    final response = await _inner.get(url, headers: headers);

    if (response.statusCode == 200) {
      _cache[url] = response;
    }

    return response;
  }

  @override
  void close() {
    _inner.close();
  }

  // Implement other methods like post, put, delete etc. forwarding to _inner
  @override
  Future<http.StreamedResponse> send(http.BaseRequest request) {
        return _inner.send(request);
  }

  @override
  Future<http.Response> head(Uri url, {Map<String, String>? headers}) {
        return _inner.head(url, headers: headers);
  }

  @override
  Future<http.Response> post(Uri url, {Map<String, String>? headers, Object? body, Encoding? encoding}) {
       return _inner.post(url, headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<http.Response> put(Uri url, {Map<String, String>? headers, Object? body, Encoding? encoding}) {
        return _inner.put(url, headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<http.Response> patch(Uri url, {Map<String, String>? headers, Object? body, Encoding? encoding}) {
        return _inner.patch(url, headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<http.Response> delete(Uri url, {Map<String, String>? headers, Object? body, Encoding? encoding}) {
        return _inner.delete(url, headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<String> read(Uri url, {Map<String, String>? headers}) {
        return _inner.read(url, headers: headers);
  }

  @override
  Future<Uint8List> readBytes(Uri url, {Map<String, String>? headers}) {
        return _inner.readBytes(url, headers: headers);
  }
}

void main() async {
  final client = CachedHttpClient(http.Client());

  try {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/todos/1');

    // First request
    final response1 = await client.get(url);
    print('Response 1: ${response1.body}');

    // Second request (from cache)
    final response2 = await client.get(url);
    print('Response 2: ${response2.body}');
  } finally {
    client.close();
  }
}

In this example:

• We create a CachedHttpClient that wraps a regular http.Client.
• The get method checks if the response for the given URL is already in the cache.
• If it is, the cached response is returned; otherwise, a new request is made, and the response is stored in the cache.

2. Using dio Package with Cache Interceptor

The dio package, a powerful HTTP client for Dart, offers built-in support for interceptors. Interceptors can be used to implement caching easily.

Step 1: Add Dependencies

Add dio and dio_cache_interceptor to your pubspec.yaml:

dependencies:
  dio: ^4.0.0
  dio_cache_interceptor: ^3.3.0
  path_provider: ^2.0.0

Step 2: Implement Caching Interceptor

import 'package:dio/dio.dart';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
import 'package:dio_cache_interceptor/options.dart';
import 'package:path_provider/path_provider.dart';

void main() async {
  // Obtain temporary directory to store cache
  final tempDir = await getTemporaryDirectory();

  // Define the cache options
  final cacheOptions = CacheOptions(
    store: HiveCacheStore(tempDir.path), // Use HiveCacheStore or FileCacheStore
    policy: CachePolicy.forceCacheable, // or CachePolicy.noCacheForceNetwork
    hitCacheOnErrorExcept: [], // Optional. Returns a cached response on error but for listed error codes.
    maxStale: const Duration(days: 7), // GONE. Cache valid for 7 days.
    priority: CachePriority.normal, // Optional. Allows to build a priority queue.
    cipher: null, // Optional. Allows to encrypt cache data with algorithm provided.
    keyBuilder: (request) => request.uri.toString(), // Optional. Allows specify custom key builder function.
    allowPostMethod: false, // Allows caching post method
  );

  // Create dio instance
  final dio = Dio();

  // Add cache interceptor
  dio.interceptors.add(DioCacheInterceptor(options: cacheOptions));

  try {
    // Make request
    final response = await dio.get('https://jsonplaceholder.typicode.com/todos/1',
        options: Options(headers: {'Cache-Control': 'public, max-age=3600'}) // HTTP caching header
    );
    print('Response: ${response.data}');

    // Make same request again (should be from cache)
    final cachedResponse = await dio.get('https://jsonplaceholder.typicode.com/todos/1');
    print('Cached Response: ${cachedResponse.data}');
  } catch (e) {
    print('Error: $e');
  }
}

Key aspects of this implementation:

• Cache Store: Uses HiveCacheStore or FileCacheStore to persist cached data to disk.
• Cache Policy: Sets the caching behavior, such as CachePolicy.forceCacheable, which forces caching.
• Max Stale: Specifies the maximum duration for which the cache is valid.
• Interceptor: Adds DioCacheInterceptor to Dio’s interceptors to handle caching logic.

Caching Strategies for Images

Image caching is crucial for improving the loading time of images in your app. Flutter provides built-in mechanisms and third-party packages for efficient image caching.

1. Using CachedNetworkImage Package

The cached_network_image package simplifies the process of caching images from the network.

Step 1: Add Dependency

Add cached_network_image to your pubspec.yaml:

dependencies:
  cached_network_image: ^3.0.0

Step 2: Implement Image Caching

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

class CachedImageExample extends StatelessWidget {
  final String imageUrl = 'https://via.placeholder.com/350x150';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Network Image Example'),
      ),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: imageUrl,
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

Explanation:

• CachedNetworkImage widget fetches and caches the image.
• placeholder shows a loading indicator while the image is being fetched.
• errorWidget displays an error icon if the image fails to load.

2. Manually Caching Images with ImageCache

Flutter’s ImageCache class allows you to manually cache images in memory. This approach provides more control over the caching process.

Implementation

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

class ManualImageCache extends StatefulWidget {
  @override
  _ManualImageCacheState createState() => _ManualImageCacheState();
}

class _ManualImageCacheState extends State<ManualImageCache> {
  final String imageUrl = 'https://via.placeholder.com/350x150';
  ImageProvider? _imageProvider;

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

  Future _loadImage() async {
    final imageProvider = NetworkImage(imageUrl);
    final imageStream = imageProvider.resolve(ImageConfiguration.empty);

    imageStream.addListener(
      ImageStreamListener(
        (ImageInfo info, bool synchronousCall) {
          // Image loaded successfully, do something with it
          if (mounted) {
            setState(() {
              _imageProvider = imageProvider;
            });
          }
        },
        onError: (dynamic error, StackTrace? stackTrace) {
          // Handle image loading error
          print('Failed to load image: $error');
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Manual Image Cache Example'),
      ),
      body: Center(
        child: _imageProvider != null
            ? Image(image: _imageProvider!)
            : CircularProgressIndicator(),
      ),
    );
  }

  @override
  void dispose() {
    // Dispose of the image stream to prevent memory leaks
    super.dispose();
  }
}

This code snippet illustrates how to manually manage image caching:

• Loading Image: Initiates loading the image in initState and resolves the ImageProvider.
• Listening for Events: Uses an ImageStreamListener to listen for successful image loads or errors.
• Updating UI: Updates the UI when the image is successfully loaded.

Best Practices for Caching

• Cache Invalidation: Implement strategies for invalidating the cache when data changes.
• Cache Expiry: Set appropriate expiry times to balance between performance and data freshness.
• Storage Limits: Monitor and manage the size of your cache to prevent excessive storage usage.
• Error Handling: Implement robust error handling to deal with cache failures.
• Security: Secure sensitive data stored in the cache to prevent unauthorized access.

Conclusion

Implementing caching strategies is essential for optimizing performance and enhancing user experience in Flutter applications. Whether it’s HTTP caching for network requests or image caching for visual assets, these techniques can significantly improve your app’s responsiveness, reduce data usage, and provide offline support. By adopting best practices for cache invalidation, storage limits, and security, you can effectively leverage caching to build high-performance Flutter apps.