Flutterでのモバイルアプリ開発時のIcon・Splash設定メモ

アイコン設定

アイコンの作成

• Microsoft Designer - Stunning designs in a flashなどのサイトでよさげなアイコンを生成する
  • 今はChatGPT 4oの画像生成が使えるかも
  • 解像度は1024*1024にしておくと色々と便利

アイコンの設定

• pubspec.yamlにflutter_launcher_iconsを追加する
• 公式サイトのテンプレに従ってflutter_launcher_icons.yamlファイルを作成する
  • flavor対応しているので、必要に応じてsuffixに-devまたは-prodを付与する
  • adaptive_icon_backgroundとadaptive_icon_foregroundは設定しないとアイコンが真っ黒になる場合がある
    • https://github.com/fluttercommunity/flutter_launcher_icons/issues/600#issuecomment-2420305803
  • 例：

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "lib/assets/launcher_icon/icon-dev.jpeg"
  adaptive_icon_background: "#01002CFF"
  adaptive_icon_foreground: "lib/assets/launcher_icon/icon-dev.jpeg"

• lib/assets/launcher_icon配下に画像ファイルを配置する
  • ファイル名はdev環境用はicon-dev.png、prod環境用はicon.pngとする
  • 拡張子がjpgやjpegの場合は設定ファイルの記述を修正する
• 以下のコマンドを実行することで設定が反映される

dart run flutter_launcher_icons

Splash設定

• pubspec.yamlにflutter_native_splashを追加する
• 公式サイトのテンプレに従ってflutter_native_splash.yamlファイルを作成する
  • flavor対応しているので、分けたい場合はsuffixに-devまたは-prodを付与する
  • colorの指定はアイコン画像の周囲に表示する色を設定する
  • 例：

flutter_native_splash:
  color: "#01002c"
  image: res/splash/icon.jpeg

  android_12:
    color: "#01002c"
    image: res/splash/icon_android12.jpeg

android: true
ios: true
web: false

• res/splash配下にスプラッシュ画像ファイルを配置する
  • ファイル名はandroid12未満用はicon.png、android12以降用はicon_android12.png
  • 拡張子がjpgやjpegの場合は設定ファイルの記述を修正する
• 以下のコマンドを実行することで設定が反映される

flutter pub run flutter_native_splash:create