🗂

アプリアイコンの設定

2024/05/29に公開

リリース前にアプリアイコンを設定する時に初歩的な部分で詰まったのでその備忘録と自分への戒めを兼ねて記事にします。

パッケージインストール

このパッケージを使えばiosとandroidの両方のアプリアイコンが簡単に設定できます。

flutter pub add flutter_launcher_icons

と入力しパッケージをインストールします。

アイコンの画像を準備します。
最低限

必要です！

アイコン作成アプリやサービスが色々とあるのでそちらで簡単に作れます。

規定ピクセル通りのアイコンが作れたらファイルに追加します。

lib（プロジェクト）直下に画像を追加するためのファイルを作成します。私は今回は「assets」としました。

この中に用意したファイルを追加します。自分がわかりやすいように名前を設定して、ファイルの中に画像を追加したら次の工程です。（追加はドラッグ&ドロップで行いました）

pubspeck.yamlの一番下にこのようにコードを追加します。

flutter_icons:
android: true
ios: true
image_path: "ここに任意の画像のurl"

私は「lib」配下の「assets」の中の「icon_ios.png」という名前の画像を使いたかったので、lib/assets/icon_ios.pngというふうに書きました。画像の名前が「icon_android.jpg」ならlib/assets/icon_android.jpgになります。

余談ですが私はpubspeck.yamlに上記のコードを追加する時、追加する場所を間違えてエラーが出てしまい詰まったこともあります。

dependencies:
  url_launcher: ^6.2.6

この直下に追加してエラーでした。初歩的なミスすぎる。dependenciesはあくまでインストールしたパッケージが並ぶところなのでパッケージ以外は別の場所に書かなければならないようでした。

これが設定できたらターミナルで以下コマンドを実行します。

flutter pub run flutter_launcher_icons:main

これでアイコンが変わります！

iosのアプリアイコンは非透過設定でなければならないようなので、非透過でアイコンを作るか、もしくは透過しないjpgファイルで設定すると良さそうです。

Androidのアプリアイコンは外側に余白が必要なようです。

512×512pxのアイコンで、内側334×334内にデザインを入れるといいそう。

pubspeck.yamlに追加する時の場所で詰まったので次からは間違えないようにという備忘録でした。