Flutter - 11. Image Caching

Flutter - 10. Penguin Image App Example 2: Loading from the Internet

We've finally reached the last session of this series.

Last time, we loaded an image fetched from the internet.

If you communicate over the internet every time you view an image, you waste unnecessary computing resources, which can drain the battery faster or cause the application to lag.

So let's store images in memory once they've been loaded and reuse them whenever needed to reduce unnecessary resource waste.

![](

4qsLzjKP8ptBSC7FBUg.jwE11zgCFiHPv-X-tzfnK-Ou6ytuyYkmC7TehoE9zJog.PNG.cdw0424/image.png?type=w966)

Search for the relevant term, find the resource you want, and read the documentation.

![](

amedG8zBhQ7ZnWd6nQg.JATQEI12LhbJEWnm407PfryLYCPRjv2I0ARkDg2_sZEg.PNG.cdw0424/image.png?type=w966)

You can even find code with placeholders.

The approach looks pretty straightforward, so let's apply it right away.

![](

ZQjgPo5Ru3fdFDlTC0g.WXCEI4gzaYV3BZtsTCO_mGRgONqHFG0j5fcWSiCEtNog.PNG.cdw0424/image.png?type=w966)

Let's delete the code that previously fetched images via network communication.

![](

Bq7_qXfMXZzjqpXVlQg.xEVrqkaaQ1jg4cyiIkh9XUioviFA2FCXkbAA-h21nUgg.PNG.cdw0424/image.png?type=w966)

If you write the example code as-is, IntelliSense won't respond.

![](

TIz-vRaO8647hl2TAQg.hTP1-636NTulk35F6PwGREAzYSxI0TqwWZLagucZH_Ug.PNG.cdw0424/image.png?type=w966)

Reading the docs again, it says to import the package.

Click the package name to navigate to the link.

![](

zLrXhYieEAhjsN-pRwg.4gap-iMvIOu6-8-wV8k-qa-2xT9T4l-5afHCr8A965Eg.PNG.cdw0424/image.png?type=w966)

Here you can see the package name and various information.

![](

ghcV1e2ATmXm4Dkq6Mg.DFwSYV7Acu2Y4PUGQ5H0g6Hb5x0gBaRJM3KlI6qfi_Ug.PNG.cdw0424/image.png?type=w966)

Find the dependencies section in the pubspec.yaml file and enter "package_name: version" below it.

![](

1VXmJielKYedFqgPucg.gEy3dyGmCgOJQLv7PKkBb7mEDXe1lf0_Eo43yMJZu2wg.PNG.cdw0424/image.png?type=w966)

Click the "Get dependencies" button.

The ^ symbol before the version means it allows versions after the last part of that version. So you can use 2.1.0 or 2.1.1 without dependency issues.

![](

Kt3RvFfQdwnBQY2zqgg.YVZrjdv-zuYpD1CuYTW-Gewc2OHZUEWaqaa4cuOepfwg.PNG.cdw0424/image.png?type=w966)

Now go back to main.dart and add the package. Just type "cache" and it should auto-complete.

Find the file with the same name as the one you added and select the one ending in .dart.

![](

oXYtPkQ3fY2wRWt-pUg.semEDle4l2ghiCIZcg_o6YzZRX4UJmJfPXhH_O9QHhAg.PNG.cdw0424/image.png?type=w966)

Now when you write it again, you can confirm it works correctly.

![](

t5OHa6wBhBKaa0U5z8g.clrFxYBqJ29RQlsYGarMErqeQrx_HEmPHbxEQw4R1sUg.PNG.cdw0424/image.png?type=w966)

Create a placeholder as shown in the example and use the image that was pre-written and stored in a variable.

Then you can see the penguin image loading without internet in between.