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:
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 .
Posting Komentar untuk "Tutorial Menampilkan Video di Flutter - Tutorial Flutter Indonesia "
Jika tidak jelas silakan komentar ya
Terima kasih atas kunjungan Anda.