【Flutter】アプリのアイコンを簡単に変更する方法(flutter_launcher_icons)を解説

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

アプリアイコンを変更する準備

概要

Flutterでアプリアイコンを変更するには、flutter_launcher_iconsパッケージを使用します。このパッケージを使うと、簡単にアイコンを設定し、プラットフォームごとの適切なフォーマットに変換してくれます。

サンプルコード

pubspec.yamlにパッケージを追加

dev_dependencies:
  flutter_launcher_icons: ^0.9.2

flutter_icons:
  android: true
  ios: true
  image_path: "icons/app_icon.png"

サンプルコードの解説

アプリアイコンの変更方法

概要

アイコンを変更するためには、コマンドラインから以下のコマンドを実行します。

サンプルコード

flutter pub get
flutter pub run flutter_launcher_icons:main

サンプルコードの解説

表示確認

いちの

それでは、表示を確認してみましょ〜

アプリアイコンの背景色を変更する方法

概要

アイコンの背景色を変更するには、flutter_iconsセクションにbackground_colorを追加します。

サンプルコード

flutter_icons:
  android: true
  ios: true
  image_path: "icons/app_icon.png"
  background_color: "#FFFFFF"

サンプルコードの解説

アプリアイコンの背景画像を変更する方法

概要

アイコンの背景画像を変更する場合は、adaptive_icon_backgroundとadaptive_icon_foregroundを使用します。

サンプルコード

flutter_icons:
  android: true
  ios: true
  image_path: "icons/app_icon.png"
  adaptive_icon_background: "icons/background.png"
  adaptive_icon_foreground: "icons/foreground.png"

サンプルコードの解説

まとめ

いかがでしたでしょうか？今回は、FLutterアプリでアプリアイコンを簡単に変更する方法について、解説していきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

Flutterアプリ開発についてもっと学んでいきたい！という読者様がいらっしゃいましたら、以下の記事はいかがでしょうか？

あわせて読みたい

【Flutter】文字列の表示(Text)と文字配置(中央、上下左右)、余白(Padding)の設定完全ガイド！ こんばんは〜弊社ブログに辿り着いていただきありがとうございます！株式会社メモリアインクのいちのです この記事を読んででわかること テキストの基本的な表示方法 テ…