Flutterアプリケーション開発概論

【アプリアイコン設定】flutter_launcher_iconsでicon.pngをアプリアイコンにする

第28節NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

この節で学ぶこと

前の節では、iOSアプリの設定ファイルである Info.plist を確認しました。

アプリ名、画面向き、YouTube表示に関係する設定など、FlutterアプリをiOSで動かすために必要な考え方を学びました。

今回の節では、アプリの見た目としてとても大切な アプリアイコン を設定します。

Flutterでは、iOS用・Android用のアプリアイコンを手作業で1つずつ作ることもできます。

しかし、サイズがたくさんあり、かなり大変です。

そこで今回は、flutter_launcher_icons というパッケージを使って、1枚の icon.png から、iOS・Android用のアプリアイコンを自動生成します。

icon.pngを用意する
↓
pubspec.yamlに設定を書く
↓
flutter_launcher_iconsを実行する
↓
iOS・Android用のアイコンが自動生成される
↓
アプリのホーム画面アイコンとして表示される

アプリ名とアイコンが整うと、「自分で作ったアプリ」という実感が一気に出ます。

アプリアイコンとは？

アプリアイコンとは、スマホのホーム画面に表示されるアプリの画像です。

ホーム画面
↓
アプリアイコン
↓
アプリ名

たとえば、今回のNETFLIX風アプリなら、黒背景に赤い文字やロゴが入ったアイコンにすると、アプリ全体の雰囲気と合いやすくなります。

アプリアイコンは、単なる飾りではありません。

ユーザーがアプリを見つけるための目印です。

役割内容
視認性ホーム画面で見つけやすくする
印象アプリの雰囲気を伝える
信頼感きちんと作られたアプリに見せる
識別他のアプリと区別する

教材アプリでも、アイコンを設定するだけで完成度が上がります。

なぜflutter_launcher_iconsを使うのか

iOSやAndroidでは、アプリアイコンに必要な画像サイズが複数あります。

たとえば、iPhoneのホーム画面用、通知用、設定画面用、App Store用など、用途によってサイズが違います。

Androidも同じように、端末の解像度ごとに複数サイズのアイコンが必要です。

iOS用アイコン
↓
複数サイズが必要

Android用アイコン
↓
複数サイズが必要

これを手作業で全部作るのは大変です。

flutter_launcher_icons を使うと、1枚の元画像から必要なサイズを自動生成できます。

1枚のicon.png
↓
flutter_launcher_icons
↓
iOS用アイコンを生成
↓
Android用アイコンを生成

そのため、Flutterアプリでアイコンを設定するときによく使われます。

今回使うファイル

今回使う元画像は、icon.png です。

一般的には、プロジェクト内に次のような場所を作って保存します。

assets/icon/icon.png

プロジェクト構成のイメージは、次の通りです。

netflix_like_app/
├── assets/
│   └── icon/
│       └── icon.png
├── ios/
├── android/
├── lib/
├── pubspec.yaml
└── ...

assets/icon/icon.png というパスを、あとで pubspec.yaml に書きます。

icon.pngの推奨サイズ

アプリアイコンの元画像は、できるだけ大きめに作っておくと安心です。

目安としては、次のようなサイズです。

1024 × 1024 px

正方形の画像にします。

横幅 = 1024
高さ = 1024

アイコンは小さく表示されることも多いので、細かすぎる文字や複雑すぎるデザインは避けた方がよいです。

良い例避けたい例
シンプルなロゴ小さすぎる文章
コントラストが強い細かすぎる装飾
正方形横長・縦長
余白に少し余裕がある端まで要素が詰まっている

今回のNETFLIX風アプリなら、黒背景に赤い N や NETAFLIX の文字など、シンプルなアイコンが合いやすいです。

iOSアイコンで注意すること

iOSのアプリアイコンでは、元画像に透明部分を入れない方が安全です。

つまり、背景が透明なPNGではなく、背景色まで塗られたPNGにします。

おすすめ
↓
黒背景 + 赤いロゴ

避けたい
↓
透明背景 + 赤いロゴだけ

透明背景のままだと、iOS側で正しく表示されなかったり、意図しない見た目になったりする場合があります。

今回のアプリなら、黒背景をしっかり入れた icon.png を用意しましょう。

flutter_launcher_iconsをpubspec.yamlに追加する

今回使うパッケージは、flutter_launcher_icons です。

pubspec.yaml に、次のように書きます。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons は、アプリの実行中に使う機能ではありません。

アイコン画像を生成するための開発用ツールです。

そのため、dependencies ではなく、dev_dependencies に入れます。

dependenciesとdev_dependenciesの違い

Flutterの pubspec.yaml には、主に2種類の依存関係があります。

dependencies:

dev_dependencies:

違いは次の通りです。

種類役割
dependenciesアプリの実行時に必要なパッケージ
dev_dependencies開発中だけ使うパッケージ

たとえば、youtube_player_iframe や share_plus は、アプリが動くときに必要です。

そのため、dependencies に入れます。

dependencies:
  youtube_player_iframe: ^5.2.2
  share_plus: ^12.0.1

一方で、flutter_launcher_icons は、アイコンを生成するときだけ使います。

アプリの画面内で直接使うわけではありません。

そのため、dev_dependencies に入れます。

dev_dependencies:
  flutter_launcher_icons: ^0.14.3

flutter_icons設定を書く

flutter_launcher_icons を使うには、パッケージを追加するだけではなく、どの画像を使うかを設定する必要があります。

pubspec.yaml に、次のような設定を書きます。

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

それぞれの意味は、次の通りです。

項目役割
android: trueAndroid用アイコンを生成する
ios: trueiOS用アイコンを生成する
image_path元になるアイコン画像の場所
remove_alpha_iosiOS向けに透明部分を削除する

この設定により、assets/icon/icon.png をもとに、iOS・Android用のアイコンを作れます。

image_pathとは？

image_path には、元画像の場所を書きます。

image_path: "assets/icon/icon.png"

これは、プロジェクトのルートから見たパスです。

netflix_like_app/
├── assets/
│   └── icon/
│       └── icon.png
└── pubspec.yaml

pubspec.yaml から見て、assets/icon/icon.png に画像がある、という意味です。

ファイル名やフォルダ名が少しでも違うと、アイコン生成時にエラーになります。

assets/icon/icon.png
assets/icons/icon.png
assets/icon/Icon.png

このように似ていても、パスが違うと別物です。

android: trueとは？

次の設定は、Android用のアイコンを生成するという意味です。

android: true

これを true にすると、Androidプロジェクト内に必要なアイコン画像が生成されます。

android/app/src/main/res/
↓
mipmap-mdpi
mipmap-hdpi
mipmap-xhdpi
mipmap-xxhdpi
mipmap-xxxhdpi

Androidでは、端末の画面密度に合わせて複数サイズのアイコンが使われます。

flutter_launcher_icons が、それらを自動で作ってくれます。

ios: trueとは？

次の設定は、iOS用のアイコンを生成するという意味です。

ios: true

これを true にすると、iOSプロジェクト内に必要なアイコン画像が生成されます。

ios/Runner/Assets.xcassets/AppIcon.appiconset/

iOSでも、用途ごとに複数サイズのアイコンが必要です。

flutter_launcher_icons が、それらを自動生成してくれます。

remove_alpha_iosとは？

iOSアイコンでは、透明部分、つまりアルファチャンネルが問題になることがあります。

そのため、次の設定を入れています。

remove_alpha_ios: true

これは、iOS用アイコンを生成するときに、透明部分を取り除くための設定です。

iOSのアプリアイコンでは、透明背景を避けるのが基本です。

透明背景のアイコン
↓
iOSでは問題になることがある

背景ありのアイコン
↓
安定しやすい

remove_alpha_ios: true を入れておくと、iOS向けのアイコンで透明部分が残る問題を防ぎやすくなります。

pubspec.yaml全体のイメージ

今回のアプリでは、pubspec.yaml の関連部分は、たとえば次のようになります。

name: netflix_like_app
description: "A Netflix-like Flutter app."
publish_to: "none"

version: 1.0.0+1

environment:
  sdk: ^3.9.0

dependencies:
  flutter:
    sdk: flutter

  google_fonts: ^7.0.0
  flutter_svg: ^2.0.17
  share_plus: ^12.0.1
  youtube_player_iframe: ^5.2.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^5.0.0
  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

flutter:
  uses-material-design: true

大事なのは、flutter_launcher_icons の設定が、dev_dependencies の中ではなく、同じ階層にあることです。

YAMLのインデントに注意する

pubspec.yaml は、インデントがとても大切です。

次のように、階層をそろえて書きます。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

flutter_launcher_icons: の設定は、左端に置きます。

dev_dependencies: の中に入れすぎないように注意してください。

間違った例はこちらです。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

  flutter_launcher_icons:
    android: true
    ios: true
    image_path: "assets/icon/icon.png"
    remove_alpha_ios: true

このように書くと、設定の階層がずれてしまいます。

YAMLでは、スペースの数が意味を持ちます。

flutter pub getを実行する

pubspec.yaml に flutter_launcher_icons を追加したら、まずパッケージを取得します。

ターミナルで、プロジェクトのルートに移動してから実行します。

flutter pub get

プロジェクトのルートとは、pubspec.yaml がある場所です。

netflix_like_app/
├── pubspec.yaml
├── lib/
├── ios/
└── android/

この場所で flutter pub get を実行します。

cd netflix_like_app
flutter pub get

これで、flutter_launcher_icons が使えるようになります。

アイコン生成コマンドを実行する

パッケージを取得したら、次のコマンドでアイコンを生成します。

dart run flutter_launcher_icons

または、環境によっては次のコマンドでも実行できます。

flutter pub run flutter_launcher_icons

最近の書き方としては、次の方が分かりやすいです。

dart run flutter_launcher_icons

このコマンドを実行すると、assets/icon/icon.png をもとに、iOS用・Android用のアイコン画像が生成されます。

実行時の流れ

アイコン生成の流れは、次の通りです。

pubspec.yamlに設定を書く
↓
flutter pub get
↓
dart run flutter_launcher_icons
↓
assets/icon/icon.pngを読み込む
↓
Android用アイコンを生成
↓
iOS用アイコンを生成
↓
アプリに反映される

うまくいくと、ターミナルにアイコン生成が完了したようなメッセージが表示されます。

エラーが出た場合は、まず image_path が正しいか確認します。

ここまでのまとめ

ここまでで、flutter_launcher_icons を使ってアプリアイコンを設定するための基本を確認しました。

大切なポイントは次の通りです。

  • アプリアイコンは、ホーム画面に表示されるアプリの目印。
  • iOSやAndroidでは、複数サイズのアイコン画像が必要。
  • flutter_launcher_icons を使うと、1枚の icon.png から必要なアイコンを自動生成できる。
  • 元画像は、assets/icon/icon.png のように分かりやすい場所に置く。
  • 元画像は、1024×1024px程度の正方形が扱いやすい。
  • iOSアイコンでは、透明背景を避けるのが基本。
  • flutter_launcher_icons は開発用ツールなので、dev_dependencies に入れる。
  • flutter_launcher_icons: の設定には、android、ios、image_path、remove_alpha_ios を書く。
  • YAMLはインデントが重要。
  • flutter pub get でパッケージを取得する。
  • dart run flutter_launcher_icons でアイコンを生成する。

生成されたアイコンを確認する

dart run flutter_launcher_icons を実行すると、iOS用とAndroid用のアイコン画像が自動で作られます。

生成される場所は、主に次の2つです。

iOS
↓
ios/Runner/Assets.xcassets/AppIcon.appiconset/

Android
↓
android/app/src/main/res/

自分で1枚ずつサイズ違いの画像を作らなくても、flutter_launcher_icons が必要なサイズをまとめて作ってくれます。

iOS側の生成場所

iOS用のアイコンは、次の場所に生成されます。

ios/Runner/Assets.xcassets/AppIcon.appiconset/

このフォルダの中には、複数サイズのアイコン画像と、Contents.json が入ります。

AppIcon.appiconset/
├── Icon-App-20x20@1x.png
├── Icon-App-20x20@2x.png
├── Icon-App-20x20@3x.png
├── Icon-App-29x29@1x.png
├── Icon-App-29x29@2x.png
├── Icon-App-29x29@3x.png
├── ...
└── Contents.json

iOSでは、ホーム画面、設定画面、通知、App Storeなど、用途によって必要なアイコンサイズが異なります。

flutter_launcher_icons を使うと、それらを自動で用意してくれます。

Android側の生成場所

Android用のアイコンは、次のような場所に生成されます。

android/app/src/main/res/

この中に、画面密度ごとのフォルダがあります。

res/
├── mipmap-mdpi/
├── mipmap-hdpi/
├── mipmap-xhdpi/
├── mipmap-xxhdpi/
└── mipmap-xxxhdpi/

Androidでは、端末ごとに画面の細かさが違います。

そのため、同じアイコンでも複数サイズを用意しておく必要があります。

低解像度の端末
↓
小さめのアイコン

高解像度の端末
↓
大きめのアイコン

flutter_launcher_icons は、この違いに合わせて必要な画像を生成してくれます。

アプリを再実行して確認する

アイコンを生成したら、アプリを再実行します。

flutter run

ただし、アプリアイコンは、変更してもすぐ反映されないことがあります。

特にiOSシミュレーターや実機では、古いアイコンがキャッシュとして残る場合があります。

その場合は、次の流れで確認します。

アプリを停止する
↓
端末またはシミュレーターからアプリを削除する
↓
もう一度flutter runする
↓
ホーム画面のアイコンを確認する

それでも反映されない場合は、次のコマンドも試します。

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

flutter clean は、古いビルドデータを削除するためのコマンドです。

反映されない時に確認すること

アイコンが変わらない時は、次の順番で確認しましょう。

確認項目見る場所
画像ファイルがあるかassets/icon/icon.png
パスが正しいかimage_path
パッケージが入っているかdev_dependencies
設定の階層が正しいかflutter_launcher_icons:
コマンドを実行したかdart run flutter_launcher_icons
古いアプリが残っていないかシミュレーター・実機

特に多いのは、image_path の間違いです。

image_path: "assets/icon/icon.png"

実際のファイル場所と、ここに書いたパスが一致しているか確認します。

よくあるつまずきポイント

Q. No file or variants found for asset のようなエラーが出ます。

まず、icon.png が本当にその場所にあるか確認してください。

assets/icon/icon.png

次に、pubspec.yaml の image_path が正しいか確認します。

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

フォルダ名が icon ではなく icons になっていたり、ファイル名が Icon.png のように大文字になっていたりすると、別のファイルとして扱われます。

Q. pubspec.yaml でエラーが出ます。

YAMLはインデントが重要です。

次のように、flutter_launcher_icons: は左端に置きます。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

次のように、設定部分を dev_dependencies の中に入れてしまうと、正しく読み取れません。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

  flutter_launcher_icons:
    android: true
    ios: true
    image_path: "assets/icon/icon.png"

同じ名前の flutter_launcher_icons が2回出てくるため、慣れないうちは階層を間違えやすいです。

Q. iOSでアイコンが透明になったり、背景が変に見えたりします。

iOSのアプリアイコンでは、透明背景を避けるのが基本です。

icon.png 自体に背景色を入れておきましょう。

今回のアプリなら、黒背景に赤いロゴのような画像が向いています。

さらに、設定に次の行を入れておきます。

remove_alpha_ios: true

これにより、iOS向けアイコンの透明部分を削除しやすくなります。

Q. コマンドを実行してもアイコンが変わりません。

まず、コマンドを正しい場所で実行しているか確認してください。

pubspec.yamlがある場所
↓
プロジェクトのルート

次に、古いアプリを端末やシミュレーターから削除して、もう一度実行します。

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

それでも変わらない場合は、iOSシミュレーターを再起動する、または実機からアプリを削除して再インストールします。

Q. Androidだけ変わって、iOSが変わりません。

設定で ios: true になっているか確認してください。

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

また、iOS側は古いアイコンが残って見えることがあります。

一度アプリを削除してから再実行してください。

Q. iOSだけ作りたい場合はどうしますか？

iOSだけ生成したい場合は、次のようにできます。

flutter_launcher_icons:
  android: false
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

Androidだけ作りたい場合は、逆にします。

flutter_launcher_icons:
  android: true
  ios: false
  image_path: "assets/icon/icon.png"

ただし、今回の教材では、iOSとAndroidの両方を true にしておくのが分かりやすいです。

まずカスタマイズしてみよう

まずは、アイコン画像を差し替えてみましょう。

同じ場所に、新しい icon.png を置きます。

assets/icon/icon.png

そのあと、もう一度コマンドを実行します。

dart run flutter_launcher_icons

そして、アプリを再実行します。

flutter run

ホーム画面のアイコンが変わるか確認しましょう。

アイコンのデザインを変えてみよう

今回のNETFLIX風アプリなら、次のようなアイコンが合いやすいです。

デザイン案内容
黒背景＋赤いNシンプルで動画アプリらしい
黒背景＋NETAFLIX文字アプリ名が分かりやすい
赤背景＋白い再生マーク動画アプリ感が強い
黒背景＋赤い再生ボタンPlay機能が伝わりやすい

ただし、アイコンは小さく表示されるため、細かい文字や複雑な装飾は避けた方がよいです。

小さく表示されても分かる
↓
よいアイコン

拡大しないと読めない
↓
アプリアイコンには不向き

アプリアイコン作成時のチェックリスト

アイコン画像を作るときは、次の点を確認しましょう。

チェック項目理由
正方形になっているかアイコン生成に使いやすい
1024×1024px程度か高解像度でもきれいに見える
背景が透明ではないかiOSで安定しやすい
文字が小さすぎないかホーム画面で読めなくなる
端まで要素が詰まっていないか丸角表示で切れる可能性がある
アプリの雰囲気に合っているかブランド感が出る

特に、文字を入れる場合は注意が必要です。

スマホのホーム画面では、アイコンはかなり小さく表示されます。

「大きく見たらかっこいい」ではなく、「小さく見ても分かる」ことを優先しましょう。

チャレンジ

チャレンジ1：icon.pngの場所を確認しよう

プロジェクト内で、次の場所に画像があるか確認してください。

assets/icon/icon.png

なければ、assets フォルダの中に icon フォルダを作り、その中に icon.png を置きます。

チャレンジ2：pubspec.yamlに設定を追加しよう

pubspec.yaml に、次の設定を追加してください。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

すでに dev_dependencies がある場合は、その中に flutter_launcher_icons: ^0.14.3 を追加します。

flutter_launcher_icons: の設定は、左端に置きます。

チャレンジ3：アイコン生成コマンドを実行しよう

ターミナルで、プロジェクトのルートに移動してから実行します。

flutter pub get
dart run flutter_launcher_icons

エラーが出なければ、iOS・Android用のアイコンが生成されます。

チャレンジ4：アプリを再実行して確認しよう

アイコン生成後、アプリを再実行します。

flutter run

ホーム画面のアイコンが変わっているか確認してください。

変わらない場合は、一度アプリを削除してから再実行します。

チャレンジの答え

チャレンジ1の答え

正しい配置は、次の通りです。

netflix_like_app/
└── assets/
    └── icon/
        └── icon.png

pubspec.yaml から見たパスは、次のようになります。

image_path: "assets/icon/icon.png"

チャレンジ2の答え

追加する設定は、次の通りです。

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  remove_alpha_ios: true

flutter_launcher_icons: の設定を、dev_dependencies の中に入れないように注意します。

チャレンジ3の答え

実行するコマンドは、次の通りです。

flutter pub get
dart run flutter_launcher_icons

実行場所は、pubspec.yaml があるプロジェクトのルートです。

netflix_like_app/
├── pubspec.yaml
├── lib/
├── ios/
└── android/

チャレンジ4の答え

アプリを再実行します。

flutter run

反映されない場合は、次の流れを試します。

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

それでも変わらない場合は、端末またはシミュレーターからアプリを削除して、もう一度実行します。

この節のまとめ

この節では、flutter_launcher_icons を使って、icon.png をアプリアイコンにする方法を学びました。

大切なポイントは次の通りです。

  • アプリアイコンは、ホーム画面に表示されるアプリの目印。
  • iOS・Androidでは、複数サイズのアイコン画像が必要。
  • flutter_launcher_icons を使うと、1枚の画像から必要なアイコンを自動生成できる。
  • 元画像は、assets/icon/icon.png のように分かりやすい場所に置く。
  • 元画像は、1024×1024px程度の正方形が扱いやすい。
  • iOSでは、透明背景を避けるのが基本。
  • flutter_launcher_icons は、開発中に使うツールなので dev_dependencies に入れる。
  • flutter_launcher_icons: の設定は、dev_dependencies の中ではなく、左端に書く。
  • image_path は、実際の画像ファイルの場所と一致させる。
  • android: true でAndroid用アイコンを生成する。
  • ios: true でiOS用アイコンを生成する。
  • remove_alpha_ios: true で、iOS向けアイコンの透明部分対策ができる。
  • flutter pub get でパッケージを取得する。
  • dart run flutter_launcher_icons でアイコンを生成する。
  • 反映されない場合は、アプリ削除、flutter clean、再実行を試す。

次のステップ

次の節では、完成コード全体を上から順に読みます。

これまで作ってきた NetflixLikeApp、MovieItem、Home画面、詳細画面、YouTube再生画面、Clips画面、Search画面、My Netaflix画面が、どのようにつながっているのかを整理します。

コード全体の流れが見えると、「このアプリはどう動いているのか」を自分の言葉で説明できるようになります。

前の節【Info.plist設定】アプリ名・画面向き・YouTube表示に関わるiOS設定を確認する次の節【完成コードを読む】NETFLIX風アプリの全体構造を上から順番に理解する
教材トップへ戻る