Flutter Lesson 76 of 83 4 min read

App Icon, Splash Screen and App Name in Flutter

Set the launcher icon, splash screen, display name and app id of a Flutter app on Android and iOS, by hand and with packages.

A new Flutter project has the Flutter logo as its icon, a white launch screen and the project name as its label. Change all three before anyone else sees the app.

The app icon #

Each platform needs the icon in many sizes. The flutter_launcher_icons package generates them all from one image.

1. Prepare the image. A square PNG of 1024 by 1024 pixels, with no transparency for iOS. Keep the important part in the central two thirds, since Android crops icons into circles and rounded shapes.

2. Add the package and configure it in pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: ^0.14.0

flutter_launcher_icons:
  android: true
  ios: true
  image_path: assets/icon/icon.png
  remove_alpha_ios: true

  # Android adaptive icon: a foreground on a background
  adaptive_icon_background: "#0B5FD9"
  adaptive_icon_foreground: assets/icon/icon_foreground.png

  web:
    generate: true
    image_path: assets/icon/icon.png
  windows:
    generate: true
    image_path: assets/icon/icon.png
  macos:
    generate: true
    image_path: assets/icon/icon.png

3. Generate:

flutter pub get
dart run flutter_launcher_icons

Then stop the app, uninstall it from the device and run again. Launchers cache icons.

Adaptive icons. Modern Android draws the icon from two layers and applies its own shape. The foreground image should have generous padding, with the logo occupying roughly the middle 60 percent, on a transparent background.

The splash screen #

The native splash is what the operating system shows while your app starts, before Flutter has drawn anything. It must be configured natively, and flutter_native_splash does that for you.

dev_dependencies:
  flutter_native_splash: ^2.4.0

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash/logo.png
  color_dark: "#0A1422"
  image_dark: assets/splash/logo_dark.png

  android_12:
    color: "#FFFFFF"
    icon_background_color: "#FFFFFF"
    image: assets/splash/logo_android12.png
    color_dark: "#0A1422"

dart run flutter_native_splash:create

Android 12 and later enforce their own splash design: a centred icon on a plain colour. A full-screen image is not possible there, so keep the design simple: your logo on a solid background.

Keeping it visible while you load #

To hold the splash while the app reads settings or checks the login state:

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

Future<void> main() async {
  final binding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: binding);

  await loadSettings(); // your start-up work

  runApp(const MyApp());
  FlutterNativeSplash.remove();
}

Keep start-up short. A splash is a courtesy while the app loads, not a place for a three-second logo animation.

The app name #

The name under the icon is set natively.

Android, in android/app/src/main/AndroidManifest.xml:

<application
    android:label="My Shop"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">

iOS, in ios/Runner/Info.plist:

<key>CFBundleDisplayName</key>
<string>My Shop</string>

Long names are cut off under the icon. Aim for about twelve characters or fewer.

The title of MaterialApp is a different thing: it appears in the Android task switcher and as the browser tab title on the web.

The app id #

The application id on Android and the bundle identifier on iOS identify your app in the stores, permanently. The default is com.example.my_app, which the stores reject.

The convention is a domain you own, reversed: com.yourcompany.appname.

Set it when creating the project:

flutter create --org com.yourcompany my_app

To change it later:

• Android: applicationId and namespace in android/app/build.gradle.kts, and the package line and folder path of MainActivity.
• iOS: the Bundle Identifier under Runner, Signing and Capabilities in Xcode.

The change_app_package_name and rename packages automate this. Decide the id before your first release. After publishing it can never be changed; a different id is a different app.

The version #

In pubspec.yaml:

version: 1.2.0+7

• 1.2.0 is the version name users see.
• 7 is the build number. Each upload to a store must have a higher number than the last.

Web and desktop #

flutter_launcher_icons handles the icons for these too.

Before release, check #

• The icon looks right on a light and a dark wallpaper, as a circle and as a rounded square.
• The splash matches the first screen’s background, so there is no flash between them.
• The name is not cut off.
• The app id is yours, not com.example.
• The debug banner is gone in release builds. It disappears automatically; do not hide it in debug mode, where it is useful.

Try it yourself #

Design a simple icon, or use a coloured square with a letter. Generate launcher icons and a splash screen for an app you have built, set its display name and a proper app id, and install it on a device to check each one.