Hello friends! In today’s article, I would like to share about caching requests in a Flutter application. Before we begin, let’s explore some concepts

What is caching?

Understand roughly the cache is a data container, to help speed up data retrieval later. The data contained in the cache may be the result of previous calculations, processing, or duplicates of data stored elsewhere. There are many types of data we can cache. However in this article we will focus on caching data from the API requests that the app calls.

So what are the benefits of caching?

• Helps application request data faster. Because the data loaded from the cache is stored locally.
• Reduce api connections to the server. This will help reduce connections and increase server performance.
• Reduce bandwidth usage
• Backup data when unfortunately the server has an error.

Where is the cache stored?

The cache can be stored in 2 places:

• On RAM – Memory cache: Data cache is stored in memory when running the application. If you disable the application, it will be lost.
• Disk cache: The cache data will be stored on the drive in various forms such as file, database, share-preference. Because it is stored on disk, it will exist even when the application is shut down.

The basic mechanism of cache operation is as follows:

It’s ready .. Now the presentation will show the caching api request in a Flutter application.

Caching API request in Flutter

In flutter, the library that is most used for caching is flutter_cache_manager . However, in the following demo application we request the api using dio so we will use the dio-http-cache library inspired by the above lib flutter_cache_manager.

Dio-http-cache uses sqlite for disk cache, and LRU (least recently used) for memory cache.

Using:

Some parameters that you can configure for buildCacheOptions :

1. primaryKey : By default host + path will be used as the primaryKey.
2. subKey : the default is the query (data or queryParameters)
3. maxAge : cache lifetime. if not set or null. It will try to get max-aga and max-stale from Cache-Control from the api respose headers.
4. maxStale : the time at which the cache is considered old. When an error occurs (such as 500, 404) before maxStale, lib will try to return data from the cache.

6. forceRefresh : default is false.

• Get data from the network first.
• If receiving data from the network is successful, store or refresh the cache.
• If retrieving data from the network fails or there is no network, try retrieving data from the cache instead of an error.

Some other functions:

• Clear expired cache: This is done automatically, but if you want, call: DioCacheManager.clearExpired();
• Clear all cache (expired or not): _dioCacheManager.clearAll();
• Clear the cache when you know the primaryKey and subkey: _dioCacheManager.delete(primaryKey,{subKey});

Examples of maxAge and maxStale:

1. 0 ~ 3 days: Returns data from cache.
2. 3 ~ 7 days:
   • First get data from the network.
   • If succeeds, refresh the cache.
   • If there is an error or no network, try to return data from it instead of an error.
3. after 7 days: do not use the cache anymore, the cache will be deleted.

And this is the result achieved

Note: In addition, in the above application, I have cache image by library cached_network_image, you can read more here .

Link of demo application: demo-cache

Thank you for watching !