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

【完成コードの使い方】pubspec.yaml・main.dart・画像素材を準備する

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

この節で学ぶこと

前の節では、NETFLIX風アプリの完成形を見ながら、アプリ全体の雰囲気をつかみました。

今回の節では、完成コードを動かすために必要な準備をしていきます。

アプリ開発では、いきなり main.dart を書き始めるのではなく、まず「必要なファイルがそろっているか」「画像素材が正しい場所にあるか」「パッケージが読み込める状態になっているか」を確認することが大切です。

今回見る主なファイルは、次の3つです。

ファイル・フォルダ役割
pubspec.yamlアプリで使うパッケージや画像素材を登録するファイル
lib/main.dartアプリ本体のコードを書くファイル
assets/images/ロゴやアイコン画像を入れておくフォルダ

この3つが正しく準備できると、完成コードを動かすための土台が整います。

まずはフォルダ構成を確認しよう

今回のアプリでは、プロジェクトの中身がだいたい次のようになっていればOKです。

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

最初は、全部の意味が分からなくても大丈夫です。

今はまず、

pubspec.yaml
lib/main.dart
assets/images/logo.svg
assets/images/icon.png

この4つがあるかを確認してください。

この4つが、今回の教材で特によく使うファイルです。

pubspec.yamlとは？

pubspec.yaml は、Flutterアプリの「設定ファイル」です。

もう少し普段の言葉で言うと、アプリに必要なものを書いておく 持ち物リスト のようなものです。

たとえば、今回のアプリでは次のようなものを使っています。

必要なもの何に使うか
YouTube再生作品の動画を表示する
Google Fonts文字の見た目を整える
SVGロゴ表示logo.svg を画面に表示する
共有機能iOSの共有画面を表示する
アプリアイコン生成icon.png をアプリのアイコンにする
画像素材ロゴやアイコンを読み込む

これらをFlutterに伝えるのが、pubspec.yaml の役割です。

今回使うpubspec.yaml

今回の完成コードでは、pubspec.yaml は次のような形になります。

name: netflix_like_app
description: Netflix-like Flutter UI mock app with YouTube playback.
publish_to: 'none'

environment:
  sdk: ^3.6.0

dependencies:
  flutter:
    sdk: flutter
  youtube_player_iframe: ^5.2.2
  google_fonts: ^7.0.0
  flutter_svg: ^2.0.17
  share_plus: ^12.0.1
  flutter_launcher_icons: ^0.14.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

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

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

ここで大切なのは、全部を暗記することではありません。

まずは、「どこに何を書くか」をざっくりつかめば大丈夫です。

dependenciesとは？

dependencies は、アプリを動かすために必要なパッケージを書く場所です。

パッケージとは、便利な機能をまとめて使えるようにしたものです。

今回使っているパッケージを見てみましょう。

パッケージ役割
youtube_player_iframeYouTube動画をアプリ内で再生する
google_fontsGoogle Fontsのフォントを使う
flutter_svgSVG形式のロゴ画像を表示する
share_plusiOSやAndroidの共有画面を表示する
flutter_launcher_iconsアプリアイコンを自動生成する

たとえば、flutter_svg がないと、次のようなコードは使えません。

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

つまり、pubspec.yaml にパッケージを書くことで、main.dart の中でその機能を使えるようになります。

assetsとは？

assets は、アプリで使う画像やファイルを登録する場所です。

今回のコードでは、次のように書いています。

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

これは、

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

という意味です。

今回、この中には次の画像を入れています。

ファイル使い道
logo.svgアプリ内のロゴ
icon.pngホーム画面に表示されるアプリアイコン

ここでよくあるミスは、ファイルの場所がずれていることです。

たとえば、コードではこう書いているのに、

'assets/images/logo.svg'

実際のファイルがこちらにあると、表示されません。

assets/logo.svg

Flutterでは、ファイルの場所をかなり正確に見ます。

assets/images/logo.svg と書いたら、本当にその場所にファイルが必要です。

YAMLで気をつけること

pubspec.yaml は、書き方に少しクセがあります。

特に大切なのは、空白の位置 です。

たとえば、これはOKです。

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

でも、次のように空白がずれるとエラーになることがあります。

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

YAMLでは、空白にも意味があります。

見た目は少し地味ですが、Flutterではかなり大切なファイルです。

main.dartとは？

main.dart は、アプリ本体を書くファイルです。

Flutterアプリは、基本的にここから始まります。

今回のコードでも、最初の方に次のようなコードがあります。

void main() {
  runApp(const NetflixLikeApp());
}

これは、

NetflixLikeAppというアプリを起動してください

という意味です。

Flutterアプリは、まず main() から始まり、runApp() で画面を表示します。

main.dartの中には何が入っている？

今回の main.dart は少し長いですが、中身は大きく分けると次のようになっています。

部分内容
import使うパッケージを読み込む
NetflixLikeAppアプリ全体の設定
NetflixColors色の管理
MovieItem作品データの設計
movies作品データ一覧
SplashScreen起動画面
NetflixShellPage下部ナビゲーションの管理
NetflixHomePageHome画面
ClipsPageClips画面
SearchPage検索画面
MyNetflixPageMy Netaflix画面
MovieDetailPage作品詳細画面
YouTubePlayerPageYouTube再生画面

こうして分けて見ると、長いコードも少し見やすくなります。

最初から全部を理解しようとしなくて大丈夫です。

まずは、「このクラスはこの画面を作っているんだな」くらいでOKです。

importとは？

main.dart の一番上には、次のようなコードがあります。

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:share_plus/share_plus.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

import は、必要な道具を使えるようにするための準備です。

たとえば、次のようなイメージです。

import使えるようになるもの
flutter/material.dartFlutterの基本UI
flutter_svg/flutter_svg.dartSVG画像の表示
google_fonts/google_fonts.dartGoogle Fonts
share_plus/share_plus.dart共有機能
youtube_player_iframe/youtube_player_iframe.dartYouTube再生

もし flutter_svg を使っているのに、importを書いていないと、

SvgPicture が見つかりません

というようなエラーになります。

つまり、pubspec.yaml は「パッケージをアプリに入れる場所」、import は「そのパッケージをこのファイルで使うための準備」です。

画像素材を準備しよう

今回使う画像素材は、主に2つです。

assets/images/logo.svg
assets/images/icon.png

それぞれの役割は次の通りです。

ファイル役割
logo.svgアプリ内に表示するロゴ
icon.pngスマホのホーム画面に表示されるアプリアイコン

logo.svg は、アプリの中で次のように使われています。

SvgPicture.asset(
  'assets/images/logo.svg',
  height: height,
  fit: BoxFit.contain,
)

icon.png は、flutter_launcher_icons の設定で使われています。

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

ここで大切なのは、logo.svg と icon.png は使われ方が違うということです。

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

icon.png はアプリそのもののアイコンとして使う画像です。

パッケージを読み込む

pubspec.yaml を書いたら、ターミナルで次のコマンドを実行します。

flutter pub get

これは、pubspec.yaml に書かれたパッケージをFlutterに読み込ませるコマンドです。

普段の言葉で言うと、

必要な道具を全部そろえてください

という指示です。

このコマンドを実行しないと、main.dart でパッケージを使おうとしてもエラーになることがあります。

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

assets/images/icon.png をアプリアイコンとして使うには、次のコマンドを実行します。

dart run flutter_launcher_icons

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

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

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

iPhoneシミュレーターや実機で古いアイコンが残る場合は、一度アプリを削除してからもう一度実行すると反映されやすいです。

アプリを起動する

準備ができたら、アプリを起動します。

flutter run

成功すると、黒いスプラッシュ画面が表示され、そのあとHome画面に移動します。

最初に確認するポイントは次の通りです。

確認する場所見るポイント
Splash画面ロゴと説明文が表示されるか
Home画面背景画像や作品一覧が表示されるか
BottomNavigationBarHome / Clips / Search / My Netaflix が表示されるか
Search画面検索欄が表示されるか
Clips画面縦スクロールできるか
詳細画面PlayやShareボタンが表示されるか

全部が完璧に動かなくても、まずは画面が立ち上がれば大きな前進です。

よくあるエラーと確認ポイント

Q. ロゴが表示されません。

まず、ファイルの場所を確認してください。

assets/images/logo.svg

次に、pubspec.yaml に次の設定があるか確認します。

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

さらに、main.dart にこのimportがあるか確認します。

import 'package:flutter_svg/flutter_svg.dart';

Q. パッケージが見つからないと言われます。

flutter pub get を実行してください。

flutter pub get

それでも直らない場合は、アプリを止めてからもう一度実行してみます。

flutter clean
flutter pub get
flutter run

Q. アプリアイコンが変わりません。

まず、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

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

dart run flutter_launcher_icons

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

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

多くの場合、空白の位置が原因です。

特に、次の部分を確認してください。

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

flutter: の下は、半角スペース2つ分あけるのが基本です。

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

ここまで準備できたら、少しだけカスタマイズしてみましょう。

今回は、アプリ名を変えてみます。

MaterialApp の中にある次の部分を探してください。

title: 'NETAFLIX',

これを、たとえば次のように変えます。

title: 'MOVIE LAB',

保存して、アプリを再起動してみましょう。

この title は、画面に大きく表示されるものではありませんが、アプリ内部の名前として使われます。

次に、iOSのホーム画面に表示される名前も変えたい場合は、Info.plist の次の部分を見ます。

<key>CFBundleDisplayName</key>
<string>Netflix Mock</string>

ここを次のように変えることができます。

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

このように、Flutter側の設定とiOS側の設定が別々にあることも、少しずつ覚えていきましょう。

チャレンジ

チャレンジ1：assets/images/に画像があるか確認しよう

次の2つのファイルがあるか確認してください。

assets/images/logo.svg
assets/images/icon.png

見つからない場合は、フォルダ名やファイル名が間違っていないか確認しましょう。

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

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

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

空白の位置も含めて確認しましょう。

チャレンジ3：アプリ名をカスタマイズしてみよう

MaterialApp の中にある、

title: 'NETAFLIX',

を好きな名前に変えてみましょう。

例：

title: 'MOVIE LAB',

チャレンジ4：iOSに表示されるアプリ名を変えてみよう

ios/Runner/Info.plist の中にある、

<key>CFBundleDisplayName</key>
<string>Netflix Mock</string>

を探して、表示名を変えてみましょう。

例：

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

チャレンジの答え

チャレンジ1の答え

正しい配置は次の形です。

assets/
└── images/
    ├── logo.svg
    └── icon.png

assets/image/ や asset/images/ のように、少しでも名前が違うと読み込めません。

チャレンジ2の答え

正しい書き方は次の通りです。

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

assets: の前の空白、- assets/images/ の前の空白が大切です。

チャレンジ3の答え

変更前：

title: 'NETAFLIX',

変更後の例：

title: 'MOVIE LAB',

これはFlutterアプリ内部のタイトルです。

チャレンジ4の答え

変更前：

<key>CFBundleDisplayName</key>
<string>Netflix Mock</string>

変更後の例：

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

iPhoneのホーム画面に表示される名前を変えたいときに関係します。

この節のまとめ

この節では、完成コードを動かすための準備をしました。

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

  • pubspec.yaml は、アプリで使うパッケージや画像素材を登録するファイル。
  • main.dart は、Flutterアプリ本体を書くファイル。
  • assets/images/ には、ロゴやアイコン画像を入れる。
  • パッケージを追加したら、flutter pub get を実行する。
  • アプリアイコンを反映するには、dart run flutter_launcher_icons を実行する。
  • 画像が表示されないときは、ファイルの場所と pubspec.yaml の設定を確認する。

次のステップ

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

黒い背景の中央にロゴを表示し、その下に、

このアプリは授業の一環で作成しました。

という説明文を出しています。

次は、アプリを開いた瞬間の第一印象を作る部分を学んでいきましょう。

前の節【導入】NETFLIX風アプリを動かして、完成形の全体像をつかむ次の節【パッケージ設定】YouTube再生・SVGロゴ・共有・アプリアイコンのライブラリを確認する
教材トップへ戻る