LoginSignup
4
0

More than 1 year has passed since last update.

flutter_launcher_iconsでandroidとiosのアプリアイコンを登録する

Posted at

flutterパッケージ

最近flutterを使っており、なかなか使い勝手が良いと思えてきました。flutterはいろんなパッケージを利用して機能拡張できますが、中でも便利だなと思ったパッケージについて、備忘も兼ねてまとめました。
ちなみに、パッケージとプラグインの違いがわかってなかったのですが、flutterでのパッケージとは「pubspecファイルを含むディレクトリのこと」で、プラグインとはパッケージの一種で「プラットフォームで固有の機能をFlutterアプリに提供するようなパッケージのこと」らしいです。知らずにいると恥ずかしい思いをしそうなのでメモっておきます。

パッケージを使ってアプリアイコンを登録

開発を終えアプリをリリースする段階になると、アプリアイコンを用意すると思います。従来の開発環境だと画素数ごとにアイコンを用意したり、osごとに対応したアイコンを用意したりと、なかなか手間がかかる作業だったと記憶してます。
ですが、flutter_launcher_iconsというパッケージを使ったところ、ベースとなるアイコンを用意するだけで、画素数に対応したアプリアイコンを作成してくれ、さらにはandoridのアダプティブアイコンにも対応してくれているので、格段にアイコンの管理が楽になりました。

アイコンの準備

アプリアイコンは1つでも良いですが、アダプティブアイコンを使う場合はios/android用にそれぞれ1つずつ用意します。

パッケージのインストール

flutter_launcher_iconsパッケージを使える状態にします。
pubspec.yamlに以下を追記します。

dependencies:
  flutter_launcher_icons: ^0.11.0

flutter_icons:
  android: true
  ios: 'AppIcon'
  image_path: 'assets/images/AppIcon.png'
  adaptive_icon_background: '##46B4EB'
  adaptive_icon_foreground: 'assets/images/AdaptiveIcon.png'

flutter_icons:
設定項目について以下補足

android:
android用にアプリアイコンを作成する場合「true」とします。
コマンド実行時、android/app/src/main/res/mipmap-xxxxフォルダに画像ファイルが出力されます。
※Android 8.0(API レベル 26)以降のみサポートする場合はこの項目は不要です。
ios:
ios用にアプリアイコンを作成する場合、ここにフォルダ名を指定すると
ios/Runner/Assets.xcassets/フォルダ名.appiconsetに画像ファイルが出力されます。
このとき<フォルダ名.appiconset>がないとエラーになるので、先にこのフォルダを作成しておきます。
※ここでフォルダを作成しておくと、Contents.json(画像の対応ファイル)も自動作成してくれるのでありがたい
image_path:
アプリアイコンの元となる画像ファイルのパスを記載します。
adaptive_icon_background:
アダプティブアイコンを使用する場合、背景色を指定します。
adaptive_icon_foreground:
アダプティブアイコンを使用する場合、元となる画像ファイルのパスを記載します。

元画像の配置とアイコン作成

pubspec.yamlの以下に指定したファイルパスの場所にそれぞれの画像ファイルを配置し、

  • image_path:
  • adaptive_icon_foreground:

対象パッケージのプロジェクトフォルダ直下で、以下のコマンドを実行します。

flutter pub get
flutter pub run flutter_launcher_icons:main

画像ファイルの最終調整

ここまでの手順で各解像度に対応した画像ファイルが一通り出力されます。
iosの画像ファイルで警告が出る場合があるので、そのときはXcodeで対象フォルダ(今回だとios/Runner/Assets.xcassets/フォルダ名.appiconset)を開き、ドラッグアンドドロップで画像ファイルを再配置すれば、警告は解消されます。
また、プロジェクト等でデザイナーさんが解像度ごとに画像ファイルを用意してくれる場合もあると思うので、その際は用意された画像ファイルを再配置すれば問題ありません。

最後に

flutter便利ですね。今後も使っていくので、また面白そうなパッケージなどあれば、紹介していきたいと思います。今回初投稿ですが、後々手順を思い出しつつ書いていくのは結構大変だなと思いました。同じ手順をやってみたり、ファイルパスを思い出せず1から調べ直したり、結局二度手間になり、かなり効率が悪かった。今更ですが、今後はこのような記事を書く前提で手順を残していこうかなと。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0