A good mobile application requires fast data loading, optimal performance. That is a must-have condition if you want users to have the best experience ..
.. In this article we also go into learn the Progressive Image Loading technique that most of the web today use.
Progressive Image Loading techniques
To see how images are loaded using progressive technique see the video below
1. First, the app will load an image from assets to display.
2. Then will load 1 thumbnail version (thumbnail) of the image, this image has a very small size of about 1-10kb. so this image loads very quickly
3. Once the thumbnail has loaded, the original image will be loaded for display
How to do it on the flutter
1. Add package
Go to the link https://pub.dev/packages/progressive_image/instal . to add the latest package
2. Add placeholder image to assets.
Visit https://bit.ly/34Kxhbo to load placeholder images and add them to the project as shown below. If you don’t have an assets folder, create a new one.
After adding an image to assets, let’s go to the file pubspec.yaml to add a path to access the assets. If you do not know about assets in flutter, please refer to https://flutter.dev/docs/development/ui/assets-and-images .
Run the command pub get to update changes
flutter pub get
3. Start coding
1 2 3 4 5 6 7 8 | ProgressiveImage( placeholder: AssetImage('assets/placeholder.jpg'), thumbnail: NetworkImage('https://i.imgur.com/7XL923M.jpg'), image: NetworkImage('https://i.imgur.com/xVS07vQ.jpg'), height: 300, width: 500, ), |
Quite simple is not it
Source code