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.
![/imgs/flutter-icon/Untitled.png](/imgs/flutter-icon/Untitled.png)
- Install the flutter_launch_icons plugin. Please be noted you'd better install it into dev_dependencies rather than dependencies.
![/imgs/flutter-icon/Untitled%201.png](/imgs/flutter-icon/Untitled%201.png)
#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.
![/imgs/flutter-icon/Untitled%202.png](/imgs/flutter-icon/Untitled%202.png)
- 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>
![/imgs/flutter-icon/Untitled%203.png](/imgs/flutter-icon/Untitled%203.png)
- Install the app into the Android simulator and see the result.
![/imgs/flutter-icon/Untitled%204.png](/imgs/flutter-icon/Untitled%204.png)
- Please be noted the Android app name could be specified in the AndroidManifest.xml file.
![/imgs/flutter-icon/Untitled%205.png](/imgs/flutter-icon/Untitled%205.png)
![/imgs/flutter-icon/Untitled%206.png](/imgs/flutter-icon/Untitled%206.png)
- Please be noted the iOS app name could be specified in the Info.plist file.
![/imgs/flutter-icon/Untitled%207.png](/imgs/flutter-icon/Untitled%207.png)
- Open the ios project by Xcode and drag the logo into the LaunchImage part.
![/imgs/flutter-icon/Untitled%208.png](/imgs/flutter-icon/Untitled%208.png)
- Change the icon background color for iOS.
![/imgs/flutter-icon/Untitled%209.png](/imgs/flutter-icon/Untitled%209.png)
- Now you should run the following command to build iOS app rather than build it in Xcode.
- Install the app into the iOS simulator and see the result.
![/imgs/flutter-icon/Untitled%2010.png](/imgs/flutter-icon/Untitled%2010.png)
- For Google Play feature graphic image, you could easily use this website to generate a simple one.