Initekno.com – Hai teknoria, apa kabarnya, jika anda adalah programmer android native, tidak ada salahnya untuk mencoba belajar flutter. Kali ini saya akan membagikan sebuah tutorial tentang cara menampilkan video di flutter dengan memanfaatkan data cloud dan data lokal.
Sebagian orang akan mudah menemukan tutorial tentang menampilkan video di flutter, bahkan pada situs dokumentasi resmi flutter telah dibahas penggunaan video player tersebut. Lantas apa itu video player dalam flutter?…
Video player adalah dependensi yang dibuat dengan flutter untuk mempermudah dalam memanipulasi video, seperti play, pause dan mode full screen. Dalam studi kasus kali ini saya akan menggunakan 2 dependensi sekaligus yaitu video_player dan chewie. Untuk lebih jelasnya silahkan tambahkan kedua dependensi tersebut pada pubspec.yaml letak file tersebut ada di dalam root folder project flutter kamu.
Baca artikel tentang membuat project di flutter
Maka isi pubspec.yaml diatas adalah seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
name: chewie_tutorial description: A new Flutter project. # The following defines the version and build number for your application. # A version number is three numbers separated by dots, like 1.2.43 # followed by an optional build number separated by a +. # Both the version and the builder number may be overridden in flutter # build by specifying --build-name and --build-number, respectively. # In Android, build-name is used as versionName while build-number used as versionCode. # Read more about Android versioning at https://developer.android.com/studio/publish/versioning # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. # Read more about iOS versioning at # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter video_player: ^0.10.2+5 #TAMBAHAN INITEKNO.COM # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter chewie: ^0.9.7 #TAMBAHAN INITEKNO.COM # For information on the generic Dart part of this file, see the # following page: https://www.dartlang.org/tools/pub/pubspec # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section, like this: assets: #TAMBAHAN INITEKNO.COM - videos/IntroVideo.mp4 #TAMBAHAN INITEKNO.COM # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.io/assets-and-images/#resolution-aware. # For details regarding adding assets from package dependencies, see # https://flutter.io/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here, # in this "flutter" section. Each entry in this list should have a # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.io/custom-fonts/#from-packages |
tambahan itu saya tandai dengan komentar #TAMBAHAN INITEKNO.COM, selebihnya itu adalah kode default dari flutter.
Pada folder lib, silahkan cari file main.dart dan ubah kodenya menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import 'package:chewie_tutorial/chewie_list_item.dart'; import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.teal, ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('List Kajian Ust.Muhtarom'), ), body: ListView( children: <Widget>[ ChewieListItem( // url video 1 //load video pada folder videos di lokal videoPlayerController: VideoPlayerController.asset( 'videos/IntroVideo.mp4', ), ), ChewieListItem( // url video 2 videoPlayerController: VideoPlayerController.network( 'https://r5---sn-npoeeney.googlevideo.com/videoplayback?expire=1574366772&ei=1JnWXZ2MMvrBz7sPm7KZ4AQ&ip=183.88.16.231&id=o-ALa8v8EKrsgged494My0jBkybmDknGXJEX00o4Lah9fs&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=122624327&ratebypass=yes&dur=2734.265&lmt=1418986260803611&fvip=8&fexp=23842630,23860862&c=WEB&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRAIgY1_J9LcFG96gPi3wajQPdK0d5M1BpUhQ1HyE0Y9-ks4CIH53vy9uFLeenJvht-wRmoB4z5LlUg5rAuMnaVsDVVww&video_id=H0YN4As_yks&title=Kajian+Apabila+Sudah+Ada+Dalil+Maka+Batal+Seluruh+Pendapat+-+Ustadz+Muhtarom+-+10+Juli+2014&rm=sn-w5nuxa-jxpe7r,sn-w5nuxa-c33ld7r,sn-30ald76&req_id=552463c409cba3ee&redirect_counter=3&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=30&mn=sn-npoeeney&ms=nxu&mt=1574345081&mv=m&mvi=4&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgEN6gZkPci4YVRJl6BpSTnz1hNdGTHA0Ymv3_pf2XdckCIQChHSFHxnfzzcuSGigk2_sddL5By13SmAndJhWVfm_SzQ==', ), ), ChewieListItem( // url video 3 videoPlayerController: VideoPlayerController.network( 'https://r2---sn-npoe7ney.googlevideo.com/videoplayback?expire=1574368929&ei=QaLWXZinBLHmhAem6L6IDw&ip=81.171.74.160&id=o-AN8sCgvBW0oJ80FqQdWcKer31PaJS1MXoXVOn8DMsEBD&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=295091921&ratebypass=yes&dur=6372.507&lmt=1540449603285657&fvip=2&fexp=23842630,23860862&c=WEB&txp=5431432&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRQIhAJKSMgCTYEf5wUA6z6Lehe9qlp-Ejw-GBN50Zdk3teIhAiAwp2I4O_yRiaak-kPQlZT10tIDyNOx-sIxwr5fCbeQ4Q%3D%3D&video_id=empVFNXobRo&title=Ustadz+Muhtarom-+Telah+Nyata+Sabda+Rasulullah&redirect_counter=1&rm=sn-aiges77l&req_id=c729fa43caaca3ee&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=31&mn=sn-npoe7ney&ms=au&mt=1574347198&mv=m&mvi=1&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRAIgZNbytxMvyYwCZMCoQ9gnpvkCVemHxaKSCYSPd91QeHwCIHtMiRr-TdKkz0iNYI9CcUtnOqLllzTUxq0-Bshyf3RE', ), ), ChewieListItem( // url video 4 videoPlayerController: VideoPlayerController.network( 'https://r1---sn-npoe7nes.googlevideo.com/videoplayback?expire=1574368074&ei=6p7WXZmiN5L-owOS_4LIDg&ip=119.76.173.7&id=o-ANBmrIicgWJIsfJ8eksyIGtFAox--OJDvK7Fa_3E-RP_&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=239544974&ratebypass=yes&dur=5386.866&lmt=1573931204148990&fvip=1&fexp=23842630&c=WEB&txp=1311222&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRQIgNtGM--fz8IDN7pclfGSyEUB2NG5mqJtrzoLTbuQbidkCIQC0-MP9wAQZtBfguEzhSIhjQx4-n-oYGlTHFV6Voro1Vw%3D%3D&video_id=M_VbeOS8do4&title=Ustadz+Muhtarom-+Wasiat+Rasulullah&rm=sn-5np5po4v-c33s77e,sn-npos77e&req_id=2a4e37c325bda3ee&redirect_counter=2&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=30&mn=sn-npoe7nes&ms=nxu&mt=1574346339&mv=m&mvi=0&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgZd6_TaH67TeYc5OwCOIvlXyXEZpDuSs0D7ahYoaxZgACIQDF9BcKeAOayGFHtsIIsIR0-ednxJdjG0BDBmoFrCaI1g==', ), ), ], ), ); } } |
Buat file baru lagi, simpan pada folder lib dan beri nama file itu dengan chewie_list_item.dart kemudian tuliskan kode seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import 'package:chewie/chewie.dart'; import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; class ChewieListItem extends StatefulWidget { final VideoPlayerController videoPlayerController; final bool looping; ChewieListItem({ @required this.videoPlayerController, this.looping, Key key, }) : super(key: key); @override _ChewieListItemState createState() => _ChewieListItemState(); } class _ChewieListItemState extends State<ChewieListItem> { ChewieController _chewieController; @override void initState() { super.initState(); _chewieController = ChewieController( videoPlayerController: widget.videoPlayerController, aspectRatio: 16 / 9, autoInitialize: true, errorBuilder: (context, errorMessage) { return Center( child: Text( errorMessage, style: TextStyle(color: Colors.white), ), ); }, ); } @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(8.0), child: Chewie( controller: _chewieController, ), ); } @override void dispose() { super.dispose(); widget.videoPlayerController.dispose(); _chewieController.dispose(); } } |
Nah, jangan lupa untuk memberikan permission internet kepada file AndroidManifest.xml
|
1 |
<uses-permission android:name="android.permission.INTERNET"/> |
Letaknya ada pada direktori android/app/main
Terakhir, buat folder dengan nama videos dan pastikan terdapat video di dalamnya. video itu nantinya akan kita load pada kode berikut ini :
|
1 2 3 4 5 6 7 |
ChewieListItem( // url video 1 //load video pada folder videos di lokal videoPlayerController: VideoPlayerController.asset( 'videos/IntroVideo.mp4', ), ), |
Letak kode ini ada di dalam main.dart
dan konsekuensinya anda harus menambahkan video tersebut pada pubspec.yaml agar bisa di load videonya.
|
1 2 3 |
# To add assets to your application, add an assets section, like this: assets: #TAMBAHAN INITEKNO.COM - videos/IntroVideo.mp4 #TAMBAHAN INITEKNO.COM |
Sekarang coba jalankan aplikasi yang kamu buat dengan cara ketik pada terminal
|
1 |
flutter run |
Pastikan semua komponen berjalan dengan baik, caranya cek dengan mengetik pada terminal
|
1 |
flutter doctor |
Akhir-akhir ini flutter sering melakukan upgrade engine mereka, alangkah baiknya kamu coba upgrade dulu, ketik pada terminal kode seperti berikut ini :
|
1 |
flutter upgrade --force |
Sekian artikel yang singkat ini, semoga bermanfaat buat kamu. jika ada error dalam kode kamu silahkan tulis di komentar atau bisa kirim email ke saefulmujab.nf@gmail.com. Mungkin jika kamu berminat untuk mempelajari lebih lanjut tentang flutter, kamu bisa bermain kode project yang saya buat di sini :