{"id":22131,"date":"2025-08-28T12:13:42","date_gmt":"2025-08-28T06:43:42","guid":{"rendered":"https:\/\/www.softsuave.com\/blog\/?p=22131"},"modified":"2025-10-30T14:58:38","modified_gmt":"2025-10-30T09:28:38","slug":"image-caching-in-flutter-with-riverpod","status":"publish","type":"post","link":"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/","title":{"rendered":"Efficient Image Caching in Flutter with Riverpod"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Who_This_Is_For\" >Who This Is For<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Why_Cache_Images\" >Why Cache Images?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Key_Benefits_of_Image_Caching\" >Key Benefits of Image Caching:<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Tools_Well_Use\" >Tools We\u2019ll Use<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Step-by-step_process_to_cache_an_image_in_Flutter_with_Riverpod\" >Step-by-step process to cache an image in Flutter with Riverpod<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Step_1_Define_Your_Image_URL_Provider\" >Step 1: Define Your Image URL Provider<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Step_2_Implement_a_Basic_In-Memory_Cache\" >Step 2: Implement a Basic In-Memory Cache<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Step_3_Build_the_Image_Gallery_Widget\" >Step 3: Build the Image Gallery Widget<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Step_4_Add_Images_Dynamically\" >Step 4: Add Images Dynamically<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Step_5_Manual_Cache_Control\" >Step 5: Manual Cache Control<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Advantages_of_Using_Riverpod\" >Advantages of Using Riverpod<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Final_Result\" >Final Result<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.softsuave.com\/blog\/image-caching-in-flutter-with-riverpod\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<div class=\"wp-block-columns has-border-color is-layout-flex wp-container-core-columns-is-layout-29cf1a26 wp-block-columns-is-layout-flex\" style=\"border-color:#ff0042;border-width:3px;margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column blog_overview has-border-color has-ast-global-color-5-border-color has-ast-global-color-6-background-color has-background is-layout-flow wp-container-core-column-is-layout-334757f1 wp-block-column-is-layout-flow\" style=\"border-width:12px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<p><strong>TL;DR <\/strong> :-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Discover how to optimize image caching in Flutter using Riverpod for improved app performance.&nbsp;<\/li>\n\n\n\n<li>Learn step-by-step techniques for manual caching, reducing network load, and enhancing UI smoothness without external libraries<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<p>When you build a Flutter application, images are often a vital part, and as a developer, you have to deal with them on a daily basis, whether you\u2019re building a product gallery, a social media feed, or a daily inspiration screen.<\/p>\n\n\n\n<p>But if you\u2019re not optimizing them, you\u2019ll be downloading these images from the internet every time, and your app will be slow and you\u2019ll use lots of data.<\/p>\n\n\n\n<p>This guide walks you through a practical way to cache images manually and manage them efficiently using Riverpod, Flutter\u2019s powerful state management tool.&nbsp;<\/p>\n\n\n\n<p>We\u2019ll skip external libraries and show how to achieve smooth, responsive image loading with tools already at your disposal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-who-this-is-for\"><span class=\"ez-toc-section\" id=\"Who_This_Is_For\"><\/span><strong><strong><strong><strong>Who This Is For<\/strong><\/strong><\/strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This guide is for Flutter developers dealing with network images. No matter if you are a new developer looking for ways to make a performant app, or an intermediate developer looking to power up a responsive, intelligent, cache-aware image gallery, this article will walk you through a set of tools and techniques for making your app more efficient and enjoyable for users.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-cache-images\"><span class=\"ez-toc-section\" id=\"Why_Cache_Images\"><\/span><strong><strong><strong><strong><strong>Why Cache Images?<\/strong><\/strong><\/strong><\/strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here\u2019s the thing: every time you request an image from a URL, you\u2019re essentially making a call out to the network. Imagine doing that every single time when the same image needs to be displayed.&nbsp;<\/p>\n\n\n\n<p>Doesn\u2019t make much sense, right? But here\u2019s where image caching saves the day.<\/p>\n\n\n\n<p>When you cache an image, you\u2019re saying to your app, \u201cRemember this one for the next time around.\u201d This means that when users scroll, navigate, and return to a screen, the app doesn\u2019t need to go back to the network to fetch the same image repeatedly. It\u2019s already there, ready and waiting.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-45c10ec9 wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-column hb-blog-cta hb-cta-blog-new is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left cta_button_banner has-ast-global-color-5-color has-text-color has-link-color wp-elements-2e7bbcd9b6b6f15bfd69956b09c52d2e\" style=\"padding-bottom:var(--wp--preset--spacing--40)\"><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><em><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><em><strong><strong><strong><strong>Struggling with Flutter projects? Let Us Handle It!<\/strong><\/strong><\/strong><\/strong><\/em><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/em><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n<p class=\"has-ast-global-color-5-color has-text-color has-link-color wp-elements-15e6e736d26507fe5bf980919e1cd18f\" style=\"padding-bottom:var(--wp--preset--spacing--50)\">Building efficient Flutter apps can be challenging. Don&#8217;t let slow performance hold you back. Hire Soft Suave\u2019s developers to take your app to the next level.<\/p>\n\n\n\n<div class=\"wp-block-buttons cta_btn is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-fc4fd283 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.softsuave.com\/contact\"><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>Hire Our Experts<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" data-id=\"19987\" src=\"https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/10805857_4478838__1_-removebg-preview-1-300x300.png\" alt=\"hire node.js developers\" class=\"wp-image-19987\" srcset=\"https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/10805857_4478838__1_-removebg-preview-1-300x300.png 300w, https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/10805857_4478838__1_-removebg-preview-1-150x150.png 150w, https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/10805857_4478838__1_-removebg-preview-1.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-key-benefits-of-image-caching\"><span class=\"ez-toc-section\" id=\"Key_Benefits_of_Image_Caching\"><\/span><strong><strong><strong>Key Benefits of Image Caching:<\/strong><\/strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>These are the main reasons why caching is vital<\/p>\n\n\n\n<p><strong>Performance Boost<\/strong>: Cached images load immediately from local storage. This speeds up rendering and provides a smoother &amp; faster experience..<\/p>\n\n\n\n<p><strong>Reduced Network Load<\/strong>: Your app saves bandwidth and makes fewer server requests by not having to download images again.<\/p>\n\n\n\n<p><strong>Smoother UI<\/strong>: With cached images, there&#8217;s no delay or flicker during loading. This ensures a seamless, uninterrupted user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tools-we-ll-use\"><span class=\"ez-toc-section\" id=\"Tools_Well_Use\"><\/span><strong><strong><strong><strong><strong>Tools We\u2019ll Use<\/strong><\/strong><\/strong><\/strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>These are the tools that we\u2019ll be using in this guide<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flutter<\/strong> \u2013 for UI and native image rendering<\/li>\n\n\n\n<li><strong>Riverpod<\/strong> \u2013 for reactive state management<\/li>\n\n\n\n<li><strong>Standard Dart APIs<\/strong> \u2013 to cache images manually in memory<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-by-step-process-to-cache-an-image-in-flutter-with-riverpod\"><span class=\"ez-toc-section\" id=\"Step-by-step_process_to_cache_an_image_in_Flutter_with_Riverpod\"><\/span><strong>Step-by-step process to cache an image in Flutter with Riverpod<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Take a look at the simple step-by-step process to cache images in Flutter with Riverpod<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Define_Your_Image_URL_Provider\"><\/span><strong>Step 1: Define Your Image URL Provider<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, create a simple StateNotifier to manage a list of image URLs:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter_riverpod\/flutter_riverpod.dart';\n\nfinal imageUrlsProvider = StateNotifierProvider&lt;ImageUrlNotifier, List&lt;String>>(\n\n\u00a0\u00a0(ref) => ImageUrlNotifier(),\n\n);\n\nclass ImageUrlNotifier extends StateNotifier&lt;List&lt;String>> {\n\n\u00a0\u00a0ImageUrlNotifier() : super(&#91;]);\n\n\u00a0\u00a0void addImage(String url) {\n\n\u00a0\u00a0\u00a0\u00a0state = &#91;...state, url];\n\n\u00a0\u00a0}\n\n\u00a0\u00a0void removeImage(String url) {\n\n\u00a0\u00a0\u00a0\u00a0state = state.where((img) => img != url).toList();\n\n\u00a0\u00a0}\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Implement_a_Basic_In-Memory_Cache\"><\/span><strong>Step 2: Implement a Basic In-Memory Cache<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We\u2019ll manually cache images using a Map&lt;String, Uint8List&gt; to avoid re-fetching the same image.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>final imageCacheProvider = Provider&lt;ImageCacheManager>((ref) {\n\n\u00a0\u00a0return ImageCacheManager();\n\n});\n\nclass ImageCacheManager {\n\n\u00a0\u00a0final _cache = &lt;String, Uint8List>{};\n\n\u00a0\u00a0Future&lt;Uint8List> getImageBytes(String url) async {\n\n\u00a0\u00a0\u00a0\u00a0if (_cache.containsKey(url)) return _cache&#91;url]!;\n\n\u00a0\u00a0\u00a0\u00a0final response = await NetworkAssetBundle(Uri.parse(url)).load(url);\n\n\u00a0\u00a0\u00a0\u00a0final bytes = response.buffer.asUint8List();\n\n\u00a0\u00a0\u00a0\u00a0_cache&#91;url] = bytes;\n\n\u00a0\u00a0\u00a0\u00a0return bytes;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0void clearCache() {\n\n\u00a0\u00a0\u00a0\u00a0_cache.clear();\n\n\u00a0\u00a0}\n\n\u00a0\u00a0void removeImage(String url) {\n\n\u00a0\u00a0\u00a0\u00a0_cache.remove(url);\n\n\u00a0\u00a0}\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Build_the_Image_Gallery_Widget\"><\/span><strong>Step 3: Build the Image Gallery Widget<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Use <mark style=\"background-color:rgba(0, 0, 0, 0);color:#00d084\" class=\"has-inline-color\">Image.memory()<\/mark> instead of <mark style=\"background-color:rgba(0, 0, 0, 0);color:#00d084\" class=\"has-inline-color\">Image.network()<\/mark> for cached image data:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\n\nimport 'package:flutter_riverpod\/flutter_riverpod.dart';\n\nclass ImageGallery extends ConsumerWidget {\n\n\u00a0\u00a0const ImageGallery({Key? key}) : super(key: key);\n\n\u00a0\u00a0@override\n\n\u00a0\u00a0Widget build(BuildContext context, WidgetRef ref) {\n\n\u00a0\u00a0\u00a0\u00a0final imageUrls = ref.watch(imageUrlsProvider);\n\n\u00a0\u00a0\u00a0\u00a0final cacheManager = ref.watch(imageCacheProvider);\n\n\u00a0\u00a0\u00a0\u00a0return ListView.builder(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemCount: imageUrls.length,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0itemBuilder: (context, index) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0final url = imageUrls&#91;index];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return FutureBuilder&lt;Uint8List>(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0future: cacheManager.getImageBytes(url),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0builder: (context, snapshot) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (snapshot.connectionState == ConnectionState.waiting) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return const Padding(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: EdgeInsets.all(16),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Center(child: CircularProgressIndicator()),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (snapshot.hasError || !snapshot.hasData) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return const Icon(Icons.error);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Padding(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: const EdgeInsets.all(8.0),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Image.memory(snapshot.data!),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0}\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Add_Images_Dynamically\"><\/span><strong>Step 4: Add Images Dynamically<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Add a new image URL to the list using a simple button:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ElevatedButton(\n\n\u00a0\u00a0onPressed: () {\n\n\u00a0\u00a0\u00a0\u00a0ref.read(imageUrlsProvider.notifier).addImage(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'https:\/\/example.com\/newimage.jpg',\n\n\u00a0\u00a0\u00a0\u00a0);\n\n\u00a0\u00a0},\n\n\u00a0\u00a0child: const Text(\"Add Image\"),\n\n)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Manual_Cache_Control\"><\/span><strong>Step 5: Manual Cache Control<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can expose cache management buttons (optional):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ElevatedButton(\n\n\u00a0\u00a0onPressed: () {\n\n\u00a0\u00a0\u00a0\u00a0ref.read(imageCacheProvider).clearCache();\u00a0\n\n\/\/\/(or we can remove a single Image using ref.read(imageCacheProvider).removeImage('https:\/\/example.com\/image.jpg');)\n\n\u00a0\u00a0},\n\n\u00a0\u00a0child: const Text(\"Clear All Cached Images\"),\n\n),<\/code><\/pre>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-45c10ec9 wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-column hb-blog-cta hb-cta-blog-new is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left cta_button_banner has-ast-global-color-5-color has-text-color has-link-color wp-elements-99dcca7c41605cceeac50ce768b1e786\" style=\"padding-bottom:var(--wp--preset--spacing--40)\"><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><em><strong><strong><strong>Supercharge Your Flutter App&#8217;s Performance with Professional Help<\/strong><\/strong><\/strong><\/em><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n<p class=\"has-ast-global-color-5-color has-text-color has-link-color wp-elements-f5ecd0c9e045d5647d92619f13e800a7\" style=\"padding-bottom:var(--wp--preset--spacing--50)\">Hire Soft Suave\u2019s team to improve your app\u2019s performance and create high-quality solutions tailored to your needs.<\/p>\n\n\n\n<div class=\"wp-block-buttons cta_btn is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-fc4fd283 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.softsuave.com\/contact\"><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>Get Expert Help<\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"225\" data-id=\"19959\" src=\"https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/images__4_-removebg-preview.png\" alt=\"best app development companies 100% Turn on screen reader supportTo enable screen reader support, press Ctrl+Alt+Z To learn about keyboard shortcuts, press Ctrl+slash unlocked-suggestion-icon They deal with disaster relief, environmental protection, and healthcare apps that benefit millions of people around the world mceihmltn. uphook-message-icon\" class=\"wp-image-19959\" srcset=\"https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/images__4_-removebg-preview.png 225w, https:\/\/www.softsuave.com\/blog\/wp-content\/uploads\/2025\/03\/images__4_-removebg-preview-150x150.png 150w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-advantages-of-using-riverpod\"><span class=\"ez-toc-section\" id=\"Advantages_of_Using_Riverpod\"><\/span><strong><strong><strong><strong>Advantages of Using Riverpod<\/strong><\/strong><\/strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>These are the advantages of using Riverpod for caching images<\/p>\n\n\n\n<p><strong>Scoped Memory Usage<\/strong>: Riverpod manages memory efficiently and prevents unnecessary memory usage. It keeps state alive only as long as necessary.<\/p>\n\n\n\n<p><strong>Separation of Concerns<\/strong>: Riverpod makes sure that state management is isolated from UI logic, which results in a clean and maintainable app.<\/p>\n\n\n\n<p><strong>Testability<\/strong>: Riverpod\u2019s architecture makes it easy to mock providers, which means you can easily unit test your code without relying on an overly complex UI.<\/p>\n\n\n\n<p><strong>Reactivity<\/strong>: Riverpod uses a reactive model, so your app only updates when it has to, boosting performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-final-result\"><span class=\"ez-toc-section\" id=\"Final_Result\"><\/span><strong>Final Result<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>With this approach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Images are downloaded once and stored in memory<\/li>\n\n\n\n<li>They are rendered instantly once cached<\/li>\n\n\n\n<li>You can dynamically add\/remove images<\/li>\n\n\n\n<li>No external packages are needed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>While Flutter packages like cached_network_image offer automatic solutions, building your own image caching logic gives you more control and understanding of how caching works.<\/p>\n\n\n\n<p>Using <strong>Riverpod for reactive state<\/strong> and <strong>in-memory storage for image bytes<\/strong>, this guide showed you how to cache images without plugins, dynamically manage image state, and keep your UI fast and clean.<\/p>\n\n\n\n<p>Want persistent disk caching? You could extend this with path_provider and file storage. But for most use cases, in-memory caching gives a significant performance win.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR :- When you build a Flutter application, images are often a vital part, and as a developer, you have to deal with them on a daily basis, whether you\u2019re building a product gallery, a social media feed, or a daily inspiration screen. But if you\u2019re not optimizing them, you\u2019ll be downloading these images from [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":22148,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[92],"tags":[],"class_list":["post-22131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-solutions"],"_links":{"self":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts\/22131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/comments?post=22131"}],"version-history":[{"count":0,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts\/22131\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/media\/22148"}],"wp:attachment":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/media?parent=22131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/categories?post=22131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/tags?post=22131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}