Tutorial Menampilkan Video di Flutter - Tutorial Flutter Indonesia

kucingtekno.com - Tutorial Flutter Indonesia kali ini akan membahas bagaimana menampilkan video di Flutter sekaligus tombol play dan pause. Dan pada tutorial flutter ini akan menjelaskan cara mudah menampilkan video di flutter dengan sederhana dan gampang dipahami.

Mungkin di postingan sebelumnya teman-teman sudah membaca Tutorial Membuat Webview di Flutter - Tutorial Flutter Indonesia dengan mudah . Kali ini berbeda sedikit yaitu konten yang ditampilkan berupa video online alias video kita ambil dari URL. 

Flutter Video App via oraculoti com

Pada tutorial ini silakan teman-teman menggunakan Visual Code atau Android Studio terserah bagaimana nyaman dan efektif bagi teman-teman. Namun disini saya akan menggunakan Android Studio dan menggunakan Emulator di Android Studio untuk menampilkan hasil aplikasi androidnya.

Seperti yang sudah saya singgung di depan, aplikasi yang dihasilkan pada tutorial menampilkan video flutter ini adalah halaman utama dengan video yang diambil online dan ada tombol ( Floating Button ) dilengkapi aksi play dan pause untuk mengontrol video. Jika kalian ingin menambah gambar tulisan atau widget lainnya dipersilakan.

Berikut Cara Menampilkan Video di Flutter dengan mudah :

1. Tambahkan Dependenci Video Player -Flutter

Langsung saja silakan buat projek baru , beri nama terserah teman-teman dan simpan projeknya di folder yang dikehendaki. Kemudian buka pubspec.yaml lalu tambahkan plugin video player di bagian dependencies seperti dibawah ini :

dependencies:
  flutter:
    sdk: flutter
  video_player:

  2. Tambahkan Permission Internet di Manifest - Flutter

 Buka file AndroidManifest.xml , file tersebut bisa ditemukan di /android/app/src/main/AndroidManifest.xml. Lalu tambahkan permission internet .

3. Buat dan Inisiasi VideoPlayerController - Flutter

Tambahkan kode berikut di main.dart 

source code Inisiasi VideoPlayerController - Flutter

4. Menambahkan Fungsi Tampil Video - Flutter

Tambahkan dan sesuaikan seperti kode berikut :  

source code Fungsi Tampil Video - Flutter

5. Menambahkan Fungi Kontrol Play Pause- Flutter

Tambahkan dan sesuaikan seperti kode berikut :  

source code Fungi Kontrol Play Pause- Flutter

6. Source Code Tutorial Menampilkan Video di Flutter - Tutorial Flutter Indonesia  ( main.dart )

Pasti kalian bingung dimana menempatkannya kan ? berikut kode lengkap main.dart silakan sesuaikan dan  bisa ditambahkan fungsi-fungsi lain sesuai kreatifitas. Silakan ganti URL Video dengan link video kamu di

https : // xxxx/ butterfly.mp4 

-

Running Aplikasi di Emulator 

running aplikasi Menampilkan Video di Flutter

Itu adalah tampilan Video di Flutter  jika sudah berhasil  , video tersebut pertama akan di load terlebih dahulu pastikan menggunakan koneksi internet lalu kamu bisa mengontrol Play dan Pause dengan tombol di bawah .