VERSION 1.

FEBRUARI, 2021

[PEMROGRAMAN MOBILE]
INSTALASI FRAMEWORK FLUTTER, WIDGET – MODUL 1

TIM PENYUSUN:
HARIYADI, S.KOM, M.KOM
AUGIE WINANDA FAVOURITE
FACHRY FATHURAHMAN

PRESENTED BY: LAB. INFORMATIKA

UNIVERSITAS MUHAMMADIYAH MALANG

[PEMROGRAMAN MOBILE]
 Laboratorium Informatika

CAPAIAN PEMBELAJARAN MATA KULIAH

Adapun indikator capaian pembelajaran mata kuliah ini adalah mahasiswa mampu membuat atau
mempraktekkan pemrograman sederhana pembuatan User Interface pada Framework Flutter
menggunakan Android Studio.

SUB CAPAIAN PEMBELAJARAN MATA KULIAH

Adapun sub capaian pembelajaran mata kuliah ini sebagai berikut:

• Mahasiswa memahami apa itu Framework Flutter

• Mahasiswa dapat memahami Widget pada Framework Flutter dan membuat User Interface

KEBUTUHAN HARDWARE & SOFTWARE

• PC / Laptop
• IDE Android Studio
• Flutter SDK : https://flutter.dev/docs/get-started/install

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.

Februari, 2021 [PEMROGRAMAN MOBILE] 2

 Laboratorium Informatika

MATERI PRAKTIKUM (INSTALASI DAN RUNNING PROGRAM)

INSTALASI FLUTTER SDK (SOFTWARE DEVELOPMENT KIT)
1. Buka halaman https://flutter.dev/docs/get-started/install, kemudian pilih Sistem Operasi yang kamu
gunakan.

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:

Februari, 2021 [PEMROGRAMAN MOBILE] 3

 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

INSTALASI ANDROID STUDIO

1. Buka halaman https://developer.android.com/studio, Kemudian unduh File Installer yang telah
disediakan dan lakukan instalasi sesuai instruksi.

Februari, 2021 [PEMROGRAMAN MOBILE] 4

 Laboratorium Informatika

2. Setelah berhasil melakukan Instalasi IDE Android Studio maka langkah berikutnya adalah menginstall
Plugin yang dibutuhkan. Dengan cara klik Configure pada pojok kanan bawah dan pilih plugin.

3. Install Plugin Dart dan Flutter

4. Setelah itu, Restart IDE Android Studio. Maka akan muncul menu baru yakni Create New Flutter
Project

Februari, 2021 [PEMROGRAMAN MOBILE] 5

 Laboratorium Informatika

FLUTTER NEW PROJECT

1. Pilih Flutter Application

2. Tentukan Nama Projek yang akan dibuat, arahkan Flutter SDK Path, dan yang terakhir yakni tentukan
Nama Packagenya. Nama Package ini berguna ketika aplikasi yang telah dibuat akan di upload ke
Playstore.

Februari, 2021 [PEMROGRAMAN MOBILE] 6

 Laboratorium Informatika

3. Setelah itu maka akan tampil kelas main default berupa program counter

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

Februari, 2021 [PEMROGRAMAN MOBILE] 7

 Laboratorium Informatika

- 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.

b. Menggunakan Real Device dan Mirroring

- Aktifkan USB Debugging pada menu Opsi Pengembang, untuk tutorial lebih lanjut bisa
mencari referensi secara mandiri pada Google. Dikarenakan tutorial pengaktifannya yang
berbeda di setiap device. Jika USB Debugging berhasil diaktifkan, maka Device yang kita
gunakan akan terdeteksi pada toolbar atas.

- Langkah berikutnya yakni melakukan hal serupa ketika menggunakan Emulator, yakni
melakukan Running Program.

Februari, 2021 [PEMROGRAMAN MOBILE] 8

 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.

Februari, 2021 [PEMROGRAMAN MOBILE] 9

 Laboratorium Informatika

MATERI PRAKTIKUM (LAYOUTING WIDGET FLUTTER)

A. APPBAR WIDGET

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 9, 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 untuk memberikan
warna pada AppBar.

Februari, 2021 [PEMROGRAMAN MOBILE] 10

 Laboratorium Informatika

B. CONTAINER, ROW, COLUMN, IMAGE, TEXT

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.
- 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.

Februari, 2021 [PEMROGRAMAN MOBILE] 11

 Laboratorium Informatika

LEMBAR KERJA

KEGIATAN 1
a. Pelajari apa itu ListView Builder dan cara penggunaanya
b. Buat User Interface dengan menerapkan Container, Row, Column, ListView Builder, Icon.
Berikutnya buat variabel Array berisi Jadwal Praktikum Senin - Sabtu masing-masing,
Kemudian buatlah semirip mungkin desain Berikut :

Font : Mulish
Font Weight : Reguler, Semibold
Color : #FF5B16, #F5F6F8, #FFFFFF, #1A1A1A, #A0A0A0

KEGIATAN 2
Carilah dan Duplikat User Interface Aplikasi yang sering dipakai / sedang booming saat ini.
Contoh : UI Beranda Instagram. (UI yang dibuat dilarang Halaman SIGNIN / SIGNUP, untuk
meminimalisir pengerjaan serupa maka masing-masing CO Asisten mendata praktikkannya akan
menduplikat Aplikasi apa, maks H-5 Praktikum)

Februari, 2021 [PEMROGRAMAN MOBILE] 12

 Laboratorium Informatika

RUBRIK PENILAIAN

A (80 - 100) B (70 - 80)

Menerapkan Container, Row, Column, ListView Menerapkan Container, Row, Column, Orientasi
Builder, Orientasi Portrait dan Landscape tidak Potrait atau Landscape tidak bermasalah
bermasalah

Berhasil membuat View dari Jadwal Praktikum Berhasil membuat View dari desain Jadwal
masing - masing dan menggunakan Array sebagai Praktikum, Kemiripan View dengan desain yang
penyimpanan data, Kemiripan View dengan diberikan
desain yang diberikan

Kemiripan View dengan User Interface aplikasi Kemiripan View dengan User Interface aplikasi
yang dipilih yang dipilih

C (<65) D (<60)

Menerapkan Container, Row, Column, Orientasi Tidak Menerapkan Container, Row, Column,
Potrait atau Landscape tidak bermasalah Orientasi Portrait atau Landscape bermasalah

Berhasil membuat View dari desain Jadwal Tidak berhasil mengerjakan Kegiatan 1 dan
Praktikum, Kemiripan View dengan desain yang Kegiatan 2
diberikan

View yang didemokan tidak sesuai dengan apa

yang sudah di list sebelumnya (Berubah
pengerjaan User Interface Aplikasi)

Februari, 2021 [PEMROGRAMAN MOBILE] 13