Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara menampilkan video youtube di flutter. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Cara Menampilkan Video Youtube di Flutter

1. Buatlah sebuah project baru dengan nama yang kalian inginkan. Gunakan versi flutter terbaru atau flutter yang mendukung null safety.

2. Buka pubspec.yaml lalu tambahkan youtube_player_flutter: contohnya seperti gambar di bawah ini. Save file untuk mengunduh paket.

Unduh Paket

3. Buka lib/main.dart lalu ganti dengan script di bawah ini.

import 'package:flutter/material.dart';
  import 'package:youtube_player_flutter/youtube_player_flutter.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'YouTube Player',
        home: Scaffold(
          appBar: AppBar(
            title: Text('YouTube Player'),
          ),
          body: Padding(
            padding: const EdgeInsets.only(
              left: 10, 
              right: 10
            ),
            child: Center(
              child: YouTubePlayerWidget(
                videoUrl: 'https://www.youtube.com/watch?v=H9i9qOSQDfA',
              ),
            ),
          ),
        ),
      );
    }
  }
  
  class YouTubePlayerWidget extends StatefulWidget {
    final String videoUrl;
  
    YouTubePlayerWidget({required this.videoUrl});
  
    @override
    _YouTubePlayerWidgetState createState() => _YouTubePlayerWidgetState();
  }
  
  class _YouTubePlayerWidgetState extends State<YouTubePlayerWidget> {
    late YoutubePlayerController _controller;
  
    @override
    void initState() {
      super.initState();
      _controller = YoutubePlayerController(
        initialVideoId: YoutubePlayer.convertUrlToId(widget.videoUrl)!,
        flags: const YoutubePlayerFlags(
          autoPlay: false,
          mute: false,
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return YoutubePlayer(
        controller: _controller,
        showVideoProgressIndicator: true,
        progressIndicatorColor: Colors.blueAccent,
      );
    }
  }

Penjelasan:

1. Import package: Import dua package yang diperlukan yaitu flutter/material.dart dan youtube_player_flutter/youtube_player_flutter.dart. Package flutter/material.dart digunakan untuk mengimport framework UI Flutter, sedangkan youtube_player_flutter/youtube_player_flutter.dart digunakan untuk mengimport paket youtube_player_flutter yang menyediakan fungsi dan widget pemutar video YouTube.
2. Method main(): Method main() digunakan sebagai titik masuk utama aplikasi Flutter. Di dalamnya, kita menjalankan runApp() dengan instance MyApp() sebagai argumennya.
3. Class MyApp: Ini adalah class utama yang merupakan turunan dari StatelessWidget. Class ini mengimplementasikan method build() yang mengembalikan widget MaterialApp. MaterialApp adalah widget dasar yang memuat aplikasi Flutter dengan judul 'YouTube Player'. Di dalamnya, terdapat widget Scaffold yang berisi AppBar dan body.
4. Widget YouTubePlayerWidget: Ini adalah widget yang ditampilkan di dalam Scaffold sebagai child dari widget Center. Widget ini menerima videoUrl sebagai parameter pada konstruktor. Widget ini juga memiliki stateful class _YouTubePlayerWidgetState yang mengatur logika pemutaran video.
5. Class _YouTubePlayerWidgetState: Class ini merupakan turunan dari State dan mengimplementasikan method build(). Pada method initState(), kita membuat instance YoutubePlayerController dengan menggunakan initialVideoId yang didapatkan dari URL video menggunakan fungsi YoutubePlayer.convertUrlToId(). Kemudian, kita mengatur beberapa flag seperti autoPlay dan mute menggunakan YoutubePlayerFlags. Pada method build(), kita mengembalikan widget YoutubePlayer dengan menggunakan YoutubePlayerController yang telah kita inisialisasi sebelumnya.

Ok sekarang jalankan emulator dan jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

Video Player

Mudah, bukan?. Kalian bisa menggabungkan project ini dengan API youtube untuk menampung banyak video secara dinamis. Tambahan satu lagi, paket ini tidak dapat menampilkan video dari platform atau website selain youtube. Maka kalian harus menggunakan paket lain.

Ok sekian tutorial singkat kali ini tentang cara menampilkan video youtube di flutter. Semoga bermanfaat, jika ada yang ingin bertanya silahkan tanya di kolom komentar di bawah ini. Sekian dan terima gaji.