Flutter untuk Pemula: Dari Install sampai Aplikasi Pertama Jalan di HP

Saya masih ingat betul momen pertama kali menjalankan aplikasi Flutter di HP fisik sendiri. Bukan di emulator — di HP sungguhan. Ada rasa yang berbeda ketika melihat hasil kerja beberapa jam terakhir bisa disentuh langsung, digeser, diklik. Saat itu saya pikir, "Oke, ini yang bikin ketagihan."

Panduan ini saya tulis untuk siapapun yang baru mau mulai dengan Flutter. Saya akan ceritakan prosesnya dari nol — termasuk bagian-bagian yang biasanya bikin frustrasi tapi jarang diceritakan di tutorial resmi.

Install Flutter SDK

Pertama, unduh Flutter SDK dari flutter.dev sesuai sistem operasi. Setelah diekstrak, tambahkan path-nya ke environment variable.

Di Linux/Mac, tambahkan ini di ~/.bashrc atau ~/.zshrc:

export PATH="$PATH:/lokasi/flutter/bin"

Di Windows, tambahkan folder flutterin ke System Environment Variables → Path.

Setelah itu, jalankan:

flutter doctor

Perintah ini akan mengecek semua dependensi yang dibutuhkan dan memberitahu mana yang belum lengkap. Bacanya teliti — setiap tanda ✗ atau ✗ perlu diselesaikan sebelum lanjut. Yang paling sering bermasalah di awal adalah Android SDK dan license agreement-nya.

Untuk setujui semua license Android:

flutter doctor --android-licenses

Tekan 'y' untuk setiap pertanyaan sampai selesai.

Setup Editor

VS Code adalah pilihan yang paling ringan dan paling banyak tutorialnya. Install extension Flutter dan Dart dari marketplace VS Code. Kedua extension ini yang memberi fitur autocomplete, syntax highlighting, dan debug langsung dari editor.

Android Studio juga bagus, tapi lebih berat. Kalau RAM komputer di bawah 8GB, VS Code jauh lebih nyaman dipakai bersamaan dengan emulator yang juga butuh resource tidak sedikit.

Buat Proyek Pertama

flutter create aplikasi_pertama
cd aplikasi_pertama

Flutter akan generate struktur proyek lengkap. Yang perlu diperhatikan:

/lib
main.dart          ← titik masuk aplikasi, di sini semua dimulai

/android             ← konfigurasi spesifik Android

/ios                 ← konfigurasi spesifik iOS

pubspec.yaml         ← manajemen dependency dan assets

Buka lib/main.dart — di sinilah kode Flutter ditulis. Flutter sudah menyertakan contoh counter app yang lumayan baik untuk dipelajari strukturnya sebelum mulai dari nol.

Memahami Widget: Fondasi Flutter

Di Flutter, hampir semua hal adalah widget. Teks adalah widget. Tombol adalah widget. Layout adalah widget. Bahkan padding dan margin pun adalah widget. Ini konsep yang paling penting dipahami di awal.

Ada dua jenis widget utama:

StatelessWidget — widget yang tidak punya state yang berubah. Cocok untuk tampilan statis:

class KartuProfil extends StatelessWidget {
final String nama;

final String jabatan;


const KartuProfil({super.key, required this.nama, required this.jabatan});


@override

Widget build(BuildContext context) {

return Card(

child: Padding(

padding: const EdgeInsets.all(16),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Text(nama, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),

const SizedBox(height: 4),

Text(jabatan, style: const TextStyle(color: Colors.grey)),

],

),

),

);

}

}

StatefulWidget — widget yang punya state yang bisa berubah dan memicu rebuild UI:

class TombolHitung extends StatefulWidget {
const TombolHitung({super.key});


@override

State<TombolHitung> createState() => _TombolHitungState();

}


class _TombolHitungState extends State<TombolHitung> {

int _hitung = 0;


@override

Widget build(BuildContext context) {

return Column(

children: [

Text("$_hitung", style: const TextStyle(fontSize: 48)),

ElevatedButton(

onPressed: () => setState(() => _hitung++),

child: const Text("Tambah"),

),

],

);

}

}

Jalankan di HP Fisik

Ini bagian yang sering bikin bingung pertama kali. Untuk menjalankan Flutter app di HP Android:

1. Aktifkan Developer Options di HP — caranya: buka Settings → About Phone → tap "Build Number" sebanyak 7 kali
2. Di Developer Options, aktifkan USB Debugging
3. Hubungkan HP ke komputer via USB
4. Jalankan flutter devices — HP Anda seharusnya muncul di daftar
5. Jalankan flutter run

Kalau HP tidak terdeteksi, biasanya masalah di driver USB. Di Windows, install driver ADB yang sesuai dengan merek HP. Di Linux, kadang perlu tambah udev rules.

Hot Reload: Fitur yang Paling Bikin Betah

Saat aplikasi sedang berjalan di HP atau emulator, coba ubah teks atau warna di kode, lalu tekan r di terminal (atau Ctrl+S di VS Code dengan extension Flutter). Perubahan langsung muncul tanpa restart aplikasi. Ini yang namanya hot reload.

Hot restart (tekan R besar) me-restart aplikasi tapi tanpa compile ulang dari nol — lebih cepat dari build biasa.

Publikasi ke Play Store: Gambaran Singkat

Sebelum bisa publish ke Play Store, ada beberapa hal yang perlu disiapkan: akun Google Play Developer (bayar sekali $25), keystore untuk menandatangani APK, dan mengatur konfigurasi release di android/app/build.gradle.

Untuk build release APK:

flutter build apk --release
# atau untuk App Bundle (direkomendasikan Play Store)

flutter build appbundle --release

Output-nya ada di build/app/outputs/.

Penutup

Flutter itu bukan yang paling mudah untuk dipelajari dari nol, tapi kurva belajarnya seimbang dengan kemampuan yang didapat setelahnya. Satu codebase untuk Android dan iOS, performa yang mendekati native, dan ekosistem package yang sudah sangat kaya.

Yang terpenting di awal: jangan terlalu banyak membaca tutorial sebelum praktek. Buka editor, buat project baru, dan mulai eksplorasi. Pertanyaan yang spesifik akan muncul dengan sendirinya saat sedang mengerjakan sesuatu — dan pertanyaan yang spesifik jauh lebih mudah dicari jawabannya. 🙂