More than 3 years have passed since last update.

【Flutter】アプリリリースに向けて、アイコンをオリジナル画像に変更してみた

Posted at 2020-10-11

Flutterで開発中の個人アプリがそろそろリリースできそうなので、アイコンを設定してみた。
パッケージを使う事で簡単にできるのだが、少し詰まった部分もあるので、ここにまとめておく。

まずアイコンを用意する

Flutter側の設定をする前に、アイコン画像がないと話にならない。
サイズを適当にすると、うまく表示されないので要注意。

私は、以下のサイトを使って、512×512のpng画像を作成した。
作成は無料でできるが、ダウンロードするには月額1000円程度のプランに登録する必要があるので、あくまで参考までに。
https://www.youidraw.com/

サイズを整えることを押さえておけばOK。

画像が用意できたら、アイコンの設定をしてくれるパッケージを用意する。
公式↓の内容に沿って進めればOK。
https://pub.dev/packages/flutter_launcher_icons

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.8.0   # ←追加

現時点で最新のバージョンは0.8.1だが、最新にするとエラーが出たため、一つ前の0.8.0にした。
pubspec.yamlに追記できたら、お決まりの↓

$ flutter pub get

続いて、再びpubspec.yamlに↓を追記する。

pubspec.yaml

flutter_icons:
  android: true
  ios: true
  image_path: "assets/sket_logo.png"   # ここは画像のパスを記述

image_pathには、冒頭で用意したアイコン画像の配置先を記述する。
ドキュメントの例ではassets/画像ファイルとしていたため、そのまま真似した。

↑の記述ができたら、以下のコマンドを実行。
これにより、アイコンの設定ができる。

$ flutter pub run flutter_launcher_icons:main

私の場合、iPhoneの実機にビルドしながら開発を進めているので、いつも通りビルドして確認。
すると・・・、アイコンは変わったが、lost connectionみたいなのエラー？が出て、すぐにフリーズしてしまった。

そこで、先ほど記述した↓を全てコメントアウトしてみた。

pubspec.yaml

# flutter_icons:
  # android: true
  # ios: true
  # image_path: "assets/sket_logo.png"

この状態で再度ビルドすると、問題なく動いた。

$ flutter pub run flutter_launcher_icons:main

詳細は不明だが、↑コマンドの時点でアイコンの設定はされているため、その後はコメントアウトしても大丈夫そう。

日本語の情報が少ないので、単純に見落としているだけかもしれないが、
flutter pub run flutter_launcher_icons:mainを実行した後は、↓をコメントアウトする
というのが個人的にハマりポイントだった。

pubspec.yaml

flutter_icons:
  android: true
  ios: true
  image_path: "assets/sket_logo.png"

この辺り詳しい方がいれば、教えていただけると嬉しい・・・