📖

With Gemini : `flutter_launcher_icons` を使用したアプリのアイコン作成

に公開
Android
Flutter
Gemini
ランチャーアイコン
Adaptive icons
tech

Flutterアプリのアイコンを効率的に管理する：flutter_launcher_icons

はじめに

FlutterアプリをAndroidやiOS向けにリリースする際、各プラットフォームの多様なデバイスに対応したアプリアイコンを用意する必要がある。手動でのアイコン作成は手間がかかるが、flutter_launcher_icons パッケージを使えば、このプロセスを自動化し、効率的に管理できる。

本稿では、このパッケージの導入からアイコン生成までの手順を解説する。

1. flutter_launcher_icons パッケージの導入

まず、pubspec.yaml ファイルに flutter_launcher_icons を追加する。

  1. pubspec.yaml の編集:
    dev_dependencies セクションに以下の行を追加する。

    # pubspec.yaml
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.14.4

    （バージョンは最新のものに合わせる。）

  2. パッケージの取得:
    ターミナルで以下のコマンドを実行し、パッケージをプロジェクトに導入する。

    flutter pub get

2. アイコン生成の設定

pubspec.yaml ファイルの最下部に、アイコン生成のための設定を記述する。

  1. アイコンの画像の準備:

    • 少なくとも 512x512 ピクセル以上の高解像度画像を用意する。
    • 推奨されるファイル形式は PNG で、背景が透明なものが望ましい。
    • このファイルをプロジェクトの assets/ ディレクトリなど、分かりやすい場所に配置する。（例: assets/icon.png）

  2. pubspec.yaml への設定記述:
    flutter_launcher_icons セクションを追加し、アイコン画像のパスとターゲットとするプラットフォームを指定する。

    # pubspec.yaml
flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon.png"
  min_sdk_android: 21 # アイコンを生成するAndroidの最低SDKバージョン
    • android: Androidアイコンの名前。通常は launcher_icon を指定する。
    • ios: iOSアイコンを生成するかどうか。
    • image_path: 用意したアイコン画像のパス。
    • min_sdk_android: アイコンを生成するAndroidの最低SDKバージョンを指定。minSdk の値に合わせる。

3. アイコンの生成

設定が完了したら、以下のコマンドをターミナルで実行する。

flutter pub run flutter_launcher_icons:main

コマンドの実行結果

このコマンドを実行すると、以下の作業が自動で行われる。

  • Android: android/app/src/main/res/mipmap/ ディレクトリ内に、各解像度（mdpi, hdpi, xhdpi など）に対応したアイコン画像が生成される。
  • iOS: ios/Runner/Assets.xcassets/AppIcon.appiconset/ ディレクトリ内に、各デバイスに対応したアイコン画像が生成される。

これにより、手動で複数のサイズのアイコンを用意する手間が不要になる。

4. 適応型アイコン (Adaptive Icons) の設定（Android）

Android 8.0 (API レベル 26) 以降のデバイスでアイコンの表示品質を向上させるため、適応型アイコンを設定することが推奨される。

  1. 前景画像と背景画像の準備:

    • アイコンの形状に影響されない、背景が透明な前景画像（アイコン本体）。
    • 単色の背景、または模様のある背景画像。
    • これらをプロジェクトの assets/ ディレクトリに配置する。
    • 512x512 ピクセル以上のpng

  2. pubspec.yaml への設定記述:
    pubspec.yaml の flutter_launcher_icons セクションを以下のように修正する。

    # pubspec.yaml
flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon.png" # 通常のアイコン用
  adaptive_icon_background: "assets/background.png" # 適応型アイコンの背景
  adaptive_icon_foreground: "assets/foreground.png" # 適応型アイコンの前景
  • android: true を指定する。

  1. アイコンの再生成:
    再度、以下のコマンドを実行する。

    flutter pub run flutter_launcher_icons:main

これにより、Androidの適応型アイコンも自動で生成され、より多くのデバイスでアイコンが美しく表示されるようになる。

参考リンク：https://pub.dev/packages/flutter_launcher_icons

Discussion