「Flutterで開発したアプリアイコンをデフォルトからオリジナルアイコンに変更したい」
このような疑問にお答えします。
「App Icon Generator」という無料サイトでFlutterのアプリアイコン用の画像作ってしまえば、簡単にアプリアイコンをデフォルト画像から変更できます。
開発したFlutterアプリのアイコンを変更するにはまずiOS、Android向けの画像を作る必要があるので、今回は「App Icon Generator」という無料サイトでアプリ用の画像を作っていきます。その後でFlutterアプリのデフォルト画像と作ったアプリアイコンの変更方法をiOS、Android別に紹介します。
ティファそれでは、Flutterのアプリアイコンを変更する方法を紹介していくよ！
Flutterで開発したiOS, Androidアプリ用のアイコンを作る
iOS、Androidアプリのアイコン画像となる元の画像を用意してください。
上記のリンクを開いたら、画像の左側にある「Click or drag image file」と書いてある所に用意しておいたイメージをアップロードし、右側でFlutterで開発しているデバイスにチェックを入れます。
ティファ今回はiPhone、Androidにチェックを入れておこう！
画像のアップロード、デバイスの選択が完了したら「Generate」をクリックし、アプリアイコンをダウンロードします。
ダウンロードしたzipファイル、解凍したファイルを開くと2つのファイルがあり、「Assets.xcassets」はiOSアイコンに「android」はAndroidのアイコンに使います。
ティファこれでFlutterで開発しているiOS、Androidアプリのアイコンを手に入れたのでデフォルトのアイコン画像と変更していくよ！
FlutterでiOSアプリアイコンをデフォルト画像と変更する
動画のようにAssets.xassetsが入っているRunnerフォルダを開きます。(Project > ios > Runner > Assets.xassets)
Assets.xassetsファイルが入っているRunnerフォルダを開いたらダウンロードした同名のファイルと置き換えます。
ファイルを置き換えた後で「iOS Simulator」を実行し直すとオリジナルアイコンが反映されているはずです。
ティファ次はAndroidアプリのアイコンをオリジナルアイコンに変更する方法を紹介していくよ！
FlutterでAndroidアプリアイコンをデフォルト画像と変更する
動画のようにresフォルダを開きます。(Project > android >app > src > main > res)
resフォルダを開いたら、先ほどダウンロードした「Androidファイルに保存されているファイル」をresフォルダ内の同名のファイルと全て置き換えます。
ファイルを置き換えた後で「Android Emulator」を実行し直すとオリジナルアイコンが反映されているはずです。
Flutterを学ぶなら「Udemy」または「侍エンジニア塾」
- 独学でFlutterを学ぶなら「Udemy」
- プログラミングスクールで学ぶなら「侍エンジニア塾」
Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。
独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。
