Flutter — Creating App Icons and Launch Screens for iOS

Published in

JLouage

4 min readMay 23, 2018

In iOS 7 and lower, the approach for creating the launch screen is to use static image resources. The drawback of this method is that the app developer will have to provide many different images, each with different resolution for each iOS device. In iOS 8 and above, the approach is to create a LaunchScreen.storyboard, which is much more powerful in terms of customization and is easier to maintain.

How to set your launch screen

The default app in flutter provides you with predefined AppIcons, launch images and a LaunchScreen.storyboard. To modify them and create your own launch screen using your own assets and design, you will need the following:

project_name/ios/Runner/Assets.xcassets: The resource that holds your image asset catalogs (for AppIcons, LaunchImages and LaunchScreen).
project_name/ios/Runner/LaunchScreen.storyboard: Your default storyboard used for your launch screen (used in iOS versions 8+).
Xcode 7.1 or newer version (optional: needed only if you prefer WYSIWYG workflow for changing your images).

The workflow for creating your own launch screen can be handled from Xcode or manually in the Flutter environment. In this article we are going to cover both the manual and the Xcode WYSIWYG approach.

In your project_name/ios/Runner/Assets.xcassets you will find the following sub-folders:

AppIcon.appiconset: The resource that holds the images for your AppIcons (all iOS versions).
LaunchScreen.imageset: The resource that holds the background image for your LaunchScreen.storyboard (for iOS versions 8+).

Customizing Launch images

Manual approach

Open LaunchScreen.imageset and change the default LaunchScreen images with your own using the proper scale for each image (1x, 2x and 3x).

Default Portrait Sizes:

1x = 768 x 1024
2x = 1536 x 2048
3x = 2304 x 3072

Default Landscape Sizes:

1x = 1024 x 768
2x = 2048 x 1536
3x = 3072 x 2304

As this is an image that will be used in your LaunchScreen.storyboard, your actual resolution may vary depending on your design. The default Flutter template ships a LaunchImage.png, LaunchImage@2x.png and LaunchImage@3x.png. If your images have different file names then open Contents.json and change the key filename for each image.

Xcode WYSIWYG approach

Drag and drop your Assets.xcassets into Xcode (7.1 or newer version) or open your project in Xcode and go to Runner -> Runner -> Assets.xcassets. In the opened window choose LaunchImage and add the properly scaled image for each entry (1x, 2x and 3x). Close Xcode and rebuild your Flutter app to use the new LaunchScreen.

Customizing LaunchScreen.storyboard

The default template app in Flutter comes with LaunchScreen.storyboard, which contains one image views named LaunchImage, is used to visualize your background. Your own storyboard can be customized to use your own logic with different images and styles. However, keep in mind that according to iOS Human Interface Guidelines, the LaunchScreen should be as light as possible with minimal or no moving elements and text labels. It is meant to provide immediate UX rather than artistic presentation.

Customizing App Icons

Manual approach

Open AppIcon.appiconset and change the default icons images with your own using the proper resolution for each image (e.g., icon-29.png should be 29px x 29px; icon-29@2x should be 58px x 58px; icon-29@3x should be 87px x 87px). If your images have different file names then open Contents.json and change the key filename for each image.

Xcode WYSIWYG approach

We’re not going to waste our time making a million different icon images ourselves, so go ahead and download Icon Set Creator.

Drag a 1024x1024 version of your icon onto the application and hit go (the default platform is iOS so you should be good to go here).

Now that you have all of your icons, open up your project in Xcode. In the main project folder you’ll find a folder called Images.xcassets and a file called AppIcon.