Simple, But I Didn't Notice Handling Asset Files in Flutter
Ensure precise asset management for efficient APK size reduction and well-organized maintenance of your pubspec.yaml file.
Lately, I’ve been working on one of my old Flutter projects. The application was used by several users about a year ago. I want to add some features to it and then build and release a new version of the app. But then I was curious, compared to my other Flutter apps, why does this one have a very large APK size?
There are many reasons why the APK size increases. To reduce the size of my APK, I have made some suggestions from the internet:
- ✅ Remove and reduce unused packages and plugins from my
pubspec.ymal
file. - ✅
flutter clean
before creating the APK bundle - ✅and dividing it with
--split-per-abi
But still no luck, my bundle seems too big for a simple app. 😕 😕
After some debugging and surfing the internet, I finally found the main problem. I don’t manage my assets directory and don’t specify it in my pubspec.ymal
file.
This is the main issue:
flutter:
assets:
- assets/
My mistake was placing all used and unused files in one assets directory. Also, register that folder in ymal
file without specifying the files (like in the example above). This means that all files will be compiled as part of the app.
To prove it, let's do some demo here:
Compile without specifying assets.
- I have the Flutter project below. And I just added some random files to my assets folder. The image with the green text name is the unused image. I only use 2 images in my project:
mediumnotif.jpg
andpmatatias.png
- in my
pubspec.ymal
file only specifies one folder of assets.
if I check the properties of the directory, it has 6.15MB of total size.
Here I try to run flutter build apk --split-per-abi
in my terminal. And the result is 13.1MB
Compile and specify the assets.
No need to delete the file from the asset's directory. All we need to do is, by specifying which one we need to include in the app.
- Here I updated my
pubspec.ymal
and try to compile again in my terminal: And BOOOOMMMMM…!!!!!
It's now only 7.4MB, which means it has reduced by about 6MB from the beginning. Now only 2 images are included in the APK bundle.
Problem SOLVED!!! 😃
From that issue, I also learned other things from this case:
What if I have much used files. Like more than 10 files. Or maybe I want to separate my files into different directory for better file management?
Well, in my flutter project, I’m separating my assets into some directories. Honestly, at the beginning, I'm asking on chat GPT how to specify nested directory assets in my Flutter project.
❌❌❌ And I got the WRONG answer:
❌ it says that we just need to specify the top-level directory. As we can see in the picture above, says that all the files in the subdirectory of images will be included ❌
How the correct way to specify a nested directory asset?
Based on this Flutter Documentation, we need to specify all subdirectories. Let’s have an example:
Assume that I will use all the files in this asset.
✔️️️️✔️️️️✔️️️️So, in my pubspec.ymal
file will be like this:
flutter:
assets:
- assets/ # this will ONLY iclude: pmatatias.png and mediumnotif.jpg
- assets/dashboard/ # this wiil include 3 images in it.
- assets/project/
- assets/task/ # this will NOT Include anything. since doesnt have file, and only directory
# thats why we need to specify the graph and menu below
- assets/task/graph/
- assets/task/menu/
Note: Only files located directly in the directory are included. To add files located in subdirectories, create an entry per directory. [readmore here]
we can analyze the size of the Flutter application by using this command:
flutter build apk --release --analyze-size --target-platform=android-arm
That is all that I’ve learned lately about handling assets in Flutter. Hope you learn something new too. If you find any mistakes in this blog, please tag me in the comment section, so I can learn new knowledge about flutter.
🙏Thank you for having the end. Don’t forget to clap 👏 if you like this article. 😃
Reach me out on X: Matatias Situmorang💙 (@pmatatias_) / X (twitter.com)