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

【アセット登録】logo.svgとicon.pngをFlutterアプリで使えるようにする

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

この節で学ぶこと

前の節では、YouTube再生、SVGロゴ、共有機能、アプリアイコン設定に使うパッケージを確認しました。

今回の節では、アプリで使う画像素材、つまり アセット について学びます。

今回使う主な画像は、次の2つです。

ファイル使い道
assets/images/logo.svgアプリ画面の中に表示するロゴ
assets/images/icon.pngスマホのホーム画面に表示するアプリアイコン

どちらも画像ですが、使われ方が少し違います。

logo.svg は、アプリの中の画面に表示する画像です。

たとえば、スプラッシュ画面、Home画面、Clips画面の上部などに表示されます。

一方で、icon.png は、アプリをインストールしたときにスマホのホーム画面に表示されるアイコンです。

これは普通の画像表示とは少し違い、専用の設定とコマンドが必要になります。

この違いを理解すると、Flutterで画像を扱うときにかなり迷いにくくなります。

アセットとは？

アセットとは、アプリの中で使う画像・音声・フォント・ファイルなどの素材のことです。

今回のアプリでは、ロゴとアイコン画像をアセットとして使います。

普段の言葉でいうと、アプリに必要な「素材置き場」のようなものです。

たとえば、Webサイトを作るときも、画像フォルダにロゴや写真を入れます。

Flutterでも同じように、画像を専用フォルダに入れて、それを pubspec.yaml に登録して使います。

今回のフォルダ構成

まず、画像ファイルの置き場所を確認しましょう。

今回のプロジェクトでは、次の形にします。

netflix_like_app/
├── assets/
│   └── images/
│       ├── logo.svg
│       └── icon.png
├── lib/
│   └── main.dart
└── pubspec.yaml

大切なのは、ファイル名と場所です。

今回のコードでは、ロゴをこのパスで読み込んでいます。

'assets/images/logo.svg'

そのため、実際のファイルも次の場所に置く必要があります。

assets/images/logo.svg

少しでも場所が違うと、Flutterは画像を見つけられません。

たとえば、次のような配置だと読み込めません。

assets/logo.svg

コードでは assets/images/logo.svg と書いているのに、実際は assets/logo.svg にあるためです。

Flutterでは、こういうファイルパスのズレがよくあるので、まずはここを丁寧に確認しましょう。

pubspec.yamlに画像フォルダを登録する

画像をフォルダに入れただけでは、Flutterアプリではまだ使えません。

pubspec.yaml に、画像フォルダを登録する必要があります。

今回の設定はここです。

flutter:
  uses-material-design: true
  assets:
    - assets/images/

これは、

assets/images/ フォルダの中にある画像をアプリで使います

という意味です。

この書き方をしておくと、assets/images/ の中にある logo.svg や icon.png をFlutterから使えるようになります。

YAMLの空白に注意しよう

pubspec.yaml は、空白の位置がとても大切です。

正しい書き方はこれです。

flutter:
  uses-material-design: true
  assets:
    - assets/images/

flutter: の下にある uses-material-design: と assets: は、半角スペース2つ分下げます。

さらに、- assets/images/ も assets: の下に書きます。

間違いやすい例はこちらです。

flutter:
uses-material-design: true
assets:
- assets/images/

見た目は似ていますが、この書き方だとエラーになることがあります。

YAMLは、インデント、つまり左側の空白で意味が変わります。

少し細かいですが、ここはFlutter初心者がよくつまずく場所なので、落ち着いて確認しましょう。

logo.svgを画面に表示する

今回のアプリでは、logo.svg を表示するために flutter_svg を使っています。

main.dart の上には、次のimportがあります。

import 'package:flutter_svg/flutter_svg.dart';

このimportがあることで、SvgPicture が使えるようになります。

ロゴを表示しているのは、次のクラスです。

class NetflixWordLogo extends StatelessWidget {
  const NetflixWordLogo({
    super.key,
    required this.height,
  });

  final double height;

  @override
  Widget build(BuildContext context) {
    return SvgPicture.asset(
      'assets/images/logo.svg',
      height: height,
      fit: BoxFit.contain,
      semanticsLabel: 'NETAFLIX logo',
      placeholderBuilder: (context) {
        return SizedBox(
          height: height,
          child: const Center(
            child: CircularProgressIndicator(
              strokeWidth: 2,
              color: NetflixColors.red,
            ),
          ),
        );
      },
    );
  }
}

ここで一番大切なのは、この部分です。

SvgPicture.asset(
  'assets/images/logo.svg',
)

これは、

assets/images/logo.svg にあるSVG画像を表示してください

という意味です。

NetflixWordLogoクラスを作る理由

ロゴを表示したいだけなら、毎回このように書くこともできます。

SvgPicture.asset(
  'assets/images/logo.svg',
  height: 28,
)

でも、アプリの中ではロゴをいろいろな場所で使います。

たとえば、スプラッシュ画面では大きめに表示します。

const NetflixWordLogo(height: 54)

Home画面のヘッダーでは少し小さめに表示します。

const NetflixWordLogo(height: 28)

Clips画面では、右上に小さく表示します。

const NetflixWordLogo(height: 24)

このように、ロゴ表示を NetflixWordLogo という部品にしておくと、毎回長いコードを書かなくて済みます。

必要なときに高さだけ変えればいいので、とても使いやすくなります。

heightを変えるとどうなる？

NetflixWordLogo には height という値があります。

const NetflixWordLogo(height: 54)

この数字を変えると、ロゴの大きさが変わります。

たとえば、スプラッシュ画面のロゴを大きくしたい場合は、

const NetflixWordLogo(height: 54)

を

const NetflixWordLogo(height: 70)

に変更します。

保存してアプリを再起動すると、ロゴが大きく表示されます。

このように、height はロゴの見た目を調整するための値です。

placeholderBuilderとは？

NetflixWordLogo の中には、次のようなコードがあります。

placeholderBuilder: (context) {
  return SizedBox(
    height: height,
    child: const Center(
      child: CircularProgressIndicator(
        strokeWidth: 2,
        color: NetflixColors.red,
      ),
    ),
  );
},

これは、SVG画像の読み込み中に表示する仮のUIです。

画像がすぐに表示されれば、ほとんど見ることはありません。

ただ、読み込みに少し時間がかかる場合や、画像の準備中に、赤い小さなローディングが出るようになります。

アプリとしては、画像が表示されるまで何も出ないよりも、読み込み中だと分かったほうが親切です。

logo.svgが表示されないときの確認ポイント

ロゴが表示されないときは、次の順番で確認しましょう。

確認すること内容
ファイルの場所assets/images/logo.svg に本当にあるか
ファイル名logo.svg のスペルが合っているか
pubspec.yamlassets/images/ が登録されているか
importflutter_svg/flutter_svg.dart があるか
パッケージflutter_svg: ^2.0.17 があるか
コマンドflutter pub get を実行したか

特に多いのは、ファイル名の間違いです。

たとえば、実際のファイル名がこちらだとします。

Logo.svg

でもコードでは、

'assets/images/logo.svg'

と書いている場合、大文字と小文字が違うので読み込めないことがあります。

できれば、ファイル名はすべて小文字にしておくと安心です。

icon.pngは何に使う？

次に、icon.png を見ていきます。

icon.png は、アプリの中に表示する画像ではありません。

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

今回の設定では、次のファイルを使っています。

assets/images/icon.png

そして、pubspec.yaml では次のように設定しています。

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

これは、

assets/images/icon.png を使って、AndroidとiOS用のアプリアイコンを作ってください

という意味です。

icon.pngは画面に表示する画像とは違う

ここは少し大切です。

logo.svg は、アプリの画面内に表示する画像です。

そのため、main.dart の中で次のように使います。

SvgPicture.asset(
  'assets/images/logo.svg',
)

一方で、icon.png は、アプリのホーム画面アイコンです。

そのため、main.dart の中で直接表示するわけではありません。

flutter_launcher_icons というパッケージを使って、iOSやAndroid用のアイコン画像を自動生成します。

つまり、違いはこうです。

画像表示される場所使い方
logo.svgアプリ画面の中SvgPicture.asset で表示する
icon.pngスマホのホーム画面flutter_launcher_icons で反映する

この違いは、かなり大事です。

アプリアイコンを反映するコマンド

icon.png を用意して pubspec.yaml に設定を書いたら、次のコマンドを実行します。

flutter pub get
dart run flutter_launcher_icons

まず flutter pub get で、パッケージを読み込みます。

そのあと、dart run flutter_launcher_icons で、アイコン画像を生成します。

これで、iOSやAndroid用のアイコンが自動で作られます。

アイコンが変わらないとき

アプリアイコンは、少しキャッシュが残りやすいです。

コードやロゴ画像の変更と違って、ホットリロードだけでは反映されません。

うまく変わらない場合は、次の流れで試してください。

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

それでも変わらない場合は、iPhoneシミュレーターや実機からアプリを一度削除して、もう一度インストールしてください。

アプリアイコンは、スマホ側が古いものを覚えていることがあります。

icon.pngの画像サイズ

アプリアイコン用の画像は、できれば次のようなものを用意します。

1024px × 1024px
PNG形式
背景あり
角丸なし

iOSでは、アイコンの角丸は自動でつきます。

そのため、自分で最初から角丸にしておく必要はありません。

また、透明背景のPNGは、iOSでうまく見えないことがあります。

今回の設定では、

remove_alpha_ios: true

と書いています。

これは、iOS用に透明部分を取り除く設定です。

ただ、最初から背景ありのPNGにしておくと、さらに安心です。

logo.svgとicon.pngをまとめて確認する

ここまでの内容を、一度整理しましょう。

項目logo.svgicon.png
保存場所assets/images/logo.svgassets/images/icon.png
使われる場所アプリ画面の中スマホのホーム画面
使うパッケージflutter_svgflutter_launcher_icons
main.dartで使う？使う基本的に使わない
pubspec.yamlのassets登録必要画像管理として登録してOK
専用コマンド不要dart run flutter_launcher_icons が必要

同じ assets/images/ に入っていても、使い方が違うという点を押さえておきましょう。

画像を変えるときの流れ

ロゴを変えるときと、アイコンを変えるときでは、少し流れが違います。

ロゴを変える場合

assets/images/logo.svg を差し替えます。

そのあと、アプリを再起動します。

flutter run

うまく反映されない場合は、次のようにします。

flutter clean
flutter pub get
flutter run

アイコンを変える場合

assets/images/icon.png を差し替えます。

そのあと、次のコマンドを実行します。

flutter pub get
dart run flutter_launcher_icons
flutter run

反映されない場合は、アプリを一度削除してから再インストールします。

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

今回は、ロゴの表示サイズを少し変えてみましょう。

SplashScreen の中にある次のコードを探してください。

const NetflixWordLogo(height: 54),

この数字を変えてみます。

const NetflixWordLogo(height: 70),

保存して、アプリを再起動してください。

スプラッシュ画面のロゴが大きくなれば成功です。

もし大きすぎると感じたら、

const NetflixWordLogo(height: 60),

くらいにしてみるのも良いです。

このように、少しずつ数字を変えて画面を確認すると、UI調整の感覚がつかみやすくなります。

もうひとつカスタマイズしてみよう

次は、Home画面のヘッダーにあるロゴの大きさを変えてみます。

NetflixHeader の中にあるこのコードを探してください。

const NetflixWordLogo(height: 28),

これを少し大きくしてみます。

const NetflixWordLogo(height: 34),

保存して、画面を確認してください。

上部のロゴが少し大きくなります。

もし大きくしすぎると、左右のメニューアイコンやプロフィール画像とのバランスが悪くなることがあります。

UIでは、ただ大きくすれば良いわけではありません。

周りの余白や、他の要素とのバランスも大切です。

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

Q. logo.svg が表示されません。

まずは、この3つを確認してください。

assets/images/logo.svg

assets:
  - assets/images/

import 'package:flutter_svg/flutter_svg.dart';

さらに、pubspec.yaml を変更したあとは、次のコマンドを実行します。

flutter pub get

Q. icon.png を入れたのにホーム画面のアイコンが変わりません。

icon.png を置いただけでは、アプリアイコンは変わりません。

次のコマンドが必要です。

dart run flutter_launcher_icons

それでも変わらない場合は、アプリを一度削除してから再インストールしてください。

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

空白の位置を確認してください。

正しい形はこちらです。

flutter:
  uses-material-design: true
  assets:
    - assets/images/

flutter:、assets:、- assets/images/ の位置がずれているとエラーになります。

Q. SVGではなくPNGのロゴを使いたいです。

PNGを使う場合は、SvgPicture.asset ではなく、Image.asset を使います。

たとえば、assets/images/logo.png を使うなら、次のようになります。

Image.asset(
  'assets/images/logo.png',
  height: height,
  fit: BoxFit.contain,
)

SVGなら SvgPicture.asset、PNGなら Image.asset と覚えておくと分かりやすいです。

チャレンジ

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

次の場所にロゴ画像があるか確認してください。

assets/images/logo.svg

ファイル名が Logo.svg や logo.SVG になっていないかも確認しましょう。

チャレンジ2：pubspec.yamlのassets設定を確認しよう

次の設定が入っているか確認してください。

flutter:
  uses-material-design: true
  assets:
    - assets/images/

空白の位置も含めて、見比べてみましょう。

チャレンジ3：スプラッシュ画面のロゴを大きくしよう

SplashScreen の中にある次のコードを探します。

const NetflixWordLogo(height: 54),

これを次のように変えてみましょう。

const NetflixWordLogo(height: 70),

保存して、アプリを再起動してください。

チャレンジ4：アプリアイコンを反映しよう

assets/images/icon.png を用意したら、次のコマンドを実行しましょう。

flutter pub get
dart run flutter_launcher_icons

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

チャレンジの答え

チャレンジ1の答え

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

assets/
└── images/
    └── logo.svg

コードでは、次のパスで読み込んでいます。

'assets/images/logo.svg'

この2つが一致していればOKです。

チャレンジ2の答え

正しいassets設定は次の通りです。

flutter:
  uses-material-design: true
  assets:
    - assets/images/

この設定によって、assets/images/ の中にある画像をFlutterで使えるようになります。

チャレンジ3の答え

変更前：

const NetflixWordLogo(height: 54),

変更後：

const NetflixWordLogo(height: 70),

スプラッシュ画面中央のロゴが大きく表示されます。

チャレンジ4の答え

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

flutter pub get
dart run flutter_launcher_icons

反映されない場合は、次の流れも試してください。

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

それでも古いアイコンが出る場合は、アプリを一度削除してから再インストールします。

この節のまとめ

この節では、logo.svg と icon.png をFlutterアプリで使う方法を学びました。

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

  • アセットとは、アプリで使う画像やファイルなどの素材のこと。
  • logo.svg は、アプリ画面の中に表示するロゴ。
  • icon.png は、スマホのホーム画面に表示するアプリアイコン。
  • assets/images/ に画像を入れたら、pubspec.yaml に登録する。
  • SVG画像を表示するには、flutter_svg と SvgPicture.asset を使う。
  • アプリアイコンを反映するには、flutter_launcher_icons と専用コマンドを使う。
  • ロゴが出ないときは、ファイルの場所、ファイル名、pubspec.yaml、importを確認する。

次のステップ

次の節では、アプリ起動時に表示される スプラッシュ画面 を作る部分を見ていきます。

黒背景の中央にロゴを置き、その下に小さく説明文を表示することで、アプリを開いた瞬間の印象を作っています。

前の節【パッケージ設定】YouTube再生・SVGロゴ・共有・アプリアイコンのライブラリを確認する次の節【スプラッシュ画面】アプリ起動時に黒背景・中央ロゴ・説明文を表示する
教材トップへ戻る