FlutterにてAppIcon, SplashScreenを作成

image file

AppName > images > icon.png(1024 * 1024)
AppName > images > splash.png(1500 * 1500)

imagesディレクトリを作成し、その中に今回適応するimagefileを配置

SplashScreen

pubspec.yaml

flutter_native_splash:
  color: "#262626"
  image: "images/splash.png"
  color_dark: "#262626"
  image_dark: "images/splash.png"
  #ios_content_mode: center
  #android_gravity: center

dependencies:
  flutter_native_splash: ^1.2.1

$ flutter pub run flutter_native_splash:create

一言

iOS

コメントにしてあるios_content_modeは以下で指定可能
便利です。

scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, or bottomRight.

Android

コメントにしてあるandroid_gravityは以下で指定可能
しかしこれでは対応できない場合もありました

bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, or top.

AppName > android　をAndroidStudioで開くとわかりますが
res > drawable にforeground, background等のxmlが追加されている。
launch_backgroud.xmlを見るとitemタグのbitmapで生成されているので
例えば横or縦を画面いっぱいに広げてaspect比は固定のまま縦を。。　とiOSでいうところのscaleAspectFitしたい場合に困る。
苦し紛れにitemタグにwidth, heightを適応するという方法があるが、これを利用するためにはAPI24以上にする必要がある。
そのため少し大きめの画像を用意する必要がある。

海外の方は3000 * 3000で実装している人もいました。

公式

AppIcon

pubspec.yaml

flutter_icons:
  android: true //利用するか
  ios: true　//利用するか
  remove_alpha_ios: true
  image_path: "images/icon.png"
  #image_path_android:
  #image_path_ios:
  adaptive_icon_background: "#262626"
  adaptive_icon_foreground: "images/icon.png"

dependencies:
  flutter_launcher_icons: ^0.9.2

$ flutter pub run flutter_launcher_icons:main

一言

iOSとAndroidでimageを分けることができるので助かります

iOS

xcodeからAssets.xcassetsをみるとリサイズしてくれて全て埋まっている。
便利です。

Android

いつも問題児なイメージ。。。笑

paddingの影響を受け、画像が思ったように表示されないケースが多々あるようです。
この場合AndroidStudioを用いて縮小する、もしくはpaddingを考慮した画像を用意する必要があります。

縮小のやり方を記載しておきます。

• androidディレクトリをAndroidStudioで開く
• File > New > image Asset
• Foreground Resizeを60〜70％に変更
• Background Layerに色を設定
• resoure/values/ic_launcher_backgroud.xmlが作成される。同階層のcolor.xmlに同名のcolor nameがすでに作成されているためビルドエラーが発生する。そのためcolor.xmlファイルのcolorタグをコメントにする

2021/9/28日現在未修正

https://github.com/fluttercommunity/flutter_launcher_icons/issues/96

参考