Skip to main content

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"

Example: Building for a Specific Flavor

flutter build apk --flavor dev
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.

Example: Building for Release

flutter build release

Example: Building with Profile Mode

flutter build profile

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

Example: Setting Build Numbers in pubspec.yaml

flutter:
  version: 1.0.0
  build-number: 1
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

Example: Checking App Size

flutter build release --verbose
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.

Example: Removing Unused Assets

flutter pub run flutter_asset_optimizer
Note: Always verify that assets are truly unused before deletion to avoid runtime errors.

Was this article helpful?