Modul Pelatihan

Creating Simple Movie Browser App

using Flutter
1. Pengenalan Flutter
Flutter adalah framework besutan dari google yang digunakan
untuk membuat app untuk Android maupun IOS dengan code yang
sama.
Keuntungan dari Flutter sendiri adalah adanya hot reload, yang
memungkinkan semua hasil edit kita di code akan langsung ditampilkan
di layar hp dalam waktu singkat, selain itu, dengan menggunakan flutter
kita dapat membuat UI yang tampak cantik dan indah dalam segala
bentuk layar. Dan dari segi performance, Flutter memiliki performance
yang tidak kalah seperti ketika kita menggunakan Java / Kotlin untuk
android dan Swift untuk IOS untuk apps development.
Untuk pelatihan kali ini, kita akan mencoba membuat aplikasi yang
akan mengambil data dari API yang telah disediakan oleh
themoviedb.org, dan menampilkannya di layar dalam bentuk list. Selain
itu, dari list tersebut, dapat di tekan untuk membuka layar baru dan
melihat detail dari film tersebut.
2. Requirements
● Storage : 400 MB
● Git (dapat diunduh di ​https://git-scm.com/download/win​)
● Windows PowerShell 5.0 (dapat diunduh di
https://docs.microsoft.com/en-us/powershell/scripting/install/installi
ng-windows-powershell?view=powershell-6​)
● Android SDK ( juga termasuk Platform-Tools dan Build-Tools )
3. Step-By-Step
a. Download Flutter SDK
i. Windows :
https://storage.googleapis.com/flutter_infra/releases/stable/
windows/flutter_windows_v1.2.1-stable.zip
 ii. Linux :
https://storage.googleapis.com/flutter_infra/releases/stable/l
inux/flutter_linux_v1.2.1-stable.tar.xz
b. Extract file hasil download tersebut ( disarankan dalam folder
khusus )
c. Set path agar perintah flutter dapat dijalankan dari mana saja
i. Windows :
1. Buka start search bar, cari ‘env’ dan pilih ​Edit 
Environment Variables 
2. Masuk ke ​User Variables​dan tambahkan ke
dalam entrian path yang menunjuk ke path lengkap
ke folder ​flutter\bin 
ii. Linux :
1. Masuk ke .bashrc, dan tambahkan line
export 
PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]
/flutter/bin" 
d. Sekarang, buka VS Code dan install extensions Flutter yang
dibuat oleh Dart Code
e. Buka Command Palette di VS Code ( shortcut : F1 ) dan jalankan
Flutter : Run Flutter Doctor​
, apabila sudah terinstall
dengan benar, maka semua check akan menghasilkan tanda
centang.
4. Create New Project
Untuk membuat sebuah project baru di Flutter ada beberapa cara,
cara yang pertama adalah dengan membuka Command Palette di VS
Code dan menjalankan ​Flutter : New Project​
. Sedangkan cara
yang kedua adalah dengan menggunakan CMD, yaitu dengan perintah
flutter create nama_apps. T
​unggu selama beberapa saat,
setelah selesai, masuk ke direktori project yang baru dibuat tersebut dan
 jalankan command ​flutter run ​
atau apabila menggunakan VS
Code, buka Command Palette dan tekan F5.
5. pembuatan UI
a. Buka main.dart, disana terdapat ​Scaffold() y​ang digunakan
untuk membuat component material default yang terdiri dari
appBar​yang merupakan header, ​body​yang merupakan content
utama.
b. Di dalam setiap komponen, akan terdapat child dan children, yang
mana child berarti hanya boleh terdapat satu komponen di
bawahnya, dan terdapat children yang dapat menerima array
widget untuk ditampilkan.
6. Install External Library
Untuk memudahkan kita dalam melakukan fetch, kita akan
menggunakan Library tambahan yang telah disediakan oleh flutter team
yang bernama http ( untuk list library lengkap dapat dilihat di
https://pub.dartlang.org/flutter​ ). Tambahkan Library dengan cara :
a. Buka folder Project dan cari file bernama ​pubspec.yaml 
b. Tambahkan di dependencies h
​ttp: ^0.12.0+2, 
sehingga dependencies nya menjadi :
dependencies: 
flutter: 
sdk: flutter 
 
cupertino_icons: ^0.1.2 
http: ^0.12.0+2 

c. Lakukan perintah ​flutter packages get 

7. Mengambil data menggunakan Fetch API

 a. Buat file baru di direktori ​nama_project/lib​dan beri nama
fetch.dart 
b. Tambahkan fungsi fetch seperti dibawah ini
Future<Map> fetchMovie() async { 
final apiKey = 
'1f101fa9a6d2649bec029584deff446f'; 
http.Response response =  
await 
http.get('https://api.themoviedb.org/3/movie/top_
rated?api_key=$apiKey'); 
 
if (response.statusCode == 200) { 
return json.decode(response.body); 
} 
else {throw Exception('Network Error');} 
} 

Future​
, adalah kelas khusus dari Dart yang digunakan untuk
melakukan fungsi async. Digunakan untuk me-return data atau
error yang akan muncul setelah melakukan fungsi.
8. Menyimpan Hasil Fetch ke state
a. Untuk menyimpan data menggunakan state, yang pertama kali
harus dilakukan adalah membuat StatefulWidget component,
cukup ketikkan ​stf / stateful​di VSCode akan langsung
menampilkan emmet stateful widget tersebut.
b. Beri nama class statefulWidget yang baru dibuat dengan nama
MovieList.
c. Di dalam ​class MovieListState extends 
State<MovieList> , t​ambahkan ​var movie; ​
, sehingga
kodenya tampak seperti ini :
 class MovieListState extends State<MovieList> { 
var movie; 
} 
var movie​inilah yang dinamakan sebagai state dalam flutter.
d. Dibawah var movie tadi, tambahkan fungsi getData yang berfungsi
untuk menyimpan hasil fetch API tadi. Tambahkan line berikut :
class MovieListState extends State<MovieList> { 
​ var movie;  
 
void getData() async { 
var data = await fetchMovie(); 
 
setState(() { 
movie = (data['results']); 
}); 
} 
setState() adalah satu - satunya cara untuk merubah value suatu
state dalam flutter.
9. Menampilkan hasil fetch ke layar
a. Di bagian Widget build, tambahkan kode dibawah ini ;
return Scaffold( 
appBar: AppBar( 
title: Text("Movie List"), 
), 
body: new Padding( 
padding: EdgeInsets.all(10), 
child: Column( 
children: <Widget>[ 
Expanded( 
child: ListView.builder( 
 itemCount: movie == null ? 0 : 
movie.length, 
itemBuilder: (context, i) { 
return Text(movie[i]['title']); 
}, 
 
), 
) 
], 
), 
) 
); 
ListVIew.builder adalah class builder yang digunakan untuk
menampilkan item dalam jumlah yang banyak dalam suatu waktu
10.