Flutterでアプリアイコンと名前を設定する（flutter_launcher_icons）

📅

loading..🐩🐩🐩🐩

はじめに 🔗

この記事はFlutter 3.24を前提にしています。
Flutterのインストールは済んでいるものとします。

概要 🔗

Flutterプロジェクトを作ると、初期状態ではFlutterのロゴがアプリアイコンになっています。これを変更したいときに使うのが flutter_launcher_icons です。このパッケージを使うと、Flutterプロジェクトのアプリアイコンと名前を簡単に設定できます。

アプリアイコンを変更する 🔗

1. パッケージのインストール 🔗

flutter_launcher_icons パッケージをインストールします。

flutter pub add flutter_launcher_icons

2. 設定ファイルの作成 🔗

次のコマンドで設定ファイルを生成します。

dart run flutter_launcher_icons:generate

次のようなファイルが生成されます。

flutter_launcher_icons.yaml

# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
  image_path: "assets/icon/icon.png"
 
  android: "launcher_icon"
  # image_path_android: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  # adaptive_icon_background: "assets/icon/background.png"
  # adaptive_icon_foreground: "assets/icon/foreground.png"
  # adaptive_icon_monochrome: "assets/icon/monochrome.png"
 
  ios: true
  # image_path_ios: "assets/icon/icon.png"
  remove_alpha_channel_ios: true
  # image_path_ios_dark_transparent: "assets/icon/icon_dark.png"
  # image_path_ios_tinted_grayscale: "assets/icon/icon_tinted.png"
  # desaturate_tinted_to_grayscale_ios: true
 
  web:
    generate: true
    image_path: "path/to/image.png"
    background_color: "#hexcode"
    theme_color: "#hexcode"
 
  windows:
    generate: true
    image_path: "path/to/image.png"
    icon_size: 48 # min:48, max:256, default: 48
 
  macos:
    generate: true
    image_path: "path/to/image.png"

3. アイコン画像を用意する 🔗

assets/logo/icon.png に画像を配置します。まだ画像がなければ、次のサービスでアイコンを作れます。

appicon↗ は、元になる画像があるときに使えます。
icon Kitchen↗ では、元になる画像がなくても作れます。

4. アイコンを適用する 🔗

flutter_launcher_icons.yaml を編集します。

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/logo/icon.png"
  adaptive_icon_background: "#ffffff"
  adaptive_icon_foreground: "assets/logo/icon.png"
  remove_alpha_ios: true

次のコマンドでアイコンを適用します。

flutter pub get
dart run flutter_launcher_icons

これでアイコンが変わりました。続いてアプリ名を変更します。

アプリ名を変更する 🔗

1. Android 🔗

android/app/src/main/AndroidManifest.xml を開き、次のように編集します。android:label にアプリ名を入力します。

<application
		android:label="앱 이름"
		android:icon="@mipmap/ic_launcher">

2. iOS 🔗

ios/Runner/Info.plist を開き、次のように編集します。CFBundleDisplayName にアプリ名を入力します。

<key>CFBundleDisplayName</key>
<string>앱 이름</string>

おわりに 🔗

参考 🔗

Flutterでアプリアイコンと名前を設定する（flutter_launcher_icons） | PromleeBlog