📱

flutterでiOSとAndroidのアプリアイコンを簡単に実装する

2024/05/16に公開

Android

はじめに

iOSアプリアイコンとは、iPhoneやiPadなどのiOSデバイスにインストールされたアプリケーションを表す小さな画像のことです。iOSアプリアイコンのサイズや形式、デザイン上のポイントなどを説明します。

環境

Flutter 3.16.8
Dart 3.2.5
flutter_launcher_icons 0.13.1

パッケージ

flutter pub add flutter_launcher_icons

完成イメージ

アイコンを設定しスマートフォンで表示するとこんな感じになります。

アイコンのサイズ

iOSアプリアイコンにはいくつかのサイズ規格が定められています。AppStoreやiOSデバイス上で正しく表示されるように、各サイズに対応したアイコン画像を用意する必要があります。iOSは1024×1024pxで問題ありませんでしたが、512pxでも問題ないようです。

pabspec.yaml

flutter_icons:
  android: true
  ios: true
  image_path: "assets/images/knocqnowicon.png"//画像を入れたパスを追加
  adaptive_icon_background: "#262626"　//背景色を指定
  adaptive_icon_foreground: "assets/images/knocqnowicon_512.png"//Android用画像の追加,adaptive_icon_foregroundに背景透過し50%縮小した画像を追加

透過には、PEKO.stepを使用しています。

アイコンのファイル形式

iOSアイコンの形式はPNGが推奨されています。JPEGやGIFは使用しないようにしましょう。

アイコンのデザイン

アイコンは小さなサイズながらアプリの個性を表す大切な要素なので、シンプルで視認性の高いデザインを心がけましょう。アプリの特徴や機能をイメージできるアイコンにすることをおすすめします。

アイコンはどこで用意するか

canvaやfigmaで用意しました。Google iconなど著作権フリーのものもあります。ほとんどの画像には著作権があるため、商用利用可能か確認しましょう。