【Flutter/Dart開発】アプリのアイコンを変更するのに事故ったけど、順次解決してやったぞ、な話【Image Assetが表示されない等】
こんにちは、たちつてとです。
僕、出費管理アプリとメモアプリを開発してます。
それぞれ8割、7割くらい完成してて
あとは便利機能つけるか、という段階です。
特に出費管理アプリの方は、
すでに僕専用で稼働していて、
我ながらいいもん作ったなぁ...と思いながら
うわ、先月5マン使っちゃったよ...と思いながら
でも５マン使っちゃたよ...が明確に
記録として残るのは、やはりいいなぁ...と思いながら
利用しています。
さて本題、そんな状況の出費管理アプリなんですが、
スマホのhomeで出るアイコンが
サンプルアプリのと同じだったのでそれを変更した
という話です。
利用したもの
必須/ほぼ必須
- Android Studio (1)
- 1024×1024のサイズのpngファイル (2)
-
App Icon Generator(アプリアイコンを生成) (3)
任意、サポート用
-
オンラインで様々なPNG画像をサイズ変更(pngサイズ変換用) (4)
-
おえかきボード - ブラウザでかんたんお絵かき -(舐め腐ったアイコンを生成する用) (5)
作戦
こんな感じです。順をおって説明していきます。
とはいえ、1,2はURL踏んで
もちもちと作業するだけなので
3,4番目のについてお話しします。
本題
該当フォルダを差し替え
Icon Generator(アプリアイコンを生成) でアイコンを
生成してもらったあと、アイコンを差し替えたい
プロジェクトのあるフォルダを置き換える必要があります。
↑リンクでアイコンにしたいpng画像をぶち込み
Generateボタンを押すと
↑こんな感じの中身がつまったフォルダが
ダウンロードされます。
補足
なお、左画面のic_launcher.pngという名前を
(僕の様に)不用意に変更すると、
ビルドエラーを吐かれます。
調査するのも面倒だったので未解決ですが、
特にこだわりがない場合は、変更不要です。
赤枠で囲ったところは、名前を変更できるみたいですが
注意です。
フォルダを取得後
さて、お次はAndroid Studioの出番です。
該当プロジェクトの下の
を見つけてください。
先ほどダウンロードしてもらったフォルダと
同じフォルダがプロジェクト内にあるので、
置換しましょう。
この状態でアプリを実機/シミュレータで
インストールしてみてください。
確かにアプリのアイコンが変わってませんか？
アイコンがちくちくの長方形である
ので、ちょっと露骨すぎんな、ということで
丸みのある四角形とかにしたい。
→Android Studioの出番。
Image Asset
というのを利用します。ところが
- sample/android/app/src/main/res
のresを右クリックしても、Image Assetという選択肢がない。
Newより10個ほど下の項目に
「Flutter」というのがあるのでクリック。
さらにOpen Androidなになにをクリック。
これで、新たにAndroid Studioみたいなのが開かれます。
以下画像の手順に従ってください。
もう一度、resフォルダを右クリックでしてみてください。
Image Assetがあるでしょうか。
Image Asset起動！！！
画像垢枠のとこで、1024×1024のpngファイルが
あるパスを選択してください。
これで、画面右側のドロイドくんの絵が差し替えたい
アイコンになるはずです。
少しみにくいですが、灰色の線の内側が
アイコンになります。
もし、
はみ出てるわ...ってなっても
(僕のように)あらためて画像編集等をする前に、
赤枠で囲ったところの下にResizeを試しましょう。
画像の拡大縮小ができます。
僕の場合は、はみ出てた部分はResizeで解決できました。
最後、FInishを押すと
アイコンがちくちくの長方形ではなくなっていると思います。
実機等でインストールしてみてください。
最後に
無事、舐め腐ったアイコンに差し替えることができました。
腹立つなこいつ。
というわけでいえい。
お疲れ様でした。
現場で使える Flutter開発入門 (Compass Booksシリーズ)
posted with カエレバ
