Flutterでアプリアイコンを変更する方法【おすすめサービスも紹介】

備忘録

簡単でかつ高品質なアプリアイコンの設定方法をご紹介します。また、アプリアイコンを設定する上でおすすめのサービスも漏れなくご紹介します。(基本無料)

手順は以下

Flutterでアプリアイコンを変更する方法【手順】

手順は以下の3ステップ
  1. 1024×1024のPNG画像を作成する
  2. App icon Generatorで各サイズのアイコン画像を作成する
  3. 画像ファイルをOSごとのプロジェクトフォルダに格納する

順に詳しく見ていきます。

1.1024×1024のPNG画像を作成する

まずは、基礎となるアプリアイコンを作成します。この時、画像サイズが「1024×1024」になるようにしましょう。

アプリアイコンを作成する上でおすすめのサービスはCanvaです。

Canvaにアクセスしたら、以下のように、1024×1024でいい感じのアイコン画像を作成しましょう。

2.App icon Generatorで各サイズのアイコン画像を作成する

実は、アプリのアイコンは、様々な解像度の端末に対応する必要があるために、複数の解像度の画像ファイルを用意する必要があります。

上記を一括で生成してくれるツールがApp icon Generatorです。(神様)

使い方はめちゃくちゃ簡単です。

作成した、1024×1024のPNG画像を選択して、右下のGenerateボタンを押すだけでOKです。

App icon Generatorで各サイズのアイコン画像を生成する
App icon Generato

3.画像ファイルをOSごとのプロジェクトフォルダに格納する

AppIconsフォルダの中身

【iOSの場合】

「Assets.xcassets」フォルダを、flutterプロジェクトの「ios>Runner」配下に格納します。

以下のようになっていればOK。

iosアプリのアイコンファイルの格納先

【Androidの場合】

「mipmap-Xxx」フォルダ5つを、flutterプロジェクトの「android>app>src>main>res」配下に格納します。

以下のようになっていればOK。

androidアプリのアイコンファイルの格納先
本多
本多

これだとAndroidのアイコンが小さくなってしまう時があるんですよね…(詳細不明)

なので、対策を以下に書きました。

【備考】Androidのアイコンが小さく表示されてしまう場合の対処

手順は以下の5ステップ
  1. 「Image Asset」を開く
  2. Pathに作成した1024×1024のアイコン画像を指定
  3. サイズを調整する
  4. 背景色を調整する
  5. Finishボタンを押下する

1.「Image Asset」を開く

Image Assetを開く

flutterプロジェクトの「android>app>src>main>res」を右クリックして、「New>Image Asset」をクリックします。

2.Pathに作成した1024×1024のアイコン画像を指定

imagePathに作成した1024×1024のアイコン画像を指定

画像のように、Pathに作成した1024×1024のアイコン画像を指定します。

3.サイズを調整する

アイコンをResizeする

次に、Resizeのスライダーとアイコンサイズが、枠にピッタリ収まるように調整します。

4.背景色を調整する

アイコンの背景色を調整する

Background LayerダブのSource AssetのAsset TypeをColorにチェックをして、カラーを調整します。

画像右に示すように、丸く切り取られたアイコンのはみ出た部分に、色が出てしまう場合があります。(詳しい人教えて)

なので、自分は背景色を白(FFFFFF)に設定しています。

5.Finishボタンを押下する

あとは、Nextボタン→FinishボタンでOKです。

まとめ:Flutterでアプリアイコンを変更する方法

アプリアイコンを変更する手順は以下の3ステップ
  1. 1024×1024のPNG画像を作成する
  2. App icon Generatorで各サイズのアイコン画像を作成する
  3. 画像ファイルをOSごとのプロジェクトフォルダに格納する

Androidのアイコンが小さく表示されてしまう場合の対処手順は以下の5ステップ
  1. 「Image Asset」を開く
  2. Pathに作成した1024×1024のアイコン画像を指定
  3. サイズを調整する
  4. 背景色を調整する
  5. Finishボタンを押下する

ここまで読んでいただきありがとうございます。

コメント

タイトルとURLをコピーしました