【Flutter/Dart】アプリアイコンを設定する方法!flutter_launcher_icons

【Flutter/Dart】アプリアイコンを設定する方法!flutter_launcher_icons

この記事からわかること

  • Flutter/Dartアプリアイコン設定する方法
  • flutter_launcher_icons使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

FlutterでiOS/Androidのアプリアイコンを設定する方法

Flutterで開発しているiOS/Androidのアプリアイコンを設定するにはflutter_launcher_iconsパッケージを使用します。このパッケージを使用することで1つの元画像から自動でサイズ別アイコンが生成され、iOS/Androidそれぞれのプロジェクトに設定してくれます。

flutter_launcher_iconsの使い方

  1. 画像を用意する(1024 x 1024px)
  2. 画像をプロジェクトに追加
  3. flutter_launcher_iconsの導入&セットアップ
  4. コマンドを実行

画像を用意する(1024 x 1024px)

まずはアプリのアイコン画像を作成します。作成する画像サイズは「1024 x 1024px」の1枚だけでOKです。iOS/Androidそれぞれにガイドラインが定められているので、違反しないように作成するようにしてください。詳細は以下の記事を参考にしてください。

画像をプロジェクトに追加

作成した画像をプロジェクトに配置します。特に指定はないですがlibと同階層にassetsディレクトリを作成しその中にimages/app_icon.pngとして追加しておきました。

Flutter アプリ
├── android
├── ios
├── lib
│
├── assets
│     └── images
│            └── app_icon.png ← ココ
│
└── pubspec.yaml

flutter_launcher_iconsの導入&セットアップ

pub.dev:flutter_launcher_icons

Flutterでflutter_launcher_iconsを利用できるようにするために以下のコマンドを実行してパッケージを導入します。

$ flutter pub add flutter_launcher_icons

続いて設定をしていきます。公式ドキュメントを見るとdart run flutter_launcher_icons:generateコマンドを実行して専用のyamlファイルを作成する方法「pubspec.yaml」ファイルに設定を追加する方法の2つがあります。今回は「pubspec.yaml」に追加していきます。


// 〜〜〜〜〜〜
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  flutter_launcher_icons: ^0.14.3

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^5.0.0
// アイコン自動生成設定
flutter_icons:
  ios: true
  android: true
  image_path_ios: "assets/images/app_icon.png" // 画像パス
  image_path_android: "assets/images/app_icon.png" // 画像パス
  adaptive_icon_background: '#000000'
  adaptive_icon_foreground: "assets/images/app_icon.png" // 画像パス
  adaptive_icon_padding: true

flutter:
  uses-material-design: true

設定項目の詳細は後述しています。

コマンドを実行

設定の追加が完了したら以下のコマンドを実行します。すると元画像を元に自動で必要なサイズのアイコンを生成、設定までしてくれます。なので後はビルドするだけでアプリアイコンが変更したものに変わってくれます。

$ flutter pub run flutter_launcher_icons:main

Deprecated. Use `dart run` instead.
This command is deprecated and replaced with "flutter pub run flutter_launcher_icons"
  ════════════════════════════════════════════
    FLUTTER LAUNCHER ICONS (v0.14.3)                               
  ════════════════════════════════════════════
  

⚠ Warning: flutter_icons has been deprecated please use flutter_launcher_icons instead in your yaml files
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Creating adaptive icons Android
• Updating colors.xml with color for adaptive icon background
• Creating mipmap xml file Android

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
【Flutter/Dart】アプリアイコンを設定する方法!flutter_launcher_icons

flutter_launcher_iconsの設定

オプション名 説明
image_path String 共通のアイコン画像のパス(Android / iOS 両対応)
image_path_android String Android用の個別アイコン画像
image_path_ios String iOS用の個別アイコン画像
android bool or String(adaptive) Android用のアイコンを生成
adaptiveでアダプティブ対応
ios bool iOS用のアイコンを生成
web bool Web用のFaviconを生成
windows bool Windows用のアイコンを生成
macos bool macOS用のアイコンを生成
adaptive_icon_background String アダプティブアイコンの背景(色コードまたは画像パス)(※1)
adaptive_icon_foreground String アダプティブアイコンの前面画像(画像パス)(※1)
remove_alpha_ios bool iOSアイコンからアルファ(透明)を削除するか(※2)
min_sdk_android int アダプティブアイコン対応のための最小SDKバージョン指定

※1 Android 8.0(API 26)以降で使用される「アダプティブアイコン」用。

※2 iOSはAppleの仕様により透過PNG不可なのでremove_alpha_ios: trueにするのが安全。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index