Menampilkan Video menggunakan Flutter

Halo guys, Berjumpa dengan Miniblog dari Inzaghi's Blog! Kali ini kita akan membuat Program untuk memasukkan dan menampilkan sebuah Video menggunakan Flutter.

Sumber : Blog.Logrocket.com

Menerapkan fungsionalitas video dari awal akan menjadi tugas yang membebani. Namun, ada beberapa plugin yang tersedia untuk memudahkan hidup pengembang. Plugin pemutar video merupakan salah satu plugin terbaik yang tersedia untuk Flutter untuk memenuhi kebutuhan tersebut.

Dalam artikel ini, Anda akan belajar bagaimana menerapkan plugin pemutar video bersama dengan mengontrol berbagai fungsionalitas dari pemutar video tersebut.

Mengatur Dependency

Sebelum menggunakan plugin pemutar video, Anda harus menambahkannya ke file pubspec.yaml Anda. Ketika Anda membuka file pubspec.yaml, Anda dapat melihat beberapa konfigurasi dan dependensi yang diperlukan untuk menjalankan aplikasi Anda. Plugin pemutar video harus ditambahkan di bawah blok dependencies :

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  camera: ^0.8.1+7
  video_player: ^2.1.15
  path_provider: ^2.0.2

Versi terkini dari plugin ini adalah 2.1.15, namun Anda dapat menambahkan versi terbaru dengan memeriksa halaman plugin. Jika Anda menggunakan VS Code, ketika Anda menyimpan file, itu akan mengunduh plugin secara otomatis. Jika tidak, buka terminal dan tulis flutter pub get untuk mengunduh plugin.

Dan inilah Struktur Direktori Folder untuk Proyek ini :

Membuat Program

Beralihlah ke file di mana Anda ingin menambahkan plugin dan impor file video.dart :

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class VideoPlayerApp extends StatelessWidget {
  const VideoPlayerApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}
class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({Key? key}) : super(key: key);
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;
  @override
  void initState() {
    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );
    // Initialize the controller and store the Future for later use.
    _initializeVideoPlayerFuture = _controller.initialize();
    // Use the controller to loop the video.
    _controller.setLooping(true);
    super.initState();
  }
  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Butterfly Video'),
      ),
      // Use a FutureBuilder to display a loading spinner while waiting for the
      // VideoPlayerController to finish initializing.
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the aspect ratio of the video.
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video.
              child: VideoPlayer(_controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner.
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown.
          setState(() {
            // If the video is playing, pause it.
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // If the video is paused, play it.
              _controller.play();
            }
          });
        },
        // Display the correct icon depending on the state of the player.
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

Output :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)