Skip to content

Of course. To conclude our Flutter series, we'll look at an aspect that is often overlooked until the last minute but directly impacts the user experience before they even open the app: the installation file size (App Size).


Flutter Series Finale: Optimizing Assets

Scenario 📝

  • System: A Flutter application that is feature-complete.
  • Problem: The installation file (.apk for Android, .ipa for iOS) is too large. This not only discourages users from downloading it (especially on mobile data) but also takes up significant space on their devices.

Analyzing the Bottleneck: Unoptimized Assets

1. Icon Font Bloat

  • Problem: You import a large icon font set (e.g., Font Awesome) but only use about 20 icons out of the thousands available. However, the entire font file (.ttf), which can be several hundred kilobytes, is still packaged into your app.
  • Solution: "Tree Shaking" for Icons.
    • Flutter has a built-in icon tree shaking mechanism. When you build in release mode (flutter build apk --tree-shake-icons), the build tool analyzes your code and creates a new font file containing only the icons you actually use.
    • Note: This works best for icons referenced as constants (const Icon(Icons.home)).

2. Uncompressed and Improperly Sized Images

  • Problem: The assets/images directory contains original, high-resolution, uncompressed .png and .jpg files directly from the designer.
  • Solution:
    1. Compress Images: Use tools like ImageOptim or online services like TinyPNG to reduce file size without significant quality loss before adding them to the project.
    2. Use Modern Formats: Consider using WebP, a format that offers comparable quality at a much smaller file size than PNG/JPEG.
    3. Provide Asset Variants: Flutter allows you to create subdirectories like 2.0x, 3.0x. Place different resolution versions of your images there. Flutter will automatically select the appropriate image file for the device's screen density, saving memory at runtime.

3. Unused Assets

  • Problem: Over time, a project might accumulate old images, JSON files, or fonts that are no longer used, but the developer forgot to delete them. Everything declared in pubspec.yaml will be packaged into the app.
  • Solution: Periodically review and clean up the assets directory and the pubspec.yaml file. There are tools available that can help you scan your project for unused assets.

Verification Tool

Flutter provides an excellent tool for analyzing your app's size.

bash
flutter build apk --analyze-size
# Or for iOS:
# flutter build ipa --analyze-size

This command will build the app and open an interactive web page, showing in detail which files and packages are taking up the most space, helping you pinpoint the exact "culprits."


Final Words for the Entire Series

We've come a long way, from optimizing individual database queries, through backend architecture in ASP.NET, and finally to techniques for making a Flutter app run smoothly and lightly.

The core principles remain the same:

  1. Don't optimize prematurely.
  2. Always measure to find the real bottleneck.
  3. Apply the right solution to the right problem.

Thank you for your persistence and eagerness to learn. With this toolkit of knowledge, you are now equipped to build applications that are not only great in features but also excellent in performance. Good luck!