VERSI 2.0

SEPTEMBER 2025

DISUSUN OLEH:

• Ali Sofyan, S.kom, M.Kom
• Faizal Qadri Trianto
• Muhammad Hisyam Kamil

PENDAHULUAN

TUJUAN

1. Melakukan setup Flutter Environment (tanpa Android Studio).
2. Membuat Android Emulator menggunakan SDK Manager.
3. Membuat project awal Flutter.
4. Mengetahui struktur dasar project Flutter.
5. Memahami dasar framework Flutter dan bahasa Dart.

TARGET MODUL

1. Menginstal Flutter (Stable Channel) dengan FVM.
2. Mengonfigurasi Android SDK Command Line Tools (platform-tools, emulator, platforms).
3. Memahami konsep framework Flutter dan single codebase.
4. Menjelaskan dasar bahasa pemrograman Dart (syntax, variabel, fungsi).

PERSIAPAN

1. Laptop/PC dengan Windows, macOS, atau Linux.
2. VS Code / Firebase Studio (Cloud IDE).
3. Niat

KEYWORDS

Flutter, FVM, Android SDK, PATH, Chocolatey, Homebrew, GetX, GetX CLI

TABLE OF CONTENTS

1. PENDAHULUAN
   • TUJUAN
   • TARGET MODUL
   • PERSIAPAN
   • KEYWORDS
   • TABLE OF CONTENTS
2. MATERI PENGANTAR
   • Apa Itu Flutter?
   • Apa Itu Dart?
   • Apa Itu FVM?
3. INSTALASI
   • Requirements
   • Panduan Instalasi
4. DART SYNTAX
   • Variabel
   • Data Type
   • Functions
   • Ternary
5. MEMBUAT PROYEK FLUTTER BARU

MATERI PENGANTAR

Dalam era perkembangan teknologi saat ini, kebutuhan terhadap aplikasi lintas platform semakin meningkat. Pengguna tidak lagi hanya memakai perangkat Android atau iOS secara terpisah, melainkan menuntut aplikasi yang dapat berjalan seragam di berbagai perangkat. Untuk menjawab tantangan tersebut, Google mengembangkan sebuah framework bernama Flutter, yang memanfaatkan bahasa pemrograman Dart sebagai pondasi utama.

Modul ini menjadi langkah pertama praktikan dalam mengenal Flutter, memahami dasar bahasa Dart, serta mempelajari pengelolaan versi Flutter dengan FVM (Flutter Version Management). Tidak hanya teori, modul ini juga membimbing mahasiswa menyiapkan lingkungan pengembangan (environment) yang benar agar proses belajar dan praktik bisa berjalan lancar.

Apa Itu Flutter?

Flutter adalah framework UI open-source yang dirilis oleh Google pada Mei 2017. Flutter memungkinkan pengembang membuat aplikasi untuk Android, iOS, Web, Desktop, dan Embedded hanya dengan satu basis kode (single codebase). Dengan demikian, sebuah tim pengembang cukup menulis kode sekali, dan hasilnya dapat dijalankan di berbagai platform tanpa harus membangun aplikasi secara terpisah untuk setiap sistem operasi.

Ada beberapa poin penting yang menjadikan Flutter populer:

1. Single Codebase Flutter mendukung penulisan kode sekali untuk dijalankan di berbagai platform. Ini berbeda dengan pengembangan native yang membutuhkan bahasa dan SDK berbeda untuk Android (Java/Kotlin) dan iOS (Swift/Objective-C).

2. Widget sebagai Pondasi UI Semua elemen UI di Flutter dibangun menggunakan widget. Baik teks, tombol, gambar, hingga layout, semuanya adalah widget yang dapat dikombinasikan. Konsep ini memudahkan pengembang membuat antarmuka yang konsisten, elegan, dan responsif.

3. Kinerja Tinggi Flutter menggunakan Skia Graphics Engine yang mampu merender UI dengan sangat cepat dan efisien. Selain itu, kode Flutter dikompilasi menjadi kode native sehingga performanya setara dengan aplikasi yang dikembangkan secara native.

4. Hot Reload Fitur ini sangat membantu saat proses pengembangan. Perubahan pada kode bisa langsung terlihat pada aplikasi yang sedang berjalan, tanpa harus menunggu proses kompilasi penuh.

5. Komunitas Aktif & Ekosistem Kaya Flutter memiliki ekosistem yang terus berkembang. Ribuan package dan plugin sudah tersedia untuk mempercepat pengembangan, mulai dari integrasi Firebase, sistem pembayaran, hingga komponen UI siap pakai.

Dengan berbagai keunggulan ini, Flutter kini digunakan oleh banyak perusahaan besar dan startup untuk membangun aplikasi modern.

Apa Itu Dart?

Dart adalah bahasa pemrograman yang dikembangkan oleh Google, dirancang untuk produktivitas tinggi, performa cepat, serta fleksibilitas multi-platform. Bahasa ini menjadi inti dari Flutter, meskipun juga dapat digunakan secara mandiri untuk pengembangan web, server, maupun desktop.

Beberapa karakteristik utama Dart:

1. Sintaks Familiar Dart memiliki sintaks yang mirip dengan bahasa populer seperti Java, C#, atau JavaScript. Hal ini membuat Dart mudah dipelajari oleh mahasiswa yang sudah mengenal bahasa pemrograman berorientasi objek.

2. Null Safety Dart mendukung null safety, yaitu mekanisme untuk mencegah error akibat variabel bernilai null secara tak terduga. Fitur ini meningkatkan stabilitas kode dan mengurangi bug runtime.

3. Static & Dynamic Typing Dart bisa digunakan dengan pendekatan static typing (menentukan tipe data secara eksplisit) atau dynamic typing (tipe data ditentukan secara otomatis oleh kompiler). Fleksibilitas ini memudahkan pengembang dalam berbagai skenario.

4. Dukungan Asynchronous Dart menyediakan kata kunci async dan await untuk menangani operasi asynchronous, misalnya pemanggilan API atau akses file. Hal ini membuat kode lebih rapi dibanding callback tradisional.

5. Kompilasi Ganda (Dual Compilation)

   • JIT (Just-In-Time): digunakan saat pengembangan, mendukung hot reload.
   • AOT (Ahead-Of-Time): digunakan saat produksi, menghasilkan kode native dengan performa tinggi.

Dengan kombinasi fitur ini, Dart menjadi bahasa modern yang dirancang khusus untuk mendukung produktivitas dan kinerja tinggi, terutama dalam pengembangan Flutter.

Apa Itu FVM?

Dalam dunia nyata, proyek Flutter sering kali menggunakan versi yang berbeda-beda. Misalnya, proyek lama mungkin masih berjalan di Flutter 3.7, sementara proyek baru sudah memakai Flutter 3.35.4. Jika hanya mengandalkan satu instalasi Flutter, maka pengembang harus terus-menerus mengganti versi secara manual — yang jelas tidak efisien.

Di sinilah FVM (Flutter Version Management) hadir sebagai solusi. FVM adalah alat untuk mengelola berbagai versi Flutter di satu komputer. Dengan FVM, mahasiswa bisa:

1. Menggunakan Versi Flutter Berbeda untuk Proyek Berbeda Setiap proyek bisa mengunci versinya masing-masing tanpa saling mengganggu.

2. Global & Local Versioning

   • Global: menentukan versi Flutter default untuk seluruh sistem.
   • Local: menentukan versi Flutter khusus untuk satu proyek.

3. Stabilitas Lingkungan Dengan FVM, proyek tetap berjalan meskipun versi Flutter terbaru dirilis, karena dependensi dikunci sesuai versi yang dipilih.

4. Kemudahan Upgrade/Downgrade Mengganti versi Flutter cukup dengan satu perintah, tanpa harus menghapus dan menginstal ulang manual.

Dengan adanya FVM, manajemen versi Flutter menjadi lebih profesional, terstruktur, dan sesuai standar industri perangkat lunak.

INSTALASI

Setelah memahami teori mengenai Flutter, Dart, dan FVM, langkah berikutnya adalah setup environment. Proses instalasi dibedakan berdasarkan sistem operasi: Windows, macOS, dan Linux.

Pada bagian instalasi, praktikan akan dibimbing mulai dari menginstal Java (sebagai dependensi penting), package manager (Chocolatey atau Homebrew), Flutter SDK melalui FVM, hingga Android SDK Command Line Tools yang memungkinkan pengembangan aplikasi Android tanpa perlu menginstal Android Studio.

Requirements

Jika kalian memiliki spek laptop/PC yang tidak mencukupi, teman-teman tidak perlu khawatir karena kalian bisa menggunakan text editor online bernama Firebase Studio. Platform yang dibuat oleh google berbasis cloud yang menyediakan template mulai dari Web App, Backend, Mobile, AI & ML, Database, hingga Misc.

Panduan Instalasi

Sebelum memulai proses instalasi, pastikan terlebih dahulu bahwa Anda telah terhubung dengan koneksi internet yang stabil dan kuat. Hal ini sangat penting untuk memastikan tidak ada unduhan yang terputus atau file yang rusak, yang dapat menyebabkan masalah selama proses instalasi.

Firebase Studio

Jika kalian menggunakan Firebase Studio, kalian tidak perlu melakukan instalasi apapun dan cukup mengunjungi Firebase Studio dan melakukan registrasi akun. Untuk membuat project awal Flutter menggunakan Firebase Studio bisa kalian lihat pada video tutorial: FLUTTER-SETUP-FIREBASE-STUDIO

Catatan: Sangat disarankan untuk menginstal Flutter (SDK, tools, dll.) secara langsung di perangkat lokal Anda jika laptop/PC Anda memiliki spesifikasi yang memadai.

Windows

WAJIB MENGGUNAKAN POWERSHELL, JANGAN GUNAKAN CMD/COMMAND PROMPT

1. Install Java (Temurin v17)

   Untuk memastikan kompatibilitas, wajib gunakan Java JDK versi 17.x. Kami merekomendasikan Java JDK dari Eclipse Adoptium Temurin. Anda bisa mengunduhnya melalui tautan: LINK-JAVA-TEMURIN-17-WINDOWS.

2. Install Chocolatey

   Pada PowerShell Run as Administrator, salin dan jalankan perintah:

   Install Chocolatey

   Salin

   
   Set-ExecutionPolicy Bypass -Scope Process -Force; `
   [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; `
   iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

   Verifikasi instalasi dengan perintah berikut ini

   Verifikasi Instalasi Chocolatey

   Salin

   
   choco -v
   

3. Install GIT via Chocolatey (lewati jika GIT sudah terinstall)

   Install GIT via Chocolatey

   Salin

   
   choco install git -y
   

4. Install FVM via Chocolatey

   Install FVM via Chocolatey

   Salin

   
   choco install fvm -y
   

5. Install Flutter via FVM

   Install Flutter via FVM

   Salin

   
   fvm install stable
   

   Set FVM Global Stable

   Salin

   
   fvm global stable
   

   Set PATH FVM

   Salin

   
   [Environment]::SetEnvironmentVariable("PATH", `
   "$env:USERPROFILE\fvm\default\bin;$([Environment]::GetEnvironmentVariable('PATH','User'))", `
   "User")

6. Install Android SDK (tanpa Android Studio)

   Install Android SDK (tanpa Android Studio)

   Salin

   
   irm https://mil.kamil.my.id/android-sdk | iex
   

7. Verifikasi Instalasi

   Verifikasi Instalasi

   Salin

   
   flutter doctor
   

MacOS

1. Install Homebrew

   Install Homebrew

   Salin

   
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

2. Install Java via Homebrew (Temurin v17)

   Install Java via Homebrew (Temurin v17)

   Salin

   
   brew install --cask temurin@17
   

3. Install FVM via Homebrew

   Install FVM via Homebrew

   Salin

   
   brew tap leoafarias/fvm
   

   Install FVM via Homebrew

   Salin

   
   brew install fvm
   

4. Install Flutter via FVM

   Install Flutter via FVM

   Salin

   
   fvm install stable
   

   Set FVM Global Stable

   Salin

   
   fvm global stable
   

   Add FVM to PATH

   Salin

   
   echo 'export PATH="$HOME/fvm/default/bin:$PATH"' >> ~/.zshrc
   

5. Install Android SDK (tanpa Android Studio)

   Jalankan script instalasi:

   Install Android SDK

   Salin

   
   brew install --cask android-commandlinetools android-platform-tools
   

   Selanjutnya, untuk memastikan apakah MacBook kamu menggunakan chip Apple Silicon (M1, M2, dll.) atau Intel, buka Terminal dan jalankan perintah ini:

   Check Architecture

   Salin

   
   arch
   

   Jika hasilnya arm64, MacBook kamu menggunakan chip Apple Silicon (M1 ke atas). Jika hasilnya i386 atau x86_64, MacBook kamu menggunakan chip Intel.

   MacBook dengan Chip M1, M2, M3 (Apple Silicon)

   Untuk MacBook seri terbaru yang menggunakan chip Apple Silicon (M1, M2, M3, dll.), gunakan perintah berikut.

   Set PATH Android SDK (Apple Silicon)

   Salin

   
   echo 'export ANDROID_HOME="/opt/homebrew/share/android-commandlinetools"
   export PATH="$ANDROID_HOME/cmdline-tools/latest/bin:$PATH"
   export PATH="$ANDROID_HOME/platform-tools:$PATH"' >> ~/.zshrc
   

   MacBook dengan Chip Intel

   Untuk MacBook seri lama yang menggunakan chip Intel, gunakan perintah ini.

   Set PATH Android SDK (Intel)

   Salin

   
   echo 'export ANDROID_HOME="/usr/local/share/android-commandlinetools"
   export PATH="$ANDROID_HOME/cmdline-tools/latest/bin:$PATH"
   export PATH="$ANDROID_HOME/platform-tools:$PATH"' >> ~/.zshrc
   

   Setelah menjalankan salah satu perintah di atas, kamu harus me-restart terminal atau menjalankan perintah berikut agar perubahan segera berlaku:

   Reload ZSH Config

   Salin

   
   source ~/.zshrc
   

   Setelah itu, jalankan script berikut ini:

   Install Android SDK Components

   Salin

   
   sdkmanager --install platform-tools emulator tools "platforms;android-34" "build-tools;34.0.0"
   

6. Verifikasi Instalasi

   Verifikasi Instalasi

   Salin

   
   fvm flutter doctor
   

GNU/Linux

1. Install Java (Temurin v17)

   Untuk distro seperti Ubuntu, RHEL/Fedora, openSUSE, dll., lihat panduan di: LINK-JAVA-TEMURIN-17-LINUX

2. Install Homebrew (Linuxbrew)

   Install Homebrew (Linuxbrew)

   Salin

   
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

3. Install GIT via Homebrew (jika belum ada)

   Install GIT via Homebrew (jika belum ada)

   Salin

   
   brew install git
   

4. Install FVM via Homebrew

   Install FVM via Homebrew

   Salin

   
   brew tap leoafarias/fvm
   brew install fvm
   

5. Install Flutter via FVM

   Install Flutter via FVM

   Salin

   
   fvm install stable
   

   Set FVM Global Stable

   Salin

   
   fvm global stable
   

   Tambahkan ke PATH sesuai shell:

   Set PATH Bash

   Salin

   
   echo 'export PATH="$HOME/fvm/default/bin:$PATH"' >> ~/.bashrc
   

   Set PATH Zsh

   Salin

   
   echo 'export PATH="$HOME/fvm/default/bin:$PATH"' >> ~/.zshrc
   

   Set PATH Fish

   Salin

   
   echo 'set -Ua fish_user_paths $HOME/fvm/default/bin' >> ~/.config/fish/config.fish
   

6. Install Android SDK

   • Arch Linux: Lihat Arch Wiki: Android SDK packages
   • Distro lain: Unduh Android Command-line tools secara manual

7. Verifikasi Instalasi

   Verifikasi Instalasi

   Salin

   
   flutter doctor
   

KONFIGURASI DAN EKSTENSI WAJIB UNTUK VSCODE

Flutter Extension

Ekstensi Visual Studio Code ini mempermudah Anda dalam mengedit, melakukan refactoring, menjalankan, dan melakukan hot reload pada aplikasi mobile Flutter. Ekstensi ini memerlukan (dan akan otomatis menginstal) ekstensi Dart untuk mendukung bahasa pemrograman Dart.

Catatan: Untuk mendapatkan seluruh fitur debugging, jalankan proyek menggunakan tombol F5 atau dari menu Debug.

AVD Manager Extension

Ekstensi AVD Manager untuk Visual Studio Code ini mempermudah Anda dalam mengelola Android Virtual Device (AVD) dan paket SDK langsung dari VS Code.

Fitur:

1. Manajemen AVD: Anda dapat dengan mudah membuat, mengubah nama, atau menghapus AVD.
2. Manajemen Paket SDK: Ekstensi ini memungkinkan Anda menginstal, memperbarui, dan menghapus berbagai paket SDK.
3. Emulator: Anda bisa langsung menjalankan AVD dari dalam Visual Studio Code.

Cara Penggunaan:

• Buka Command Palette dengan Ctrl+Shift+P (Windows/Linux) atau Cmd+Shift+P (macOS)
• Ketik "View: Show AVDManager"

Untuk detail lengkap: toroxx/vscode-avdmanager

Instalasi GetX CLI

GetX adalah state management yang ringkas dan powerful untuk Flutter. Get CLI adalah command line interface untuk membuat infrastruktur GetX dengan template.

fvm flutter pub global activate get_cli

Verifikasi instalasi:

get -v

DART SYNTAX

Sisi positif dari bahasa pemrograman Dart salah satunya adalah sintaksis seperti variable dan operator yang digunakan tidak jauh berbeda dengan bahasa pemrograman lainnya.

Variabel

Variabel bisa dibayangkan sebagai sebuah kotak atau wadah yang menyimpan nilai. Di dalam komputer variable ini disimpan di dalam memori komputer. Pada Dart kita mendefinisikan sebuah variable dengan keyword var.

var name = 'Flutter';
var count = 10;

Dart juga memiliki 4 jenis variables:

1. Null Safety

Null safety memastikan bahwa variabel tidak boleh null kecuali secara eksplisit dinyatakan bisa null.

String? nullableName;  // Bisa null
String nonNullableName = 'Flutter';  // Tidak boleh null

2. Default Value

Variabel yang tidak diinisialisasi secara otomatis memiliki nilai default null. Untuk variabel non-nullable, harus diinisialisasi sebelum digunakan.

int? nullableNumber;  // Default: null
int nonNullableNumber = 0;  // Harus diinisialisasi

3. Late Variables

Variabel late memungkinkan deklarasi variabel non-nullable tanpa harus langsung diinisialisasi.

late String description;

void main() {
description = 'Flutter Framework';
print(description);
}

4. Final and Const

• final: variabel hanya dapat diinisialisasi sekali, nilainya bisa ditentukan saat runtime
• const: variabel bersifat compile-time constant

final String version = 'Flutter 3.0';
const double pi = 3.14159;

Data Type

Dart memiliki beberapa tipe bawaan (built-in types):

Functions

Penggunaan function pada Dart Flutter dapat dilakukan dengan beberapa cara:

1. Main Function

Titik awal dari sebuah aplikasi Dart atau Flutter.

void main() {
runApp(MyApp());
}

2. Type Function & Type Parameters

Fungsi dengan tipe data generik untuk fleksibilitas.

T getValue<T>(T value) {
return value;
}

3. Output Function

Fungsi yang mengembalikan nilai.

int add(int a, int b) {
return a + b;
}

4. Async Await Function

Fungsi untuk menangani operasi asynchronous.

Future<String> fetchData() async {
await Future.delayed(Duration(seconds: 2));
return 'Data loaded';
}

Ternary

Fitur untuk menulis singkat ekspresi kondisional dalam Flutter.

String status = isLoggedIn ? 'Welcome' : 'Please login';

MEMBUAT PROYEK FLUTTER BARU

Berikut adalah langkah-langkah untuk membuat proyek Flutter baru:

flutter create nama_proyek_anda
cd nama_proyek_anda

Untuk membuka proyek di Visual Studio Code:

  
code .

Struktur proyek Flutter yang akan terbuat:

• lib/: Folder utama untuk kode aplikasi
• pubspec.yaml: File konfigurasi proyek dan dependensi
• android/ & ios/: Folder platform-specific
• test/: Folder untuk unit testing

Referensi Lengkap:

• Flutter Documentation
• Dart Language Tour
• Flutter Codelabs