A Solution for flutter large APK
If the app size is large, Users often avoid downloading applications from the store. So it is important to reduce the application download size, which force more users to download your application. When a user goes to play store or app store to install an application, The first thing which the user is doing is spying on the application description to find the application size. It is common for me also. Therefore as developers, we should have to find a practical solution for this problem. So from this tutorial, I’m going to discuss a common problem for all the flutter developers.
What is the problem?
Looking at the above image, it says assets were taken over 69% of APK size. APK is a compressed file of the application. But the blind truth is when building the APK, the images will not getting compressed. So assets are getting large capacity from the APK. So if we can find a proper solution for this problem we can save the size which was taken by the assets.
AssetImage() vs NetworkImage()
There are two main ways that we can add image content to our flutter applications. Those are AssetImage() and NetworkImage(). But the thing is both of them are having disadvantages. So to determine the disadvantages of those two widgets, I did an experiment using both two.
I created two projects, One application was created using AssetImage(), And the other project was built using NetworkImage(). As to my experiment the results are as follows.
So let's discuss the solution.
Solution (Cached network image)
cached_network_image is a package that is compatible with flutter on both android and IOS as well. The package solves the issue by using both AssetImage() and NetworkImage() concepts. So this can be named as a combination of both two widgets. Because once you run an application that uses a cached network image package, it will download the assets in the first run and keep the in the device cache directory. and hereafter the images will be loaded from the cached memory of your device. So this package will solve the disadvantages of both AssetImage() and NetworkImage(). Below will be a sample APK description which I built using AssetImage() andCachedNetworkImage().
- Details of the APK built using
AssetImage()
2. Details of the APK built using CachedNetworkImage().
From the above attachments, You can understand the importance of the CachedNetworkImage(). Let’s see how to use the package.
How to use cachedNetworkImage() ?
Step 1: Add the package version to the .yaml file
Add the latest version of the package to the .yaml file. You can find the latest version from the package installation guide.
Step 2: Install the package to your project
$ flutter pub get
You should have to enter the above command or if you are using Visual Studio Code then there's an option on the top right corner as Get Packages. Hit on the button. so you can install the package.
Step 3: Import to your codebase
Now you can import the package to your .dart file. Then you are able to use cached_network_image() widget in your code.
Step 4: Usage
Call the above simple code line instead of AssetImage() or NetworkImage().
And also cached network image package is coming up with multiple properties. Let’s see what are those.
Main Properties of CachedNetworkImage() widget.
cacheManager: It’s an option to use a cache manager with other settings.
imageUrl: The target image displayed.
imageBuilder: Optional builder to further customize the display of the image.
placeholder: Widget displays till the target is loading.
errorWidget: The duration of the fade-in animation for the placeholder
progressIndicatorBuilder: Widget displayed while the target failed to load.
colorBlendMode: Target the interpolation quality for image scaling.
Those are main properties of the widget. And there are some sub widgets as well. You can find those from the cached_network_image() package documentation
Finally here is the source code for today tutorial. and also you can download an app that used the advantage of the cached_network_image package.