この記事はこんな人におすすめ！
- Flutterアプリのアプリアイコンを変えたい
- iOSとAndroidアプリで別々のアプリアイコンを作りたい
- flutter_launcher_iconsの使い方が知りたい
「Flutterで開発したアプリのアプリアイコンをどうやって変更するの？」
今回はFlutterで開発したアプリのアプリアイコンを変更する方法を紹介していきます。
アプリアイコンはflutter_launcher_iconsパッケージで簡単に変更できます。またiOSとAndroidアプリで異なるアイコンを作成する方法も解説していくのでぜひ最後までご覧ください。
目次
アプリアイコンの画像を保存
手順
- プロジェクト直下にimagesフォルダを作成・画像の保存
- pubspec.yamlファイルを編集
まずはアプリアイコンで使用する画像を保存していきます。
プロジェクト直下に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