App Assets Configuration

Proper branding is essential for a professional mobile application. This guide covers how to generate high-quality app icons and splash screens using the provided Figma template and automated tools.

Figma Template

To ensure your assets match the exact specifications for both iOS and Android, use our matching Figma community template:

Expo & Flutter App Icon & Splash Spec V2

How to use the template:

1. Duplicate the file to your Figma account.
2. Replace the placeholder logos with your own brand assets in the designated frames.
3. Export the frames as PNGs using the pre-configured export settings.

App Icons

We use the flutter_launcher_icons package to automate the generation of app icons for all platforms.

1. Prepare your assets

From the Figma template, export the following:

• adaptive-icon-foreground.png: The foreground image for Android adaptive icons.
• adaptive-icon-background.png (or a color): The background for Android adaptive icons.
• launcher_icon.png: The standard icon for iOS and legacy Android.

Place these in the mobile/flutter/assets/icon/ directory.

2. Configure flutter_launcher_icons.yaml

Ensure your configuration file reflects your exported paths:

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/launcher_icon.png"
  adaptive_icon_background: "assets/icon/adaptive-icon-background.png" # Or a hex color like "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/adaptive-icon-foreground.png"

3. Generate Icons

Run the following command from the mobile/flutter directory:

flutter pub run flutter_launcher_icons

Splash Screen

We use the flutter_native_splash package to create native splash screens that appear immediately when the app is launched.

1. Prepare your assets

From the Figma template, export:

• splash.png: The central logo for the splash screen.
• splash12.png: The icon for Android 12+.

Place these in the mobile/flutter/assets/splash/ directory.

2. Configure flutter_native_splash.yaml

Update the configuration to match your branding:

flutter_native_splash:
  color: "#ffffff"
  image: assets/splash/splash.png
  
  android_12:
    image: assets/splash/splash12.png
    color: "#ffffff"

  web: false

3. Generate Splash Screen

Run the following command from the mobile/flutter directory:

dart run flutter_native_splash:create

Troubleshooting

• Caching: If you don't see changes on Android, try cleaning the project: flutter clean then flutter run.
• iOS Icon Not Updating: Sometimes Xcode caches icons. Try cleaning the build folder (Cmd+Shift+K in Xcode) or deleting the app from the simulator.
• Android 12+ Splash: Android 12 introduced a new splash screen API. The android_12 section in the config is crucial for supporting newer devices properly.