Programming Self-Study Notebook

勉強したことを忘れないように!　思い出せるように!!

flutterアプリのアイコンを変更する

flutter


今回は、flutterで作成したスマホアプリのアプリアイコンを変更したいと思います。

使用するパッケージ

  • 以下のパッケージを使用します。
  • 上記リンクのReadmeには細かい使い方の注意が記載されています。

手順

手順１：画像の用意

  • まずはダウンロードした画像をappIcon.pngというファイル名で保存します。

手順２：画像をプロジェクトに配置する

  • 画像格納用のディレクトリを作成します。

    • 私はプロジェクトルートに\assets\images\iconというフォルダを作成しappIcon.pngという名前で画像を配置しました。

        (プロジェクトフォルダ)/
  　└ assets
  　　└ images
      　　└ icon
      　　　└ appIcon.png

手順３：アプリアイコン変更用のパッケージを追加

  • アプリアイコン変更のためのパッケージをインストールします。

  • 私はfvmを導入しているので以下のコマンドでパッケージを追加しました。

      fvm flutter pub add flutter_launcher_icons

コマンド実行結果

(省略)\training_app>fvm flutter pub add flutter_launcher_icons  
Resolving dependencies...
+ checked_yaml 2.0.3    
+ cli_util 0.4.1        
+ flutter_launcher_icons 0.13.1     
  flutter_lints 2.0.3 (3.0.1 available)
+ json_annotation 4.8.1 
  lints 2.1.1 (3.0.0 available)     
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)    
  path 1.8.3 (1.9.0 available)      
  test_api 0.6.1 (0.7.0 available)  
  web 0.3.0 (0.4.0 available)       
Changed 4 dependencies!
8 packages have newer versions incompatible with dependency constraints.Try `flutter pub outdated` for more information.

手順４：pubspec.yamlの編集

  • pubspec.yamlの末尾に以下の例に習って設定を追記してください。

    • flutter_launcher_icons:の部分はインデントは0で良いです。

        flutter_launcher_icons:
    android: true
    ios: true
    image_path: "assets/images/icon/appIcon.png"

  • ココではandroidアプリ、iosアプリのみを対象にするのでその他の記述は省略しました。

手順５：アイコン生成コマンドの実施

  • 次のコマンドを実行します。

      fvm flutter pub run flutter_launcher_icon:main

コマンド実行結果

(省略)\training_app>fvm flutter pub run flutter_launcher_icons:main
This command is deprecated and replaced with "flutter pub run flutter_launcher_icons"
  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.13.1)
  ════════════════════════════════════════════

• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon

WARNING: Icons with alpha channel are not allowed in the Apple App Store.
Set "remove_alpha_ios: true" to remove it.

• Overwriting default iOS launcher icon with new icon
No platform provided

✓ Successfully generated launcher icons

手順６：確認

  • VM等でアプリを起動してアイコンが変わっていることを確認する。

これでアイコンの変更は終わりです。