How to create an app icon and launch screen for flutter

Use Canva to create a icon design and download the png file. Please be noted you should open the image file and export an image with no alpha channel because iOS’s restriction.

Image for post
Image for post

Install the flutter_launch_icons plugin. Please be noted you’d better install it into dev_dependencies rather than dependencies.

Image for post
Image for post
#pubspec.yaml

dev_dependencies:
flutter_test:
sdk: flutter
flutter_launcher_icons: ^0.7.5

flutter_icons:
android: true
ios: true
image_path: "dev_assets/icon.png"
adaptive_icon_background: "#ED7F61"
adaptive_icon_foreground: "dev_assets/icon.png"

Copy the icon to the dev_assets of the project, and open the icon image to get the background color and put into the adaptive_icon_backgound.

Image for post
Image for post

Run the following command to generate all relevant icons.

flutter pub run flutter_launcher_icons:main

Add the following content into the launch_background.xml of the Android part.

<item>
<color android:color="@color/ic_launcher_background" />
</item>
<item>
<bitmap android:gravity="center"
android:src="@drawable/ic_launcher_foreground" />
</item>
Image for post
Image for post

Install the app into the Android simulator and see the result.

Image for post
Image for post

Please be noted the Android app name could be specified in the AndroidManifest.xml file.

Image for post
Image for post
Image for post
Image for post

Please be noted the iOS app name could be specified in the Info.plist file.

Image for post
Image for post

Open the ios project by Xcode and drag the logo into the LaunchImage part.

Image for post
Image for post

Change the icon background color for iOS.

Image for post
Image for post

Now you should run the following command to build iOS app rather than build it in Xcode.

flutter build ios

Install the app into the iOS simulator and see the result.

Image for post
Image for post

For Google Play feature graphic image, you could easily use this website to generate a simple one.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store