Whether you’re developing a new Flutter app or looking to optimize an existing one, the insights shared in this article will equip you with the knowledge to make informed decisions about app size reduction. A smaller app size not only improves the user experience but also increases the likelihood of successful downloads and installations. Let's dive into the key strategies to minimize your Flutter app's size effectively.
Understanding App Size
Download Size vs. Install Size
App size consists of two main components:
- Download Size: The size of the app when it's downloaded from the Play Store.
- Install Size: The size of the app after it's installed and unpacked on a device, which can be significantly larger than the download size.
A large app can deter users from downloading due to longer wait times and higher data usage. Therefore, reducing app size is crucial for better distribution and user retention.
Tips for Reducing Flutter App Size
1. Use SVG or WEBP for Icons and Vector Images
Instead of using PNGs or JPEGs, consider SVGs (Scalable Vector Graphics) for icons and vector images. SVGs are vector-based, which means they are scalable without losing quality and occupy less space. Alternatively, use WEBP format, which is about 25% smaller than JPG/PNG without compromising quality.
2. Implement Caching
While caching doesn’t reduce the app size, it significantly improves performance by loading frequently used images faster. Use the cached_network_image plugin to cache images and display placeholders while they load:
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/200x150",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(Colors.red, BlendMode.colorBurn),
),
),
),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
3. Shake Your Icons
Flutter allows you to remove unused icons from the Material, Cupertino, and FontAwesome fonts to reduce size. For Android, set the tree-shake-icons property in gradle.properties. For iOS, set the TREE_SHAKE_ICONS environment variable.
4. Compress Your Assets
Compress all image assets, including SVG and WEBP files. Use tools like pngquant, zopflipng, or pngcrush for PNGs, and guetzli or packJPG for JPEGs. For a free online resource, visit compresspng.com.
For language files, you can compress and decompress JSON data:
final String response = await rootBundle.loadString('assets/en_us.json');
List<int> original = utf8.encode(response);
List<int> compressed = gzip.encode(original);
List<int> decompress = gzip.decode(compressed);
final enUS = utf8.decode(decompress);
5. Use Proguard Rules
Proguard optimizes your code by removing unused Java code and making it more compact. Add the following to your android/app/build.gradle:
android {
buildTypes {
getByName("release") {
minifyEnabled = true
shrinkResources = true
proguardFiles(
getDefaultProguardFile("proguard-android-optimize.txt"),
"proguard-rules.pro"
)
}
}
}
In android/app/proguard-rules.pro:
## Flutter wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.** { *; }
-keep class io.flutter.util.** { *; }
-keep class io.flutter.view.** { *; }
-keep class io.flutter.** { *; }
-keep class io.flutter.plugins.** { *; }
-dontwarn io.flutter.embedding.**
-ignorewarnings
6. Obfuscate Your Code
Obfuscation reduces app size and enhances security. For Android, add the following to android/gradle.properties:
extra-gen-snapshot-options=--obfuscate
For iOS, follow the instructions here.
7. Use Google Fonts
The google_fonts package dynamically downloads fonts when used, reducing the need to bundle multiple font variations within your app.
8. Utilize DevTools
Flutter's DevTools offer a visual representation of app performance, network, memory, and CPU usage. Use it to identify and address size issues:
flutter pub global activate devtools
flutter pub global run devtools - appSizeBase=apk-code-size-analysis_01.json
9. Enable Aggressive Optimizations
Enable more aggressive code optimizations in android/gradle.properties:
android.enableR8.fullMode=true
10. Compress Native Libraries
To reduce download and device storage size, enable native library compression:
android.bundle.enableUncompressedNativeLibs=true
11. Split Bundle (for Android)
Split the APK per ABI to reduce the size of the download for specific device architectures:
flutter build apk --split-per-abi
12. Use Deferred Components
Flutter allows apps to download additional Dart code and assets at runtime, reducing initial install size. This feature lets users download features as needed.
13. Detect and Remove Heavy Packages
Analyze your app’s size and remove heavy or unused packages:
flutter build appbundle --target-platform android-arm64 --analyze-size
flutter build apk --target-platform android-arm64 --analyze-size
flutter build ios --analyze-size
14. Use Specific Libraries
Review your pubspec.yaml and remove any unused libraries or assets. Be mindful of the size of third-party packages.
15. Always Update Flutter
Keep your Flutter SDK and dependencies updated to leverage the latest optimizations and improvements. Flutter frequently introduces updates that enhance performance and reduce app size.
Conclusion
Reducing your Flutter app size is a crucial step in optimizing user experience and maximizing reach. By following these strategies, you can ensure that your app is lightweight, efficient, and appealing to users. Stay updated with the latest Flutter developments to continually improve your app’s performance and size. Happy coding!