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

  • 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

#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

  • 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

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

/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%206.png

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

/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

  • Change the icon background color for iOS.

/imgs/flutter-icon/Untitled%209.png

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

/imgs/flutter-icon/Untitled%2010.png

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