How to create an app icon and launch screen for flutter

Frankie Fan
Oct 16, 2020

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.

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

#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.

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>

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

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

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

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

Change the icon background color for iOS.

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.

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

--

--