☕

Flutterにアイコンとスプラッシュ画面を実装する | launcher_icons, native_splash

2025/07/07に公開

今回はFlutterアプリにアイコンとスプラッシュ画面を実装していきます！
思ったよりも簡単なので、ぜひ皆さんもやってみましょう。

pubspec.yaml

pubspec.yamlのdev_dependenciesに以下の二つを追加します。

dev_dependencies:
  flutter_launcher_icons: ^0.14.4
  flutter_native_splash: ^2.4.6

また、pubspec.yamlの最下に以下を追加します。

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  image_path_android: "assets/icon/icon.png"
  image_path_ios: "assets/icon/icon.png"
  adaptive_icon_background: "#0ffff0"
  adaptive_icon_foreground: "assets/icon/icon.png"

flutter_native_splash:
  color: "#42a5f5"
  image: assets/splash/splash.png
  branding: assets/splash/splash.png
  color_dark: "#042a49"
  image_dark: assets/splash/splash.png
  branding_dark: assets/splash/splash.png
  android_12:
    image: assets/splash/splash.png
    branding: assets/splash/splash.png
    icon_background_color: "#42a5f5"
    image_dark: assets/splash/splash.png
    branding_dark: assets/splash/splash.png
    icon_background_color_dark: "#042a49"
  web: false

コードの解説

flutter_launcher_iconsのimage_pathはお好みの画像のパスを指定します。
image_path_androidとimage_path_iosは指定しなくてもよいですが、指定した場合にそれぞれの端末ごとに指定したパスの画像に変更されます。
adaptive_icon_background,adaptive_icon_foregroundではAndroid8.0以上の端末でのアイコンの設定に使われます。背景色と前景画像の設定をします。

flutter_native_splashでは、要素として
imageでスプラッシュ画像の設定
brandingでスプラッシュ画面下部の(主に企業ロゴなどを設定する)画像の設定
colorで背景色の設定
darkで端末の設定がダークモードの場合の設定
を記述できます。
また、android_12:以降のコードではAndroid12以上の端末での設定を記述します。

実行

最後にターミナルで以下のコマンドを実行します。

flutter pub get
flutter pub run flutter_launcher_icon:main
flutter pub run flutter_native_splash:create

以上です！
簡単な実装なのでぜひ挑戦してみてください。
他にもflutterを中心に記事を書いているので、気になる方はぜひチェックしてください！

pubspec.yaml

コードの解説

実行

Discussion