この記事はこんな人におすすめ！
- iOSとAndroidアプリで別々のアプリアイコンを作りたい
- flutter_launcher_iconsの使い方が知りたい
「iOSとAndroidの環境別に異なるアイコンを作成するにはどうするの？」
今回はFlutterで開発したアプリのアプリアイコンをiOSとAndroidの環境別に変更する方法を紹介していきます。
アプリアイコンはflutter_launcher_iconsパッケージで簡単に変更できます。
目次
アプリアイコンの画像を保存
手順
- プロジェクト直下にimagesフォルダを作成・画像の保存
- pubspec.yamlファイルを編集
まずはアプリアイコンで使用する画像を保存していきます。
プロジェクト直下にimagesフォルダを作成
Flutterプロジェクト直下にimagesフォルダを作成しiOSとAndroidアプリアイコンとなる画像を用意します。
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_ios: "images/iod-icon.png"
image_path_android: "images/android-icon.png"
adaptive_icon_background: '#ffffff'
adaptive_icon_foreground: 'foreground.png'image_path_ios：iOSアプリ使用されるアイコン画像image_path_android：Androidアプリ使用されるアイコン画像adaptive_icon_background：Androidの背景画像adaptive_icon_foreground：Androidの全景画像
adaptive_icon_backgroundの背景には#ffffffのようなカラーコードも使用できます。
アプリアイコンを生成
pubspec.yamlファイルを更新し次のコマンドを実行するとiOSとAndroidアプリのアイコンが同時に生成されます。
flutter pub run flutter_launcher_icons:main