【Flutter】アプリアイコンを変更する

初めに

Apple Store や Google Play Store にアプリを表示させる場合、当然のことながら、自分独自のアイコンを作成して表示させる必要があります。
今回は作成したアイコンをアプリアイコンとしてホーム画面に表示させる方法を紹介します。

flutter_launcher_icons

今回は flutter_launcher_icons というパッケージを使用します。
このパッケージはアプリのアイコンを変更する際に使用されるパッケージです。

準備

まずは、パッケージのバージョンを「 pubspeck.yaml 」に記述します。
このパッケージを使用するのは開発段階であるため、dependencies ではなく、 dev_dependencies に追加します。

パッケージのバージョンは、特に制約がなければ最新のバージョンで問題ありません。

pubspeck.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.10.0

Pub get をして準備は完了です。

実装

次にプロジェクト内に画像を保存するためのディレクトリを作成し、そこにアプリのアイコンとして使用した画像を配置しましょう。

image_path には画像のパスを指定します。

以下では assets ディレクトリに sample_logo.png という画像を指定しています。
なお、アプリのアイコンに使用する画像の形式は png 形式が推奨されています。

pubspeck.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.10.0

#  追加
flutter_icons:       
  android: true
  ios: true
  image_path: "assets/sample_logo.png"

android: true ios: true
このように記述することで、android, iOS の両方で指定したアプリのアイコンが使用できるようになります。


次にターミナルで以下のコードを実行しましょう。

Terminal

flutter pub run flutter_launcher_icons:main

これで以下のように、ホーム画面に表示されているアプリのアイコンが変更されたかと思います。

Android と iOS で別のアイコンにする

pubspeck.yaml

flutter_icons:       
  android: true
  ios: true
  image_path_android: "assets/sample_logo.png"
  image_path_ios: "assets/other_sample_logo.png"

image_path_android image_path_ios で別々の画像を指定することで、Android と iOS で別のアイコンを表示させることができるようになります。

Android のバージョンの指定

pubspeck.yaml

min_sdk_android: 21

上のように指定することで Android の最低バージョンを指定することができます。
デフォルトの値は 21 に設定されています。

アイコンの背景色を変更する

yaml.pubspeck.yaml

adaptive_icon_background: "#ffffff"

上のようにすることでアプリのアイコンの背景色を指定することができます。
なお、背景色はカラーコードで指定する必要があります。

アイコンの背景画像を変更する

yaml.pubspeck.yaml

adaptive_icon_background: "assets/background_image.png"

先述した adaptive_icon_background では背景色以外にも、画像のパスを指定することで、アイコンの背景画像を指定することもできます。

アイコンの前に画像を表示させる

pubspeck.yaml

adaptive_icon_foreground: "assets/foreground_image.png"

アイコンの手前にも画像を表示させることができます。
なお、 adaptive_icon_background と adaptive_icon_foreground は同時に記述されている必要があり、どちらかが記述されていないと画像や背景色が反映されないので注意しましょう。

あとがき

最後まで読んでいただきありがとうございました。

今回は Android、iOS のみの実装でしたが、Web、Windows の設定も可能です。

実際に、上で示した画像ではアイコンの線が細いと感じたため、アイコンの修正を行いました。
アプリをリリースする前の段階であってもまた、アイコンを表示させてみて、新たに気づくこともあるかと思います。

以上です。

参考にしていただければ幸いです。
誤っている箇所があればご指摘いただければ幸いです。

参考にしたサイト