How to cache a future string in flutter

Question

I am iterating through a listview of objects and retrieving favicon URL's from package:favicon/favicon.dart as a future: in a FutureBuilder. I then use these URL's to return and cache the favicon images in containers as leading listtile icons with a CachedNetworkImageProvider.

This works great, however it takes time to load every time the listview is refreshed because it has to retrieve the best url from the favicon url getter.

How do I cache the future: value so that there is no delay in using the URL retriever after the first use. Here is the code:

return new ListTile(
  leading: 
  FutureBuilder(
  future: iconz.Favicon.getBest(urlBase),
    builder: (context, snapShot2) {
      if (snapShot2.hasData){
       String urlIcon = snapShot2.data.url.toString();
       var containImage = Container(
       height: 40,
       width: 40,
       decoration: BoxDecoration(
       shape: BoxShape.circle,
       image: DecorationImage(           
       image: CachedNetworkImageProvider(urlIcon),
       fit: BoxFit.fill
       ),
       ),
       );
       return containImage;
     } 
     else {
      return 
      const Icon(Icons.remove_red_eye, color: Color(0xff00caff), size: 40);
     }
    }

  ),

  title: ...

In summary: How to use flutter_cache_manager on future: iconz.Favicon.getBest(urlBase), ?

Solution

You can cache the data in a map stored in a place where state is persistent.

// Make sure this is declared somewhere stateful
final Map<String, String> _urls;

/// Retrieves and caches favicon data.
Future<String> _getBest(String urlBase) async () =>
    _urls[urlBase] ??= (await iconz.Favicon.getBest(urlBase)).url.toString();

// Now use `_getBest(urlBase)` as your `FutureBuilder` `Future`.

Comments

[Loren.A]

Just to be clear, the urls don't change on each refresh?

[metamonkey]

They could, but usually they won't. The URL's are the "best" favicon url returned for the respective url by the flutter favicons api.

[metamonkey]

I'm having trouble getting this to work. Is future<Favicon> _getBest supposed to be declared as a function and called in the future: var?

[metamonkey]

The way it's written, it seem we are returning a string when a Future<Favicon> is declared. Also, 'Favicon' isn't a type. Was the declaration supposed to be Future<iconz.Favicon>?

[hacker1024]

Sorry, it should return a Future<String>. Yes, call it in your FutureBuilder construction.

[metamonkey]

Ok, this is working, however it still takes some time to get the url's. My map is currently stored in the state class of the parent class. i.e. class B extends State<A> { final Map<String, String> _urls = {}; }. How do I use a cache manager with this or put this somewhere so it's actually cached?