Flutterでアイコンと名前を変更する

 ・ 1 min

photo by Jakob Owens on Unsplash

Flutterで開発していると、アプリ名とアイコンを変更したくなる瞬間がやってきます。
よく使うデバイスとリリース予定の場所に設定する必要がありますが、AOS・iOSそれぞれに設定するには意外と知っておくべきことが多いです。

ありがたいことに、pub.devにはこういった設定をサポートするパッケージがあります。

アイコンを変更したい場合はflutter_launcher_iconsパッケージを使えば大丈夫です。
アプリ名とバンドルIDを変更したい場合はrenameパッケージを使えば大丈夫です。

ここからは2つのパッケージの使い方について説明します。

flutter_launcher_icons#

このパッケージを使うには、まず必要な準備物があります。それは使用するアイコンです。
通常ロゴはデザイナーさんが作ってくれますが、もしない場合はAIロゴ作成サイトで作るか、Logobookのようなサイトを参考にして作ってもいいでしょう。AIロゴ作成サイトを使ってみましたが、望むクオリティにはなりませんでした。

デザインが完成したら、ロゴがアプリアイコンの規格に合っているか確認する必要があります。それはアプリアイコンを作る時に参考にすべきことを見ると参考になるでしょう。

logo.pngのようなファイルが準備できたと仮定して説明を続けます。
flutter_launcher_iconsパッケージをdependenciesに追加してください: flutter pub add flutter_launcher_icons

その後ターミナルでflutter pub run flutter_launcher_icons:generateコマンドを実行してください。

するとflutter_launcher_icons.yamlファイルが作成されます。このファイルを開いて希望の設定に変更すれば大丈夫です。自分はimage_pathだけ自分が設定したパスに修正しました。

image

必要な設定を入力した後、flutter pub run flutter_launcher_iconsコマンドを実行すればパッケージが自動的に処理してくれます。するとアイコンが変更されているはずです。

もしアイコンが変更されていない場合は、インストール済みのアプリを削除してから再度実行するか、flutter pub run flutter_launcher_iconsコマンドを実行していない可能性が高いです。

rename#

renameパッケージはglobalでインストールするかパッケージに追加する必要があります。

他のプロジェクトでも使いそうだったのでglobalでインストールしました。
dart pub global activate renameコマンドを実行してください。

コマンドはGitHub - renameで確認できます。

自分はApp name変更とBundle IDの変更だけ行うので、このコマンドをどう使ったか紹介します。

# 希望の名前 例) イッテ
rename setAppName --targets ios,android,web,windows,macos,linux --value "{希望の名前}"
 
# 希望の識別値 例) com.ittae.calendar
rename setBundleId --targets ios,android,web,windows,macos,linux --value "{希望の識別値}"

App StoreではバンドルIDは一つのアプリが持つ唯一の識別子です。
デバイス別(macOS、iOS、watchOS)に個別に区分でき、ワイルドカード(*)で処理することもできます。

2つのパッケージを適用するとGitの変更履歴を確認できます。パッケージを一つずつ実行しながらどこが変わったか確認するのもいいでしょう!


Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.

— Albert Einstein


他の投稿
iPhoneでFlutterを実行する 커버 이미지
 ・ 1 min

iPhoneでFlutterを実行する

Flutterでfvmを適用する 커버 이미지
 ・ 1 min

Flutterでfvmを適用する

アプリアイコンを作る時に参考にすべきこと 커버 이미지
 ・ 1 min

アプリアイコンを作る時に参考にすべきこと