【Flutter】flutter_launcher_iconsでアプリアイコンを変える

「Flutterで開発したアプリのアプリアイコンをどうやって変更するの？」

今回はFlutterで開発したアプリのアプリアイコンを変更する方法を紹介していきます。

アプリアイコンはflutter_launcher_iconsパッケージで簡単に変更できます。またiOSとAndroidアプリで異なるアイコンを作成する方法も解説していくのでぜひ最後までご覧ください。

アプリアイコンの画像を保存

まずはアプリアイコンで使用する画像を保存していきます。

プロジェクト直下にimagesフォルダを作成

Flutterプロジェクト直下にimagesフォルダを作成しアプリアイコンとなる画像を保存します。

pubspec.yamlファイルを編集

pubspec.yamlファイルを開き次の箇所にコードを追加します。

- images/とすることでimagesフォルダの全てのファイルにアクセスできるようになります。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  #↓の2行のコードを追加
  assets: 
    - images/

flutter_launcher_iconsでアプリアイコンを変更する

画像の準備ができたらflutter_launcher_iconsを導入してアプリアイコンを変更していきます。

pubspec.yamlでアプリアイコンの仕様を設定

pubspec.yamlファイルを開き#以下を追加の下にあるコードを全てコピペします。

dev_dependencies:
  flutter_test:
    sdk: flutter
  #以下を追加
  flutter_launcher_icons: ^0.13.1

flutter_icons:       
  android: true
  ios: true
  image_path: "images/icon.png"
  adaptive_icon_background: '#ffffff'
  adaptive_icon_foreground: 'foreground.png'

• image_path：iOSとAndroid両方で使用されるアイコン画像
• adaptive_icon_background：Androidの背景画像
• adaptive_icon_foreground：Androidの全景画像

adaptive_icon_backgroundの背景には#ffffffのようなカラーコードも使用できます。

アプリアイコンを生成

pubspec.yamlファイルを更新し次のコマンドを実行するとiOSとAndroidアプリのアイコンが同時に生成されます。

flutter pub run flutter_launcher_icons:main

参考サイト

• https://pub.dev/packages/flutter_launcher_icons/install