Modul 1
Modul 1
FEBRUARI, 2022
[PEMROGRAMAN MOBILE]
INSTALASI FRAMEWORK FLUTTER, DART, WIDGET – MODUL 1
TIM PENYUSUN:
DIDIH RIZKI CHANDRANEGARA, S.KOM., M.KOM
FARLI NAHRUL JAVIER
NUR SYAHFEI
[PEMROGRAMAN MOBILE]
Laboratorium Informatika
MATERI POKOK
Apa itu Flutter?
Flutter dikembangkan oleh Google sebagai framework untuk membuat UI (User Interface)
Android dan iOS sekaligus dalam satu frame yang sama dengan menggunakan bahasa pemrograman
Dart. Ada 3 hal yang menjadi poin penting yang ditawarkan oleh Flutter kepada para penggunanya, yakni:
1. Fast Development
Flutter memiliki fitur Hot Reload. Fitur ini memungkinkan ketika code diketikkan, kemudian di-reload
maka hasilnya pun sudah dapat dilihat secara instan dikarenakan Flutter menggunakan Sistem
Interpreter. Berbeda dengan Desktop / Mobile Development yang menggunakan system compiler
dimana setiap perubahan code program harus di-compile terlebih dahulu sebelum ditampilkan.
2. Expressive and Flexible UI
Secara default, Flutter menawarkan komponen UI yang menarik dengan proses rendering yang
cepat.
3. Native Performance
Flutter juga menyediakan widgets yang dapat digunakan guna menunjang proses development agar
lebih efisien, seperti Scrolling, Navigation, Icon, dan Font. Namun tetap memberikan performa
setara Native, baik untuk Versi Android maupun iOS.
Dart adalah bahasa pemrograman yang dikembangkan oleh Google sejak tahun 2007 yang
dipimpin oleh Lars Bak dan Kasper Lund yang berfokus untuk optimalisasi sisi client. Tidak hanya
Laboratorium Informatika
digunakan untuk mengembangkan aplikasi seluler, Dart juga dapat digunakan untuk mengembangkan
berbagai macam aplikasi seperti web, micro service, desktop dan aplikasi lain yang mengusung teknologi
Internet of Things (IoT).
Dart memiliki syntax yang mirip seperti C++, C#, Java, dan Javascript. Jadi apabila and pernah
belajar bahasa tersebut maka seharusnya mempelajari dart akan menjadi lebih mudah. Berikut beberapa
syntax yang perlu dipahami dalam pengembangan Flutter:
function
Sama seperti pada bahasa kebanyakan, fungsi memiliki bagian type return, nama fungsi,
parameter, dan pernyataan.
Parameter Fungsi
Basic parameter fungsi pada dart adalah seperti diatas. Terdapat 2 jenis tipe parameter
yaitu required parameter dan optional parameter.
Required function
Contoh dibawah merupakan required parameter karena argumen variable panjang dan
lebar perlu untuk inisialisasi ketika dipanggil.
jika salah satu atau semua argumen tidak diinisialisasi maka akan terjadi error seperti
dibawah.
sesuai dengan pesan error yang ditampilkan, argumen yang diperlukan ada 2, namun yang
diinisialisasi hanya 1 argumen yaitu argumen panjang. Lalu bagaimana untuk parameter
bertipe opsional? Perhatikan contoh di bawah.
Optional function
Laboratorium Informatika
nb: ‘int?’ merupakan implementasi dari null safety. Materi null safety tersedia dibawah. Cukup perhatikan
tanda kurung siku ‘[]’ diatas untuk memahami optional function.
fungsi hitung() memiliki 3 argument pada parameternya dimana panjang dan lebar wajib
untuk diinisialisasi sedangkan argumen tinggi bersifat opsional. Cukup bungkus argumen
yang bersifat opsional dengan kurung siku (’[]’). Cara pemanggilannya adalah seperti
berikut.
nb: tanda ‘?’ dan ‘!’ tidak perlu dihiraukan untuk sementara. Cukup pahami curly bracket ‘{}’ diatas untuk
memahami materi jenis parameter dengan curly bracket.
Pada parameter, semua argumen dibungkus kedalam curly bracket ‘{}’. Dengan
menggunakan curly bracket, kita dapat menginisialisasi argumen parameter tanpa harus
berurutan dengan contoh seperti berikut.
argumen lebar lebih dulu diinisialisasi daripada argumen panjang. argumen tinggi tidak
masalah jika tidak diinisialisasi karena contoh semua argumen diatas merupakan tipe
argumen opsional. Jika ingin membuat argumen yang bersifat wajib diinisialisasi cukup
tambahkan keyword required pada argumen terkait. Perhatikan contoh berikut.
Laboratorium Informatika
Required
argumen panjang dan lebar wajib diinisialisasi karena telah ditetapkan dengan keyword
required. Sedangkan argumen tinggi bersifat opsional atau tidak wajib diinisialisasi. Cara
pemanggilannya adalah seperti berikut.
Tipe Data
Sama seperti bahasa kebanyakan. Namun kita dapat mendefinisikan variable tanpa memikirkan
tipe data yang digunakan. Perhatikan materi dibawah.
Var vs dynamic
variable harga1 dan harga2 tidak mendefinisikan tipe data yang digunakan. Meskipun begitu,
harga1 dan harga2 memiliki value yang sama dengan tipe value seperti int. Namun kedua
variable berikut memiliki perbedaan.
harga2 dapat diubah valuenya dari value berjenis angka menjadi value berjenis teks. Sedangkan
harga1 tidak dapat diubah ke value berjenis teks. Hal ini dikarenakan harga1 terdefinisi
menggunakan ‘var’ sehingga jenis value awal akan ditetapkan sebagai tipe data yang dimiliki
variable terkait. Dengan begitu, harga1 hanya bisa diubah valuenya dengan value berjenis angka
saja seperti berikut.
Laboratorium Informatika
Begitupun sebaliknya dengan keyword ‘dynamic’ yang dapat diubah valuenya dengan jenis yang
tidak mengacu dengan tipe value data awal.
basic Operator
Percabangan switch
Percabangan if
Sama seperti bahasa kebanyakan, namun baris kode diatas dapat dipersingkat dengan
menggunakan operator ternary. Simak materi dibawah.
ternary ‘?’
Laboratorium Informatika
Perintah diatas sama seperti contoh if else sebelumnya dimana jika nilai hasilUlangan lebih dari
70 maka hasilnya adalah "Lulus”. Menggunakan operator ternary akan mempersingkat baris
kode.
Loop (Perulangan)
class
Laboratorium Informatika
Sama seperti bahasa kebanyakan, lengkapnya bisa klik disini.
Fungsi diatas merupakan fungsi yang ditetapkan sebagai fungsi asinkron karena terdapat
keyword async setelah parameter dan sebelum bracket..
Terdapat 2 perintah pada fungsi asinkron ambilData() yaitu Future.delayed() dan print(‘HELLO’).
Anggap saja Future.delayed() merupakan pengambilan data dari internet yang membutuhkan
waktu 5 detik untuk mendapatkannya.
Kita tambahkan Future.delayed() lagi dengan waktu 2 detik namun dengan keyword
‘await’. Maka hasil run adalah sebagai berikut.
print(“HELLO”) akan menunggu perintah dengan keyword ‘await’ terlebih dahulu untuk
bisa dieksekusi.
fungsi asinkron biasanya digunakan untuk pengambilan data melalui internet, database,
atau file namun dapat mengerjakan perintah lain tanpa harus menunggu data telah
didapatkan. Jika tidak memerlukan fungsi asinkron maka cukup menggunakan fungsi
biasa atau fungsi sinkron dengan tanpa menggunakan keyword async pada fungsi terkait.
static
Laboratorium Informatika
Dari contoh diatas, kita dapat mengambil data community tanpa harus membuat objeknya
terlebih dahulu. Hal ini dikarenakan variable community bersifat static. Kita dapat membuat
fungsi static juga. static hanya bisa dibuat di dalam sebuah class. Lengkapnya bisa klik disini.
final dan const memiliki perbedaan yang sedikit susah untuk dipahami. Singkatnya, keduanya
tidak dapat diubah ke objek baru namun final bersifat mutable atau nilai dalam objek / class
dapat diubah. Sedangkan const tidak bersifat mutable atau nilai dalam objek / class tidak dapat
diubah.
Argumen pada parameter fungsi getNama() bersifat opsional yang berarti variable nama bisa
saja tidak ada isinya / null. Sehingga jika program diatas dijalankan akan seperti berikut.
Terjadi error karena variable nama yang ilegal dimana seharusnya tidak boleh null. Error tersebut
yang dapat membantu developer untuk membantu mengatasi masalah pada project yang
dikerjakan. Lalu bagaimana jika kita ingin membuat variable nama boleh bersifat null? Kita bisa
membuat variable nama bersifat nullable dengan menambahkan ‘?’ setelah keyword tipe
datanya.
variable nama pada parameter telah bersifat nullable atau bisa memiliki value null. Namun pada
perintah “return nama;” akan membuat pesan error ketika dijalankan walaupun parameter nama
sudah diinisialisasi.
Hal ini dikarenakan tetap ada kemungkinan hasil ‘return nama;’ akan bersifat null. Dengan
demikian, untuk mengatasinya bisa dengan cara berikut.
Laboratorium Informatika
Kita berikan pengkondisian pada value nama yang ada / tidak ada isinya, jika value nama null
maka akan mengembalikan nilai “Data Kosong”. Namun, jika nama terinisialisasi maka akan
mengembalikan nama sesuai yang diinisialisasi.
If else sebelumnya diubah menjadi 1 baris kode ‘return nama ?? Data Kosong;’. Perintah tersebut
akan menghasilkan value yang sama dengan if else sebelumnya. Jika variable nama memiliki
value null maka akan mengembalikan nilai “Data Kosong”.
Namun, akan terjadi error jika variable nama tidak diberikan value. Berikut contohnya.
Laboratorium Informatika
Jika jika variable nama tidak diberikan value maka akan terjadi error seperti berikut.
Hal ini dikarenakan ketika menggunakan ‘!’ akan melakukan throw runtime error hanya jika
variable memiliki nilai null. Dapat dilihat pemanggilan getNama() tanpa menginisialisasi
parameternya sehingga variable nama akan memiliki value kosong / null.
access modifier
Laboratorium Informatika
2. Pada bagian Flutter SDK, download SDK dari Link yang telah disediakan. Pastikan mengunduh SDK
dengan versi yang stabil.
3. Ekstrak file Flutter SDK yang telah di unduh dan tempatkan dimanapun (Warning: Jika
menggunakan Windows, jangan diletakkan ke dalam folder yang membutuhkan permission, seperti
C:/Program Files). Sebagai contoh, Flutter SDK diekstrak pada drive C:
Laboratorium Informatika
4. Kemudian Tambahkan PATH dari Flutter SDK yang telah di ekstrak sebelumnya ke dalam
Environment Variables
5. Lalu cek pada Command Prompt (CMD) untuk memastikan Flutter SDK telah terinstal atau
belum dengan menjalankan perintah flutter doctor
2. Setelah berhasil melakukan Instalasi IDE Android Studio maka langkah berikutnya adalah
menginstall Plugin yang dibutuhkan. Dengan cara klik Plugins di menu bagian kiri.
4. Setelah itu, Restart IDE Android Studio. Maka akan muncul menu baru yakni Create New Flutter
Project
Laboratorium Informatika
2. Tentukan Nama Projek yang akan dibuat, dan yang terakhir yakni tentukan Nama Packagenya pada
field Organization. Nama Package ini berguna ketika aplikasi yang telah dibuat akan di upload ke
Playstore.
Laboratorium Informatika
4. Running Program
a. Menggunakan Emulator Bawaan Android Studio
- Pilih menu AVD Manager pada Toolbar pojok kanan atas
- Pilih Create New Virtual Device, dan lakukan instalasi sesuai Instruksi (Pilih Bebas
Device Emulator yang akan di install)
- Setelah device terinstall, langkah berikutnya yakni menjalankan emulator
- Setelah Emulator berhasil dijalankan, tunggu hingga booting Emulator selesai dan masuk
pada halaman utama, Kemudian running project Flutter dengan cara menekan Shift +
F10 atau Button Run pada Toolbar pojok kanan atas, Maka default aplikasi Flutter
berhasil dijalankan.
Laboratorium Informatika
- Setelah program berhasil dijalankan langkah berikutnya yakni melakukan Mirroring Layar
ke PC / Laptop dengan cara download Installernya di
https://github.com/Genymobile/scrcpy. Setelah itu arahkan pada folder yang telah
didownload ketikkan perintah scrcpy pada CMD, Maka secara otomatis scrcpy akan
melakukan mirroring layar HP
NOTE : Jika Laptop / PC yang digunakan memumpuni gunakan cara pertama, Jika Laptop / PC
terasa berat menggunakan Emulator maka gunakan cara kedua yakni running di Real Device.
Dengan catatan Wajib menggunakan SCRCPY Sebagai mirroring layar HP. Jika masih terasa berat,
dipersilahkan menggunakan Visual Studio Code.
Laboratorium Informatika
Penjelasan :
- Baris 1, import package yang dibutuhkan. main() adalah fungsi yang pertama kali
dijalankan ketika aplikasi sedang di-load.
- Baris 4, runApp untuk me-render code ke dalam screen aplikasi, dalam hal ini terdapat class
MyApp() yang akan di-eksekusi.
- Baris 7, Mendefinisikan sebuah class yang bernama MyApp.
- Baris 11, memberikan nilai balik yang berisi MaterialApp dari package yang telah di-import.
- MaterialApp memiliki property home yang berisi Scaffold widget. Perlu diketahui bahwa
Scaffold widget inilah yang memiliki property appBar untuk membuat bar dari sebuah
aplikasi, selain appBar, widget ini juga memiliki properti lainnya, yakni: BottomAppBar,
FloatingActionButton, dan lain sebagainya.
- AppBar widget juga memiliki banyak property, diantaranya: title, leading, actions, dan
lain sebagainya. Tapi dalam case kali ini kita akan menggunakan property title yang
berisi Text widget untuk menampilkan teks yang diinginkan, dan backgroundColor
Laboratorium Informatika
untuk memberikan warna pada AppBar.
Hasil dari program tersebut adalah sebagai berikut.
Laboratorium Informatika
Penjelasan :
- Selain appBar pada point sebelumnya, Scaffold juga memiliki properti bernama Body.
- Body memiliki value Padding, hal ini ditujukan agar content yang ada didalamnya memiliki
jarak dengan bingkai sekitarnya.
Laboratorium Informatika
- Berikutnya Container, serupa dengan dengan container pada Bootstrap digunakan
untuk membungkus elemen. Disini Container didefinisikan width dan height nya.
- Dikarenakan suatu widget hanya boleh memiliki 1 child saja, oleh sebab itu ada
Widget bernama Row dan Column. Row digunakan untuk menyusun childnya secara
Horizontal, begitupun juga dengan Column akan menyusun childnya secara Vertikal.
- Kemudian ada Image.network dan Text. Image.network digunakan untuk meload url image,
jika ingin meload gambar yang disimpan di asset bisa menggunakan Image.asset. Dan yang
terakhir yakni Text, sesuai dengan namanya digunakan untuk merender sebuah String.
Hasil dari baris kode diatas adalah sebagai berikut.
nb: pastikan koneksi internet pada device berjalan karena menggunakan widget
Image.network() dimana memerlukan akses internet untuk mendapat data image. Jika tidak
maka hasilnya seperti berikut.
Laboratorium Informatika
Untuk variable age kita buat opsional, sedangkan variable yang lain bersifat required /
wajib.
3. pada main.dart, import file user.dart.
5. Selanjutnya, kita coba tampilkan pada view app. Pertama, wrap / bungkus widget Container
dengan widget Column. cara simplenya adalah letakkan cursor pada widget Container(),
kemudian tekan ‘alt + enter’.
Laboratorium Informatika
Dengan begitu, Container akan otomatis diwrap dengan Column dengan hasil seperti
berikut.
Laboratorium Informatika
7. Selanjutnya kita buat kolom baru seperti Container yang sama. Cara simplenya kita dapat
menduplikasi Container tersebut dengan cara. Blok widget Container, kemudian tekan ‘ctrl
+ d’ maka otomatis blok kode tersebut akan terduplikasi.
Laboratorium Informatika
Container akan menjadi 2 ketika telah dilakukan duplikasi. tekan ‘ctrl + alt + L’ untuk
merapikan kode / reformat code.
8. Ubah value dari parameter widget Image.network() dan Text() sesuai dengan objek yang
dibuat.
Container pertama:
Laboratorium Informatika
Container kedua:
9. Lakukan hot reload. Maka hasil view nya adalah seperti berikut.
Laboratorium Informatika
Laboratorium Informatika
LEMBAR KERJA
KEGIATAN 1
a. Tentukan studi kasus atau aplikasi yang ingin kamu buat kemudian isi studi kasus tersebut ke
dalam spreadsheet yang telah dishare oleh CO kelas praktikum.
b. Cari dan duplikasikan User Interface aplikasi yang mirip dengan studi kasus tersebut.
- Aplikasi yang diduplikasi cukup 1 halaman.
- UI yang dibuat dilarang halaman SignIn / SignUp.
Contoh studi kasus chat menduplikasikan UI beranda Whatsapp.
catatan:
- Dilarang menggunakan studi kasus yang sama.
- Tidak diperkenankan menggunakan widget ListView Builder karena widget yang akan
dinilai adalah Container, Row, Column, Icon.
KEGIATAN 2
c. Buat User Interface seperti dibawah dengan menerapkan Container, Row, Column, Icon.
Implementasikan class object serta harus terdapat ’nullable’ dan ‘required’.
Laboratorium Informatika
RUBRIK PENILAIAN
Menerapkan Container, Row, Column, Icon, Menerapkan Container, Row, Column, Icon.
Orientasi Portrait dan Landscape tidak
bermasalah
Berhasil membuat View dari UI yang disediakan Berhasil membuat View dari UI yang disediakan
pada Kegiatan 2 dengan mengimplementasikan pada Kegiatan 2.
class object serta ‘nullable’ dan ‘required’
Kemiripan View dengan User Interface aplikasi Kemiripan View dengan User Interface aplikasi
yang dipilih yang dipilih
paham soal kodingan yang dikerjakan. paham soal kodingan yang dikerjakan.
C (<65) D (<60)
Menerapkan Container, Row, Column, Icon. Tidak menerapkan Container, Row, Column, Icon.
Orientasi Portrait bermasalah
Berhasil membuat View dari desain Jadwal Tidak berhasil mengerjakan kegiatan 1 dan
Praktikum, Kemiripan View dengan desain yang kegiatan 2
diberikan.