Flutterで開発したアプリのアイコン画像をiOSとAndroid用に生成する手順

はじめに

Flutterで開発したアプリ用のアイコンをiOSとAndroid用に用意するには、Flutter公式ドキュメントに書かれているようにflutter_launcher_iconsというパッケージを使用するととても簡単に生成できます。この記事ではflutter_launcher_iconsを使ってアイコンを一括生成するまでをまとめます。

なお、Flutterで開発したアプリを公開するために必要な手順は以下の公式ドキュメントにまとめられています。

Preparing an Android app for release

How to prepare for and release an Android app to the Play store.

flutter.dev

前提と環境

以下の通りです。

• Flutter 1.9.1
• Dart 2.5.0
• アプリのアイコン画像は用意済とする。

flutter_launcher_iconsをインストールする

pubspec.ymlのdev_dependenciesに以下を追記します。^0.7.4は執筆時点での最新バージョンです。

pubspec.ymlflutter_launcher_icons: ^0.7.4

また、flutter_launcher_iconsが読み込むアイコン画像のパスを以下のようにpubspec.ymlに追記します。

pubspec.ymldev_dependencies:
# ...省略...

  flutter_launcher_icons: ^0.7.4

flutter_icons:
  android: true
  ios: true
  image_path: 'lib/assets/icon.png'

image_pathが各自のアイコン画像の設置場所です。lib/assetsというディレクトリも元々はなく、適当に作成したものです。任意のパスを指定できます。上記ではiOS、Android用の両方を生成する設定です。

pubspec.ymlを保存すると同時にインストールが開始されます。もしインストールされない場合はターミナルで以下を実行してもインストール可能です。

$ flutter pub get

以上でflutter_launcher_iconsのインストールが完了です。

iOSとAndroidで別のアイコン画像を使用したい場合

以下のようにそれぞれのアイコン画像のパスを指定します。

pubspec.ymldev_dependencies:
# ...省略...

  flutter_launcher_icons: ^0.7.4

flutter_icons:
  android: true
  ios: true
  image_path_android: 'lib/assets/android_icon.png'
  image_path_ios: 'lib/assets/ios_icon.png'

アダプティブアイコンを使用する場合

Android 8.0からアダプティブアイコンというものが導入されました。アダプティブアイコンを使用するとデバイスモデルごとに異なる図形を表示できるようになります。アダプティブアイコンについては以下の公式ドキュメントを見てみてください。

アダプティブ アイコン  |  Android Developers

Android 8.0（API レベル 26）では、アダプティブ ランチャー アイコンが導入され、デバイスモデルごとに異なる図形を表示できるようになりました。

developer.android.com

アダプティブアイコンを生成するには、バックグランドとフォアグラウンドそれぞれの２つの画像ファイルのパスを指定する必要があり、以下のようにします。

pubspec.ymldev_dependencies:
# ...省略...

  flutter_launcher_icons: ^0.7.4

flutter_icons:
  android: true
  ios: true
  image_path_android: 'lib/assets/android_icon.png'
  image_path_ios: 'lib/assets/ios_icon.png'
  adaptive_icon_background: 'lib/assets/background.png'
  adaptive_icon_foreground: 'lib/assets/foreground.png'

アイコン画像を一括生成する

アイコン画像をpubspec.ymlに記載したパスに設置します。あとは以下のコマンドでアイコン画像を一括生成します。

$ flutter pub run flutter_launcher_icons:main

実行すると以下のような結果が表示されます。

$ flutter pub run flutter_launcher_icons:main
Android minSdkVersion = 16
Creating default icons Android
Overwriting the default Android launcher icon with a new icon
Overwriting default iOS launcher icon with new icon

iOSとAndroidそれぞれのアイコン画像の要件

iOSについては日本語のドキュメントがないようで英語ですが、以下がアイコンデザインに関する公式ドキュメントです。推奨サイズ等について記載されています。

App Icon – Human Interface Guidelines

Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen.

developer.apple.com

Androidについては以下がアイコンデザインに関する日本語の公式ドキュメントです。

アイコン デザイン ガイドライン  |  Android Developers

ユーザー インターフェース全体のデザインを統一すると、プロダクトに付加価値がもたらされます。また、無駄のないグラフィック スタイルにすると、UI がよりプロらしい外観になります。

developer.android.com

まとめ

Flutterで開発したアプリのアイコン画像を生成する手順についてまとめました。