はじめに
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 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)では、アダプティブ ランチャー アイコンが導入され、デバイスモデルごとに異なる図形を表示できるようになりました。
アダプティブアイコンを生成するには、バックグランドとフォアグラウンドそれぞれの2つの画像ファイルのパスを指定する必要があり、以下のようにします。
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.
Androidについては以下がアイコンデザインに関する日本語の公式ドキュメントです。
アイコン デザイン ガイドライン | Android Developers
ユーザー インターフェース全体のデザインを統一すると、プロダクトに付加価値がもたらされます。また、無駄のないグラフィック スタイルにすると、UI がよりプロらしい外観になります。
まとめ
Flutterで開発したアプリのアイコン画像を生成する手順についてまとめました。
SPONSORED LINK