Flutter Widget Guide — FadeInImage Widget in 5 mins or less.

This is Part 14 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.

Click here to ⏬ the App available on Google Play Store. 📱

My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.

Showing an image along with text content is always a better option as it enriches the overall content of your application. But when the images are being downloaded from a network and displayed abruptly while scrolling or navigating then it leads to bad user experience. The images must load in place of something like a placeholder image and once available, should replace the placeholder image as smoothly as possible.

Flutter has an interesting widget for this problem.

FadeInImage Widget

1 | What?

This widget will let you place a placeholder image in the view while you wait for the image to download. All you have to do is specify a placeholder image and the image URL to it and you are done. The placeholder image is replaced by the downloaded image with a smooth animation.

2 | Wondering how it works?

Have a look at the Code snippet below.

Below is the visual representation of the code above.

3 | Explanation

In the above example, you’ll notice that we are using FadeInImage widget to fetch an image from the network. The dimensions of the image are provided along with the placeholder image. Here, I have used transparent_image package (add this to your pubspec.yaml file — transparent_image: ^1.0.0) that lets you provide a transparent image as your placeholder instead of an image. You can use an image from your assets folder as well (eg assets/placeholder.png). The fadeInDuration property helps us to specify the duration of the fade animation. You can provide an animation curve via fadeInCurve property (eg Curves.bounceIn).

Here I am clearing up the image cache by using painting.imageCache.clear(); when the user presses the back button. I am doing this so that the image loads every time you come back to the screen. Wrap the body with WillPopScope to detect if the user has pressed the back button.

Flutter Widget Guide — SliverGrid Widget in 5 mins or less.

Previous 👆

Up next 👇

Flutter Widget Guide — StreamBuilder Widget in 5 mins or less.

How many claps does this article deserve?

If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.

Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop an e-mail at annsh29@gmail.com as well.

See more in the series:

Flutter Widget Guide — Index

Have a wonderful day 🙂

Flutter Community (@FlutterComm) | Twitter