Flutterでアプリのアイコンを設定する方法
Flutterでスマホアプリを作る際、アプリのアイコンを設定する方法を入門者向けにまとめました。
概要：アプリアイコン設定手順（今回の使用ツール）
① アイコン画像を作る（Canva）
② アイコン画像のサイズをそれぞれ作成する（App Icon Generator）
③ Flutterプロジェクトに画像を保存する（Android Studio）
④ アプリアイコンを確認し、大きさなどを修正する（Android Studio）
なお、以下の手順はすべてMacで行っています。
① アイコン画像を作る
まずは、アプリのアイコンにする画像を作成します。大きさは、1000 × 1000 px くらいでいいと思います。（サイズは後で調節します）
アイコンを作成できるおすすめのツールは Canva です。
右上の デザインを作成 → カスタムサイズ → サイズ入力 → 新しいデザインを作成 で作れます。
作成したら、ダウンロードします。
必ずしも Canva を使用する必要はありませんが、いい感じの画像を作成してください。（適当）
Macをご利用であれば、Keynote で作るのもおすすめです。
② アイコン画像のサイズをそれぞれ作成する
アプリのアイコンのサイズは一つではありません。
例えば、iPhoneとAndroidとiPadとApple Watchでは表示されるアプリアイコンの大きさは異なります。
そのため、それぞれに適した大きさのアイコンを作成する必要があります。
おすすめのツールはこちら
ここに①で作成したアイコンをドラッグ&ドロップします。
あとは、必要なところにチェック（今回はiPhoneとAndroidだけ）を入れて Generate をクリックします。
すると、AppIcons.zip がダウンロードされます。
中身はこんな感じです。
③ Flutterプロジェクトに画像を保存する
ここからは、IDE（Android Studio）で作業を行います。
まずは android フォルダから変更します。
android > app > src > main > res を右クリックして、Open in→Finder をクリックします。
すると、以下のようにFinder で該当のフォルダが開かれます。
ここに、②でダウンロードしたフォルダをコピぺします。
コピーするのは、AppIcons > android の中のフォルダです。
android フォルダの中のフォルダを全て res フォルダの中にドラッグ&ドロップして置き換えます。
次に、iOS フォルダを置き換えます。
iOS > Runner を右クリック、Open in→Finder をクリックします。
Runner の Assets.xcassets フォルダを、AppIcons の Assets.xcassets フォルダに置き換えます。
④ アプリアイコンを確認し、大きさなどを修正する
Android Studio で実行すると、アプリアイコンを確認できます。
iPhoneシュミレータではこんな感じでした。
なお、Androidでは、端末によってアイコンのサイズが違ったり、アイコンが丸かったり四角かったりするらしいです。
せっかく作成したアイコンが見切れてしまったりすることがありますので、以下のようにして調整します。
android > app > src > main > res を右クリックして、New → Image Asset の順に選択します。
Path のところをクリックして、②でダウンロードした画像ファイルを選択します。
あとは、Resize のバーを左右に移動させてアイコンの大きさをいい感じに調整します。
最後に、Next → Finish でサイズの調整は完了です。
（Androidエミュレータが不調でアイコンの確認はできんかった...）
アプリアイコンの設定は以上です。お疲れ様でした！
最後までご覧いただき、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？