Configuring App Releases
1. Creating App Icons
| Icon Type | Size | Usage | Notes |
|---|---|---|---|
| ic_launcher | 48x48 |
Android | Used for app icon on Android devices |
| ic_launcher_round | 48x48 |
Android | Rounded app icon for Android devices |
| AppIcon | 1024x1024 |
iOS | Used for app icon on iOS devices |
| AppIcon-180 | 180x180 |
iOS | Used for app icon on iOS devices (iPhone) |
| AppIcon-167 | 167x167 |
iOS | Used for app icon on iOS devices (iPad) |
| AppIcon-152 | 152x152 |
iOS | Used for app icon on iOS devices (iPad) |
| AppIcon-120 | 120x120 |
iOS | Used for app icon on iOS devices (iPhone) |
| AppIcon-76 | 76x76 |
iOS | Used for app icon on iOS devices (iPad) |
| AppIcon-57 | 57x57 |
iOS | Used for app icon on iOS devices (iPhone) |
| AppIcon-58 | 58x58 |
iOS | Used for app icon on iOS devices (iPhone) |
| AppIcon-60 | 60x60 |
iOS | Used for app icon on iOS devices (iPhone) |
| AppIcon-72 | 72x72 |
iOS | Used for app icon on iOS devices (iPad) |
| AppIcon-1024 | 1024x1024 |
iOS | Used for app icon on iOS devices (App Store) |
Example: Adding Icons to Flutter Project
flutter:
uses-material-design: true
assets:
- assets/images/
icons:
android: ic_launcher
ios: AppIcon
2. Creating Splash Screens
Splash screens in Flutter are typically implemented using the flutter_native_splash package or by manually creating a splash screen widget that is displayed while the app initializes.
Example: Using flutter_native_splash
# pubspec.yaml
dependencies:
flutter_native_splash: ^2.3.1
dev_dependencies:
flutter_launcher_icons: ^0.13.1
Example: Configuration in pubspec.yaml
flutter_native_splash:
color: "#42a5f5"
image: assets/splash.png
android: true
ios: true
| Property | Description | Values |
|---|---|---|
| color | Background color of the splash screen | #42a5f5 |
| image | Image asset to display in the center of the splash screen | assets/splash.png |
| android | Whether to generate splash screen for Android | true or false |
| ios | Whether to generate splash screen for iOS | true or false |
Note: The splash screen is shown while the app initializes. It's important to keep the image size small to reduce load time.
3. Configuring App Names
| Property | Value | Description |
|---|---|---|
| name | my_flutter_app |
Display name of the app shown to users |
| description | A new Flutter project. |
Short description of the app |
| version | 1.0.0 |
App version string (semantic versioning) |
| platforms.android.appName | MyApp |
Android app name in build configuration |
| platforms.ios.bundleIdentifier | com.example.myFlutterApp |
Unique identifier for iOS app in App Store |
Example: pubspec.yaml configuration
name: my_flutter_app
description: A new Flutter project.
version: 1.0.0
flutter:
uses-material-design: true
# Android app name override
android:
app_name: MyApp
Note: For iOS, the bundle identifier must be unique across all apps in the App Store and is managed via Xcode or
Info.plist.4. Setting App Versions
| Field | Value | Description |
|---|---|---|
| version | 1.0.0+1 |
App version in format major.minor.patch+build. The build number is optional. |
| buildNumber | 1 |
Build number, used for app store submission. Must be an integer. |
Example: pubspec.yaml configuration
name: my_flutter_app
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: "^3.0.0"
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
Note: The
version field in pubspec.yaml is used by Flutter to set the app version for both Android and iOS builds.5. Creating Flavors
| Flavor | Description | Usage |
|---|---|---|
| dev | Development environment with debug features | For local testing and debugging |
| staging | Pre-production environment for testing | For QA and user acceptance testing |
| prod | Production environment with optimizations | For end-user release |
Example: Flavor Configuration in pubspec.yaml
flutter:
uses-material-design: true
flavor_config:
flavor: dev
flavors:
dev:
app_name: "MyApp Dev"
package_name: "com.example.myapp.dev"
staging:
app_name: "MyApp Staging"
package_name: "com.example.myapp.staging"
prod:
app_name: "MyApp"
package_name: "com.example.myapp"
Note: Flavor configuration requires setup in
build.gradle and Info.plist for Android and iOS respectively.
6. Using Build Modes
| Mode | Description | Flags | Use Case |
|---|---|---|---|
| debug | Builds the app with debugging enabled and full logging. | --debug |
Development and testing with full diagnostics. |
| release | Builds the app with optimizations and no debug symbols. | --release |
Production deployment with optimized performance. |
| profile | Builds the app with performance profiling enabled. | --profile |
Performance analysis and optimization. |
7. Configuring Build Numbers
| Property | Value | Description |
|---|---|---|
| android.versionCode | 1 |
Unique integer for Android app versioning |
| ios.buildNumber | 1 |
Build number for iOS app versioning |
| flutter.versionCode | 1 |
Build number for Flutter app versioning |
Note: Build numbers must be incremented for each release to ensure app stores recognize the update.
8. Analyzing App Size
| Tool | Description | Usage |
|---|---|---|
| flutter build | Builds the app for release with size optimizations | flutter build release |
| flutter analyze | Analyses code for potential issues including size bloat | flutter analyze |
| flutter pub get | Fetches dependencies that may increase app size | flutter pub get |
Note: Use
flutter build release to generate a release build and analyze the size of the resulting APK or IPA.
Warning: Including large assets or unnecessary dependencies can significantly increase app size.
| Asset Type | Size Impact | Recommendation |
|---|---|---|
| Images | High | Use WebP or PNG with compression |
| Fonts | Medium | Use only necessary font weights |
| Dependencies | High | Remove unused packages |
9. Using Deferred Loading
Deferred loading in Flutter allows you to defer loading parts of your app until they are needed, reducing initial app size and improving startup time.
| Property | Description | Values |
|---|---|---|
| deferredLoading | Enables or disables deferred loading for a module | true / false |
| modulePath | Path to the deferred module | lib/modules/my_module.dart |
Example: Deferring a Module
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Deferred Loading Example')),
body: Center(
child: ElevatedButton(
onPressed: () async {
// Load the deferred module
await loadModule('my_module');
},
child: Text('Load Module'),
),
),
),
);
}
}
// Function to load the deferred module
Future<void> loadModule(String moduleName) async {
// This will only load the module when called
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DeferredModule(),
),
);
}
Note: Deferred loading is particularly useful for large apps where certain features or modules are not needed immediately upon startup. It helps in reducing the initial app size and improving load times.
10. Removing Unused Resources
| Resource Type | Description | Action |
|---|---|---|
| Images | Unused image assets increase app size and download time. | Use flutter pub run flutter_launcher_icons to manage icons and remove unused assets. |
| Strings | Untranslated or unused strings in localization files. | Remove unused keys from intl or flutter_localizations files. |
| Assets | Any asset not referenced in code or configuration. | Use flutter pub run flutter_asset_optimizer to identify and remove unused assets. |
Note: Always verify that assets are truly unused before deletion to avoid runtime errors.