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.

Photo by Mingwei Lim on Unsplash

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 and pmatatias.png
• in my pubspec.ymal file only specifies one folder of assets.

Preview pubspec.yaml and assets directory

if I check the properties of the directory, it has 6.15MB of total size.

Folder assets properties

Here I try to run flutter build apk --split-per-abi in my terminal. And the result is 13.1MB

Results compiled before specified.

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

Only specify the assets used

and try to compile again in my terminal: And BOOOOMMMMM…!!!!!

The result compiled after specified

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:

GPT respond-1.

❌ 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.

all files are used.

✔️️️️✔️️️️✔️️️️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)