Flutterで開発したアプリアイコンの変更方法! iOS・Android別に紹介

Flutterで開発したアプリアイコンの変更方法! iOS・Android別に紹介

「Flutterで開発したアプリアイコンをデフォルトからオリジナルアイコンに変更したい」

このような疑問にお答えします。

結論

「App Icon Generator」という無料サイトでFlutterのアプリアイコン用の画像作ってしまえば、簡単にアプリアイコンをデフォルト画像から変更できます。

開発したFlutterアプリのアイコンを変更するにはまずiOS、Android向けの画像を作る必要があるので、今回は「App Icon Generator」という無料サイトでアプリ用の画像を作っていきます。その後でFlutterアプリのデフォルト画像と作ったアプリアイコンの変更方法をiOS、Android別に紹介します。

ティファ

それでは、Flutterのアプリアイコンを変更する方法を紹介していくよ!

目次

Flutterで開発したiOS, Androidアプリ用のアイコンを作る

STEP
下準備:開発したアプリのアイコン画像を用意する

iOS、Androidアプリのアイコン画像となる元の画像を用意してください。

STEP
アプリアイコン画像を作る:その1
Flutterのアプリアイコンの変更方法1

>> App Icon Generator

上記のリンクを開いたら、画像の左側にある「Click or drag image file」と書いてある所に用意しておいたイメージをアップロードし、右側でFlutterで開発しているデバイスにチェックを入れます。

ティファ

今回はiPhone、Androidにチェックを入れておこう!

STEP
アプリアイコン画像を作る:その2
Flutterのアプリアイコンの変更方法2

画像のアップロード、デバイスの選択が完了したら「Generate」をクリックし、アプリアイコンをダウンロードします。

STEP
アプリアイコンのダウンロード完了
Flutterのアプリアイコンの変更方法3
Flutterのアプリアイコンの変更方法3

ダウンロードしたzipファイル、解凍したファイルを開くと2つのファイルがあり、「Assets.xcassets」はiOSアイコンに「android」はAndroidのアイコンに使います。

ティファ

これでFlutterで開発しているiOS、Androidアプリのアイコンを手に入れたのでデフォルトのアイコン画像と変更していくよ!

FlutterでiOSアプリアイコンをデフォルト画像と変更する

STEP
iOSアプリアイコンをデフォルト画像と置き換える:その1

動画のようにAssets.xassetsが入っているRunnerフォルダを開きます。(Project > ios > Runner > Assets.xassets)

STEP
iOSアプリアイコンをデフォルト画像と置き換える:その2
Flutterのアプリアイコンの変更方法5

Assets.xassetsファイルが入っているRunnerフォルダを開いたらダウンロードした同名のファイルと置き換えます。

STEP
iOSアプリアイコンをデフォルト画像と置き換える:その3
Flutterのアプリアイコンの変更方法6

ファイルを置き換えた後で「iOS Simulator」を実行し直すとオリジナルアイコンが反映されているはずです。

ティファ

次はAndroidアプリのアイコンをオリジナルアイコンに変更する方法を紹介していくよ!

FlutterでAndroidアプリアイコンをデフォルト画像と変更する

STEP
Androidアプリアイコンをデフォルト画像と置き換える:その1

動画のようにresフォルダを開きます。(Project > android >app > src > main > res)

STEP
Androidアプリアイコンをデフォルト画像と置き換える:その2
Flutterのアプリアイコンの変更方法7

resフォルダを開いたら、先ほどダウンロードした「Androidファイルに保存されているファイル」をresフォルダ内の同名のファイルと全て置き換えます。

STEP
Androidアプリアイコンをデフォルト画像と置き換える:その
Flutterのアプリアイコンの変更方法3

ファイルを置き換えた後で「Android Emulator」を実行し直すとオリジナルアイコンが反映されているはずです。

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる