2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

株式会社ゆめみの23卒Advent Calendar 2023

Day 18

【Flutter】Flutter on the web でYouTubeを流せるようにする

Last updated at Posted at 2023-12-17

スクリーンショット 2023-12-14 14.53.29(2).png

YUMEMI New Grad Advent Calendar 2023

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります!!
色々な種類の記事が投稿されるので、お楽しみに🤗

youtube_player_iframeについて

Platformとしては、Android・iOS・Webが対応しています。

iFrame Player APIを使用しているそうです。YouTubeのビデオを再生できるものとなっています。Packageを見てみると、いろいろなカスタマイズができそうですね。

詳しくはこちらで閲覧できます〜!

実装してみるよ

1、Packageの追加

flutter pub add youtube_player_iframe
dependencies:
  youtube_player_iframe: ^4.0.4

動画の設定について

例えば、上の動画を載せたい場合は、
https://www.youtube.com/watch?v=4S03TbFvoi4のURLがありますが、その中の
4S03TbFvoi4を入れることで設定できます。

実装例

再生や一時停止など様々あるらしいですが、今回はとりあえず表示するだけの実装です。

import 'package:flutter/material.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final YoutubePlayerController controller;

  @override
  void initState() {
    super.initState();
    controller = YoutubePlayerController.fromVideoId(
      videoId: '4S03TbFvoi4',
      params: const YoutubePlayerParams(
        mute: false,
        showControls: true,
        showFullscreenButton: true,
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    controller.close();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: MediaQuery.sizeOf(context).width / 1.5,
              child: YoutubePlayer(
                controller: controller,
                aspectRatio: 16 / 9,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ビルドしてみたところ、こんな感じになりました!(デプロイはまた別の機会にします)

スクリーンショット 2023-12-14 15.59.14.png

最後に

これは色々と使えそうで面白いですね。そして実装がとても楽でした。
また別の機会にいい感じにカスタマイズした記事も書けたらなと思っています!

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです!!

YUMEMI New Grad Advent Calendar 2023
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?