MODUL FLUTTER

BAB I : INSTALASI

A. Preparing
Flutter SDK (https://docs.flutter.dev/get-started/install/windows)
Android Studio (https://developer.android.com/studio)
Git (https://git-scm.com/download/win)

B. Setup
1. Download Git
-Masuk kedalam Website Git melalui link diatas

Halaman Utama Website Git

-Klik Download For Windows apabila kalian menggunakan OS Windows apabila
kalian menggunakan OS lain bisa menyesuiakan

Halaman saat Download For Windows

-Setelah masuk kedalam halaman download for windows, download sesuai
dengan bit Windows Kalian
-Setelah kalian download, pada folder download kalian akan mucul file bernama
Git.exe, Double Click pada aplikasi tersebut lalu akan muncul popup, silahkan
kalian pencet yes lalu akan muncul tampilan seperti dibawah ini.

Instalasi Git
-Setelah Muncul pop up seperti diatas, silahkan kalian pencet next sampai
muncul tulisan instalasi seperti dibawah ini

Pop Up Instalasi Git

-Setelah Instalasi akan muncul Pop Up lagi seperti dibawah, silahkan kalian
un-check bagian “View Realese Note”, lalu tekan finsih

Setelah instalasi
 -Setelah Selesai Instalai, untuk mengecheck apakah Git sudah terinstal atau
belum kalian bisa buka CMD (Command Prompt) lalu ketikan perintah “Git --
Version” seperti dibawah ini

CMD Untuk Git Version

2. Instalasi Flutter
-Silahkan kalian masuk kedalam website flutter melalui link yang telah di berikan,
lalu akan muncul tampilan seperti dibawah ini

Halaman Web Flutter

-Setelah itu silahkan kalian download file flutter tersebut lalu kalian extract,
setelah itu silahkan kalian buat folder pada disk C:/ lalu kalian buatkan folder
bernama src dan taruh file flutter yang telah di extract kedalam folder tersebut
seperti dibawah ini

Folder src pada Disk C:/

-Setelah itu silahkan kalian ketikan pada search bar laptop/komputer kalian ”Edit
Envirotment Variable” Seperti dibawah ini

Envirotment Variable
-Setelah kalian masuk kedalam envirotment variable, silahkan kalian klik
“Envirotment Variable” pada bagian bawah lalu akan muncul tampilan seperti
dibawah ini

Editing Envirotment Variable

-Tahapan selanjutnya iyalah menambahkan PATH pada user variable dengan

menggunakan PATH bin (C:\src\flutter\bin) lalu kalian copy path tersebut pada
folder flutter yang sebelumnya telah kita extract lalu kalian copy path tersebut,
setelah itu kalian pencet new lalu kalian paste path tersebut seperti dibawah ini

Menambah Path Bin

 -untuk men check apakah flutter kalian sudah terinstal pada komputer kalian bisa
dengan cara membuka CMD (Command Promt) dan mengetikan perintah “Flutter
Doctor” Seperti dibawah ini

Flutter Doctor
3. Instalasi Android Studio
-Silahkan kalian menuju halaman utama website android studio dengan
menggunakan link diatas dan akan muncul tampilan websitenya seperti dibawah
ini

Tampilan Website Android Studio

-Silahkan kalian tekan tombol download, setelah itu akan muncul pesan pop up
yang berisikan “Terms And Conditions” silahkan kalian scroll kebawah sampai
kalian menemkan kotak tombol checklis, silahkan kalian tekan lalu tekan
download seperti di bawah ini

Terms And Conditions

-Setelah kalian selesai mendownload android studio, silahkan double click pada
android studio.exe, setelah itu akan muncul pop up seperti dibawah ini

Pop Up Instalasi
-Setelah itu silahkan kalian tekan next sampai proses instalasi selesai lalu akan
muncul pop up baru seperti dibawah ini

Instalasi Selesai

-Setelah itu silahkan kalian tekan finish dan akan terbuka secara otomatis
aplikasi android studio seperti dibawah ini

Halaman Utama Android Studio

-Setelah itu silahkan kalian klik “More Actions” lalu tekan “SDK Manager” dan
akan muncul seperti di bawah ini, silahkan kalian ke bagian SDK Tools lalu kalian
centang bagian “Android SDK Command-Line Tools”

Instalasi Android SDK

-Setelah Kalian Checklis bagian “Android SDK Command-Line Tools” silahkan

kalian tekan Button “Apply” setelah itu aplikasi akan menginstal package tersebut
seperti dibawah ini

Instalasi SDK
-Setelah Selesai silahkan kalian tekan “Finnish” lalu kalian tekan kembali tombol
“Apply ” lalu tekan“Oke”, Setelah itu silahkan kalian cek kembali menggunakan
command “Flutter Doctor” Pada CMD (Command Line) Kalian apabila tidak ada
masalah maka akan muncul tampilan seperti di bawah ini

Flutter Doctor Setelah instal SDK

4. Instalasi Extension Pada VS Code
-Silahkan Kalian Buka Aplikasi VSCode pada laptop maupun komputer kalian
masing masing dan masuk ke tab “Extension” seperti dibawah ini

Tab Extension pada VSCode

-Silahkan kalian search pada search bar extension dengan nama “Flutter” jika
sudah maka pilih yang paling banyak di download lalu kalian tekan download jika
sudah maka akan seperti dibawah ini tampilanya

Extension Flutter
5. Membuat Project Pertama Pada Flutter
-Buka VSCode Kalian lali silahakn tekan tombol pada keyboad dengan
kombinasi CTRL+SHIFT+P untuk membuka search bar pada VSCode, lalu
ketikan “Flutter” Sampai muncul Seperti DIbawah ini

Search Bar
 -Setelah itu silahkan pilih “Flutter:New Project” lalu pilih “Application”, tentukan
lokasi kalian menaruh filenya nantinya, lalu silahkan berikan nama file kalian
NOTE:NAMA FILE FLUTTER WAJIB HURUF KECIL SEMUA DAN TANPA
SPASI

Folder Flutter Pertama kali

6. Running Flutter Pada HP

-Silahkan Siapkan Kabel data, lalu kalian koneksikan pada HP kalian, setelah itu
masuk ke dalam menu Setting pada hp masing masing
-Setelah ada di dalam menu settings silahkan kalian menuju “About Phone” atau
“Tentang Ponsel” setelah itu kalian tekan sebanyak 5-10 kali versi OS pada hp
kalian sampai muncul “Anda telah Menjadi Developer”
-Selanjutnya silahkan kalian masuk kedalam menu developer atau opsi
developer pada setting hp kalian dengan cara search pada search bar hp kalian
-setelah itu silahkan kalian scroll kebawh dan cari USB Debungging lalu kalian
ceklis apabila muncul perbolehkan USB debugging silahkan kalian tekan yes
-Pada VSCode silahkan pilih nama perangkat kalian seperti gambar dibawah ini
Selecting Devices
-setelah devices kalian terpilih silahkan kalian run project kalian dengan F5

Hasil Apk
C. PENUGASAN
1. Silahkan Kalian Ketikan Kembali Script “Hello World” pada file Main.dart di flutter kalian

2. Silahkan Kalian Ubah Warnanya menjadi warna favorit kalian, text app bar menjadi
“SMK PRESTASI PRIMA”, Dan text body menjadi nama, kelas serta NIS kalian

KIRIMKAN CODINGAN BESERTA HASILNYA KE DALAM CLASSROOM