【パッケージ設定】YouTube再生・SVGロゴ・共有・アプリアイコンのライブラリを確認する | NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発 | Flutterアプリケーション開発概論

この節で学ぶこと

前の節では、完成コードを動かすために必要な pubspec.yaml、main.dart、画像素材の準備を確認しました。

今回の節では、pubspec.yaml に書かれている パッケージ を見ていきます。

パッケージとは、Flutterアプリに便利な機能を追加するための道具のようなものです。

今回のNETAFLIX風アプリでは、次のような機能を使っています。

機能	使用するパッケージ
YouTube動画を再生する	`youtube_player_iframe`
Google Fontsを使う	`google_fonts`
SVGロゴを表示する	`flutter_svg`
共有ボタンを使う	`share_plus`
アプリアイコンを設定する	`flutter_launcher_icons`

この節では、それぞれのパッケージがどこで使われているのかを確認していきます。

全部を暗記する必要はありません。

まずは、「この機能にはこのパッケージが使われているんだな」と分かれば大丈夫です。

pubspec.yamlのdependenciesを見てみよう

今回の pubspec.yaml では、次のようにパッケージを登録しています。

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

dependencies は、アプリ本体で使うパッケージを書く場所です。

たとえば、main.dart の中でYouTubeを再生したい場合は、youtube_player_iframe が必要です。

SVGロゴを表示したい場合は、flutter_svg が必要です。

iOSの共有画面を出したい場合は、share_plus が必要です。

つまり、ここはアプリに必要な道具をそろえる場所です。

main.dartのimportを見てみよう

pubspec.yaml にパッケージを書いただけでは、まだ main.dart の中で使える状態にはなっていません。

main.dart で使うためには、ファイルの一番上に import を書きます。

今回のコードでは、このようになっています。

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	役割
`flutter/material.dart`	Flutterの基本的な画面部品を使う
`flutter_svg/flutter_svg.dart`	SVG画像を表示する
`google_fonts/google_fonts.dart`	Google Fontsを使う
`share_plus/share_plus.dart`	共有機能を使う
`youtube_player_iframe/youtube_player_iframe.dart`	YouTube動画を再生する

pubspec.yaml は、アプリ全体にパッケージを入れる場所です。

import は、そのファイルの中でパッケージを使えるようにするための準備です。

この2つはセットで覚えておくと分かりやすいです。

youtube_player_iframe：YouTube動画を再生する

まずは、YouTube再生に使っているパッケージです。

youtube_player_iframe: ^5.2.2

このアプリでは、作品詳細画面やClips画面の再生ボタンを押すと、YouTube動画が表示されます。

その部分で使っているのが youtube_player_iframe です。

main.dart では、次のimportで使えるようにしています。

import 'package:youtube_player_iframe/youtube_player_iframe.dart';

実際に使っているクラスは、主にこの2つです。

クラス	役割
`YoutubePlayerController`	どの動画を再生するかを管理する
`YoutubePlayerScaffold`	YouTubeプレイヤーを画面に表示する

コードの中では、このように使っています。

controller = YoutubePlayerController.fromVideoId(
  videoId: widget.movie.youtubeVideoId,
  autoPlay: true,
  params: const YoutubePlayerParams(
    showControls: true,
    showFullscreenButton: true,
    playsInline: true,
    strictRelatedVideos: true,
    enableCaption: true,
  ),
);

ここで大切なのは、youtubeVideoId です。

YouTubeのURL全体ではなく、動画IDだけを使っています。

たとえば、次のURLがあるとします。

https://www.youtube.com/watch?v=oqxAJKy0ii4

この中の動画IDは、こちらです。

oqxAJKy0ii4

今回の作品データでは、次のように動画IDを登録しています。

youtubeVideoId: 'oqxAJKy0ii4',

この値を変えると、再生される動画も変わります。

google_fonts：フォントを整える

次に、フォントを整えるためのパッケージです。

google_fonts: ^7.0.0

このアプリでは、文字の見た目を整えるために google_fonts を使っています。

main.dart では、次のようにimportしています。

import 'package:google_fonts/google_fonts.dart';

実際に使っているのは、MaterialApp のテーマ設定の中です。

theme: baseTheme.copyWith(
  textTheme: GoogleFonts.notoSansTextTheme(baseTheme.textTheme),
),

これは、アプリ全体の文字に Noto Sans 系のフォントを使う設定です。

アプリの雰囲気は、色や画像だけではなく、文字の見た目でも大きく変わります。

同じ黒背景でも、フォントが違うだけで、少しかたい印象になったり、やわらかい印象になったりします。

今回の教材では、読みやすさを重視して Noto Sans を使っています。

flutter_svg：SVGロゴを表示する

次は、SVGロゴを表示するためのパッケージです。

flutter_svg: ^2.0.17

SVGは、ロゴやアイコンによく使われる画像形式です。

PNGやJPEGと違って、拡大してもきれいに表示されやすいのが特徴です。

今回のアプリでは、assets/images/logo.svg をロゴとして表示しています。

main.dart では、次のようにimportしています。

import 'package:flutter_svg/flutter_svg.dart';

実際にロゴを表示しているのは、NetflixWordLogo クラスです。

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',
    );
  }
}

ポイントはここです。

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

これは、

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

という意味です。

もしロゴが表示されない場合は、まず次の3つを確認します。

確認すること	内容
ファイルの場所	`assets/images/logo.svg` に本当にあるか
pubspec.yaml	`assets/images/` が登録されているか
import	`flutter_svg` をimportしているか

share_plus：共有画面を表示する

次は、共有ボタンに使っているパッケージです。

share_plus: ^12.0.1

share_plus を使うと、iPhoneやAndroidの共有画面を表示できます。

たとえば、LINE、メッセージ、メール、AirDropなどにテキストやURLを共有できます。

main.dart では、次のようにimportしています。

import 'package:share_plus/share_plus.dart';

今回のコードでは、共有処理を共通関数にまとめています。

Future<void> shareNetaflixMovie({
  required BuildContext context,
  required MovieItem movie,
}) async {
  await SharePlus.instance.share(
    ShareParams(
      text:
          'NETAFLIXで「${movie.title}」をチェック！\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',
      subject: movie.title,
      sharePositionOrigin: shareOriginFromContext(context),
    ),
  );
}

この関数を使うと、作品ごとに共有文を作れます。

たとえば、Squid Game の場合は、次のような文章を共有できます。

NETAFLIXで「Squid Game」をチェック！
https://www.youtube.com/watch?v=oqxAJKy0ii4

sharePositionOriginとは？

share_plus をiOSやiPadOSで使うときに大切なのが、sharePositionOrigin です。

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

sharePositionOrigin: shareOriginFromContext(context),

これは、共有画面をどの位置から表示するかを指定しています。

特にiPadでは、この指定がないとエラーになることがあります。

そのため、今回のコードでは次の関数を作っています。

Rect shareOriginFromContext(BuildContext context) {
  final size = MediaQuery.sizeOf(context);

  return Rect.fromLTWH(
    1,
    1,
    size.width <= 2 ? 1 : size.width - 2,
    size.height <= 2 ? 1 : size.height - 2,
  );
}

少し難しく見えますが、今はこう覚えておけば大丈夫です。

iOSやiPadOSで共有画面を安全に出すための位置指定

共有機能でエラーが出たときは、この sharePositionOrigin が設定されているか確認しましょう。

flutter_launcher_icons：アプリアイコンを設定する

次は、アプリアイコンを設定するためのパッケージです。

flutter_launcher_icons: ^0.14.3

これは、assets/images/icon.png を使って、iOSやAndroidのアプリアイコンを自動生成するためのパッケージです。

設定は、pubspec.yaml の下の方に書いています。

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

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

設定	意味
`android: true`	Android用のアイコンを作る
`ios: true`	iOS用のアイコンを作る
`image_path`	元になるアイコン画像の場所
`remove_alpha_ios`	iOS用に透明部分をなくす

アイコンを反映するときは、次のコマンドを実行します。

dart run flutter_launcher_icons

その前に、パッケージを読み込むためにこちらも実行しておきます。

flutter pub get

dependenciesとdev_dependenciesの違い

ここで少し整理しておきましょう。

pubspec.yaml には、dependencies と dev_dependencies があります。

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

ざっくり言うと、こうです。

種類	役割
`dependencies`	アプリを動かすために必要なもの
`dev_dependencies`	開発中に使うもの

ただし、flutter_launcher_icons は少し特殊です。

アプリの中で直接使うというより、アイコンを生成するための開発用ツールです。

そのため、本来は dev_dependencies に入れることも多いです。

今回のように dependencies に入れても動きますが、整理するなら次のようにしてもよいです。

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0
  flutter_launcher_icons: ^0.14.3

授業では、まず「動くこと」を優先して、今の書き方のままでも大丈夫です。

余裕が出てきたら、dependencies と dev_dependencies の使い分けも意識してみましょう。

パッケージを追加したら必ずやること

pubspec.yaml を変更したら、必ず次のコマンドを実行します。

flutter pub get

これを忘れると、コードを書いてもパッケージが読み込まれません。

たとえば、share_plus を追加したのに flutter pub get をしていないと、次のようなエラーが出ることがあります。

Target of URI doesn't exist: 'package:share_plus/share_plus.dart'

これは、

share_plusが見つかりません

という意味です。

そんなときは、まず flutter pub get を実行しましょう。

バージョン番号の見方

パッケージ名の後ろには、次のような番号がついています。

share_plus: ^12.0.1

この 12.0.1 は、パッケージのバージョンです。

バージョンが変わると、使い方が少し変わることがあります。

たとえば、share_plus では、古い書き方として次のようなコードが使われていました。

Share.share(
  '共有したいテキスト',
);

しかし、今回のコードでは、より新しい書き方を使っています。

SharePlus.instance.share(
  ShareParams(
    text: '共有したいテキスト',
  ),
);

パッケージを使うときは、バージョンによって書き方が変わることがある、という点も覚えておきましょう。

今回のコードでパッケージが使われている場所

今回のアプリで、各パッケージがどこに出てくるかをまとめると、次のようになります。

パッケージ	main.dartで使われる場所
`youtube_player_iframe`	`YouTubePlayerPage`
`google_fonts`	`NetflixLikeApp`
`flutter_svg`	`NetflixWordLogo`
`share_plus`	`shareNetaflixMovie`
`flutter_launcher_icons`	`main.dart` ではなく `pubspec.yaml` とコマンドで使う

特に大切なのは、flutter_launcher_icons です。

これは main.dart にimportしません。

アプリの画面を作るパッケージではなく、アイコン画像を生成するためのパッケージだからです。

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

今回は、共有文を少しカスタマイズしてみます。

次の関数を探してください。

Future<void> shareNetaflixMovie({
  required BuildContext context,
  required MovieItem movie,
}) async {
  await SharePlus.instance.share(
    ShareParams(
      text:
          'NETAFLIXで「${movie.title}」をチェック！\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',
      subject: movie.title,
      sharePositionOrigin: shareOriginFromContext(context),
    ),
  );
}

この中の共有文を、少し自然な文章にしてみます。

変更前：

text:
    'NETAFLIXで「${movie.title}」をチェック！\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',

変更後：

text:
    '授業で作ったNETAFLIX風アプリで「${movie.title}」を見つけました。\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}',

保存して、アプリを起動し、Shareボタンを押してみましょう。

共有画面に表示される文章が変わっていれば成功です。

チャレンジ1：YouTube動画IDを変えてみよう

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

youtubeVideoId: 'oqxAJKy0ii4',

この動画IDを別のYouTube動画IDに変えてみましょう。

保存したら、作品のPlayボタンを押して、再生される動画が変わるか確認してください。

チャレンジ2：ロゴの高さを変えてみよう

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

const NetflixWordLogo(height: 54),

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

const NetflixWordLogo(height: 70),

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

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

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

assets/images/icon.png を用意したら、次のコマンドを実行してください。

flutter pub get
dart run flutter_launcher_icons

その後、アプリを再インストールして、ホーム画面のアイコンが変わるか確認しましょう。

チャレンジ4の答え

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

flutter pub get
dart run flutter_launcher_icons

反映されない場合は、次の流れで試してみましょう。

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

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

Q. YouTubeが表示されません。

まず、youtubeVideoId が正しいか確認してください。

YouTubeのURL全体ではなく、動画IDだけを入れます。

youtubeVideoId: 'oqxAJKy0ii4',

また、YouTubePlayerPage で YoutubePlayerController.fromVideoId が使われているか確認しましょう。

Q. Shareボタンでエラーが出ます。

iOSやiPadOSでは、共有画面の表示位置を指定する必要があります。

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

sharePositionOrigin: shareOriginFromContext(context),

もし古い書き方のままになっている場合は、次のようなコードが残っていないか確認してください。

Share.share(
  '共有したい文章',
);

今回のコードでは、こちらの書き方を使います。

SharePlus.instance.share(
  ShareParams(
    text: '共有したい文章',
    sharePositionOrigin: shareOriginFromContext(context),
  ),
);

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

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

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

dart run flutter_launcher_icons

さらに、古いアイコンが残る場合は、アプリを削除してからもう一度入れ直してください。

この節のまとめ

この節では、NETAFLIX風アプリで使っているパッケージを確認しました。

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

youtube_player_iframe は、YouTube動画を再生するために使う。
google_fonts は、アプリ全体の文字の見た目を整えるために使う。
flutter_svg は、logo.svg を表示するために使う。
share_plus は、iOSやAndroidの共有画面を表示するために使う。
flutter_launcher_icons は、icon.png からアプリアイコンを作るために使う。
パッケージを追加・変更したら、flutter pub get を実行する。
アプリアイコンを変えるときは、dart run flutter_launcher_icons を実行する。

次のステップ

次の節では、assets/images/logo.svg と assets/images/icon.png をFlutterアプリで使えるようにする方法を見ていきます。

ロゴが表示されないときにどこを確認するのか、アイコン画像はなぜ普通の画像表示とは扱いが違うのかを、実際のコードを見ながら整理していきましょう。

機能

使用するパッケージ

YouTube動画を再生する

youtube_player_iframe

Google Fontsを使う

google_fonts

SVGロゴを表示する

flutter_svg

共有ボタンを使う

share_plus

アプリアイコンを設定する

flutter_launcher_icons

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

役割

flutter/material.dart

Flutterの基本的な画面部品を使う

flutter_svg/flutter_svg.dart

SVG画像を表示する

google_fonts/google_fonts.dart

Google Fontsを使う

share_plus/share_plus.dart

共有機能を使う

youtube_player_iframe/youtube_player_iframe.dart

YouTube動画を再生する

クラス

役割

YoutubePlayerController

どの動画を再生するかを管理する

YoutubePlayerScaffold

YouTubeプレイヤーを画面に表示する

controller = YoutubePlayerController.fromVideoId( videoId: widget.movie.youtubeVideoId, autoPlay: true, params: const YoutubePlayerParams( showControls: true, showFullscreenButton: true, playsInline: true, strictRelatedVideos: true, enableCaption: true, ), );

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', ); } }

確認すること

内容

ファイルの場所

assets/images/logo.svg に本当にあるか

pubspec.yaml

assets/images/ が登録されているか

import

flutter_svg をimportしているか

Future<void> shareNetaflixMovie({ required BuildContext context, required MovieItem movie, }) async { await SharePlus.instance.share( ShareParams( text: 'NETAFLIXで「${movie.title}」をチェック！\nhttps://www.youtube.com/watch?v=${movie.youtubeVideoId}', subject: movie.title, sharePositionOrigin: shareOriginFromContext(context), ), ); }

Rect shareOriginFromContext(BuildContext context) { final size = MediaQuery.sizeOf(context); return Rect.fromLTWH( 1, 1, size.width <= 2 ? 1 : size.width - 2, size.height <= 2 ? 1 : size.height - 2, ); }

設定

意味

android: true

Android用のアイコンを作る

ios: true

iOS用のアイコンを作る

image_path

元になるアイコン画像の場所

remove_alpha_ios

iOS用に透明部分をなくす

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

種類

役割

dependencies

アプリを動かすために必要なもの

dev_dependencies

開発中に使うもの

パッケージ

main.dartで使われる場所

youtube_player_iframe

YouTubePlayerPage

google_fonts

NetflixLikeApp

flutter_svg

NetflixWordLogo

share_plus

shareNetaflixMovie

flutter_launcher_icons

main.dart ではなく pubspec.yaml とコマンドで使う