개요

Flutter로 동영상 플레이어를 구현하고 싶을 때 구구는 먼저 나오는 것이 video_player 플러그인이라고 생각합니다. ( htps // 푸 b. V / Pac 가게 s / )
이쪽에서도 구현은 가능합니다만, 재생이나 정지, 인디게이터의 표시등도 Controller를 이용해 스스로 관리하지 않으면 안되기 때문에 조금 귀찮습니다. 그래서, 이것들을 자동적으로 구성해 주는 chewie 위젯이라고 하는 것을 소개하고 싶습니다. 그건 그렇고, video_player와 완전히 별개가 아니며 chewie도 video_player를 기반으로합니다. ( htps // 푸 b. V / Pac 카게 s / 치우 우에 )

그건 그렇고, 왜 chewie (츄잉 껌)인지 모르겠습니다 (웃음)

전제 조건

[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.7 19H2, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 4.0)
[✓] Connected device (1 available)

• No issues found!

절차

0.완성형

간단하게 화면 중앙에 비디오 플레이어를 배치하는 화면을 만들어갑니다.
동영상 소스는 github에 게시된 동영상을 사용합니다.

1. 패키지 도입

pubspec.yaml에 chewie 및 video_player 패키지를 추가합니다.
기사 작성시(2020년 10월 27일) 시점의 chewie의 최신판은 0.9.10입니다만, 의존관계가 되고 있는 video_player는 0.10.0까지 밖에 대응하고 있기 때문에 일단은 이하의 버젼으로 합니다 생강.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  chewie: ^0.9.10
  video_player: ^0.10.0

작성하면 Pub get을 실행.

2. 패키지 가져오기

다음 세 가지를 가져옵니다.

main.dart

import 'package:chewie/chewie.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:video_player/video_player.dart';

3.컨트롤러 모두

개요에서 언급했듯이 ChewieController는 VideoPlayerController와 종속성이 있으므로 State 클래스 내에서 VideoPlayerController와 ChewieController를 모두 초기화합니다.

main.dart

class _MyHomePageState extends State<MyHomePage> {
//コントローラーの定義
  VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;

//初期化
  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      aspectRatio: 3 / 2,  //アスペクト比
      autoPlay: false,  //自動再生
      looping: true,  //繰り返し再生

      // 以下はオプション（なくてもOK）
      showControls: false,  //コントロールバーの表示（デフォルトではtrue）
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.red,  //再生済み部分（左側）の色
        handleColor: Colors.blue,  //再生地点を示すハンドルの色
        backgroundColor: Colors.grey,  //再生前のプログレスバーの色
        bufferedColor: Colors.lightGreen,  //未再生部分（右側）の色
      ),
      placeholder: Container(
        color: Colors.grey,  //動画読み込み前の背景色
      ),
      autoInitialize: true,  //widget呼び出し時に動画を読み込むかどうか
    );
  }
//コントローラーの破棄
  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }
//・・・

4. 화면 표시

매우 간단하네요!

main.dart

child: Chewie(
   controller: _chewieController,
),

5. 소스 코드 전체

전체 코드는 다음과 같습니다.

main.dart

import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:video_player/video_player.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chewie Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Chewie Sample'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: false,
      looping: true,
      // Try playing around with some of these other options:

      //showControls: false,
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.red,
        handleColor: Colors.blue,
        backgroundColor: Colors.grey,
        bufferedColor: Colors.lightGreen,
      ),
      placeholder: Container(
        color: Colors.grey,
      ),
      autoInitialize: true,
    );
  }
  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Center(
                child: Chewie(
                  controller: _chewieController,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

주의

현재 iOS 에뮬레이터에서는 제대로 작동하지 않는 것 같습니다. 실제로 시도했을 때 Controller를 정의하고 있음에도 불구하고,
controller != null, 'You must provide a chewie controller'
같은 오류가 표시됩니다. Android 에뮬레이터나 실제 기기(iOS 포함)에서는 정상적으로 동작하므로 그곳에서 시도해 보세요.

사이고에게

video_player만이라면, 상태의 관리가 번거로운 곳을 chewie가 좋은 느낌에 전부 해 줍니다. 여러가지 스스로 커스터마이즈하고 싶을 때는 video_player가 좋을까 생각합니다만, 우선 동영상을 보면 좋다! 그렇다면 chewie로 충분하다고 생각합니다.
Flutter는 아직 일본어 정보가 적기 때문에 앞으로도 유용한 정보를 발신할 수 있으면 좋겠습니다!

참고 사이트

htps // 푸 b. V / Pac 가게 s /
htps // 푸 b. V / Pac 카게 s / 치우 우에