Belajar Flutter dari Awal: Pengenalan Flutter & Persiapan Lingkungan (Part 1)

Rifqi An Rifqi An
•
Februari 22, 2026

Halo, para calon developer kece!

Selamat datang di seri tutorial Belajar Flutter dari Awal (Part 1)! Siap-siap, karena kita akan menyelami dunia ngoding yang seru dan (terkadang) bikin sakit kepala tapi nagih ini. Di bagian pertama ini, kita akan kenalan dulu sama Flutter dan menyiapkan "medan perang" kita biar siap tempur.

Daftar Isi

Pengenalan Flutter: Si Ganteng dari Google

Oke, mari kita mulai dengan pertanyaan paling fundamental: "Apaan sih Flutter itu?"

Gini, guys. Bayangin kamu mau bikin aplikasi yang bisa jalan di Android, iOS, web, bahkan desktop, tapi males banget kalo harus ngoding berkali-kali pake bahasa dan framework yang beda-beda. Nah, di sinilah Flutter nongol sebagai pahlawan bertopeng! Flutter itu UI toolkit dari Google yang open source, berfungsi buat bikin aplikasi multi-platform dari satu codebase aja. Alias, ngoding sekali, jalan di mana-mana!

Dengan Flutter, kamu bisa bikin aplikasi yang tampilannya cantik dan performanya ngebut, nyaris kayak aplikasi native. Jadi, nggak perlu lagi deh mikirin gimana cara bikin tombol yang sama persis di Android dan iOS. Flutter yang ngurusin!

Kenapa Harus Flutter? (Emang Ada Apa Sih?)

Mungkin kamu mikir, "Emang cuma Flutter doang yang bisa begitu? Yang lain gimana?" Eits, memang banyak pilihan lain, tapi Flutter punya beberapa kelebihan yang bikin dia jadi idola banyak developer, terutama yang baru mulai:

  • Cross-platform Sejati: Ini poin utamanya. Kamu cuma perlu satu codebase (kumpulan kode program) untuk bikin aplikasi Android, iOS, web, dan desktop. Hemat waktu, hemat tenaga, hemat biaya ngopi karena nggak perlu lembur berkali-kali!
  • Hot Reload & Hot Restart: Nah, ini nih fitur kesayangan para developer! Kalau lagi ngoding, kadang kita cuma ganti sedikit kode, terus pengen liat hasilnya langsung. Dengan Hot Reload, kamu tinggal pencet tombol, dan perubahanmu langsung muncul di emulator atau device tanpa perlu kompilasi ulang dari awal. Ini bener-bener life saver banget, ngurangin drama nungguin aplikasi di-build.
  • UI Cantik dan Fleksibel: Flutter itu punya "jeroan" sendiri buat nge-render UI (tampilan antarmuka), jadi nggak bergantung sama komponen UI bawaan OS. Artinya, kamu bisa bikin desain yang super unik dan konsisten di semua platform. Dari Material Design-nya Android sampai Cupertino-nya iOS, semua bisa di-custom sesuka hati.
  • Performa Nendang: Aplikasi Flutter dikompilasi ke kode native, jadi performanya nggak kalah sama aplikasi yang dibikin pake bahasa native kayak Kotlin atau Swift. Nggak ada deh cerita aplikasi jadi lemot atau patah-patah!
  • Komunitas Ramah & Dokumentasi Lengkap: Kalau kamu stuck atau nemu bug aneh, jangan khawatir! Komunitas Flutter itu besar banget dan sangat suportif. Plus, dokumentasi resminya juga super lengkap dan mudah dipahami. Jadi, banyak banget "teman" yang siap bantu.

Gimana, makin tertarik kan sama si Flutter ini?

Persiapan Lingkungan Ngoding (Setup Environment): Yuk Kita Mulai!

Oke, cukup basa-basinya! Sekarang saatnya kita serius (tapi santai) buat menyiapkan lingkungan ngoding kita. Anggap aja ini lagi nyiapin meja belajar sebelum ujian, harus rapi dan lengkap!

Instalasi Flutter SDK: Otak Utamanya!

Ini adalah langkah paling krusial. Flutter SDK (Software Development Kit) itu ibarat otaknya si Flutter. Tanpa ini, nggak ada ngoding Flutter!

  1. Download Flutter SDK: Kunjungi situs resmi Flutter di flutter.dev/docs/get-started/install. Pilih sesuai sistem operasi kamu (Windows, macOS, Linux). Biasanya sih, kamu bakal ngunduh file ZIP.
  2. Ekstrak File: Setelah diunduh, ekstrak file ZIP tersebut ke lokasi yang mudah diakses. PENTING: Pastikan path-nya nggak mengandung spasi atau karakter aneh, ya. Contoh: C:\src\flutter (untuk Windows) atau ~/development/flutter (untuk macOS/Linux). Hindari folder kayak C:\Program Files\Flutter karena spasi di "Program Files" bisa bikin drama.
  3. Tambahkan ke PATH Lingkungan (Environment Variables): Ini biar kamu bisa ngejalanin perintah flutter dari terminal manapun. Caranya beda-beda tiap OS. Kalo di Windows, kamu bisa cari "Edit the system environment variables", lalu di bagian "Path", tambahkan path folder bin yang ada di dalam folder Flutter SDK yang tadi kamu ekstrak (contoh: C:\src\flutter\bin). Kalo di macOS/Linux, biasanya diedit di file .bashrc, .zshrc, atau .profile. Jangan panik kalo bingung, banyak banget tutorial di Google kok! Cari aja "how to add flutter to path [sistem operasi kamu]".

Setelah selesai, buka terminal/CMD/PowerShell baru dan coba jalankan perintah ini:

flutter --version

Kalau output-nya muncul informasi versi Flutter, berarti kamu udah sukses di langkah ini! Keren!

Setup Editor Kesayangan (VS Code): Teman Setia Kita

Kita butuh editor kode yang nyaman buat ngoding. Rekomendasi paling kuat dari kami adalah Visual Studio Code (VS Code). Ringan, cepat, dan banyak ekstensi yang ngebantu banget.

  1. Instal VS Code: Kalau kamu belum punya, unduh dan instal VS Code dari code.visualstudio.com.
  2. Instal Ekstensi Flutter & Dart: Buka VS Code, lalu masuk ke bagian Extensions (biasanya ikon kotak di sidebar kiri, atau tekan Ctrl+Shift+X). Cari dan instal ekstensi bernama "Flutter" dan "Dart". Ekstensi Flutter biasanya akan otomatis menginstal Dart. Kedua ekstensi ini akan memberikan fitur-fitur keren seperti code completion, debugging, dan syntax highlighting khusus Flutter/Dart. Ini wajib hukumnya biar ngoding makin lancar jaya!

Dengan VS Code, kamu serasa punya asisten pribadi yang siap membantu dari auto-complete sampai refactoring.

Instalasi Android Studio (Buat Emulator Aja, Gan!)

"Lho, kan tadi pake VS Code, kenapa instal Android Studio lagi?" Tenang, ini bukan berarti kita bakal ngoding di Android Studio kok (meskipun bisa juga). Kita cuma butuh beberapa komponen penting dari Android Studio, terutama emulator Android dan Android SDK Command-line Tools.

  1. Download dan Instal Android Studio: Unduh dari developer.android.com/studio dan ikuti proses instalasinya. Agak gede filenya, jadi siapin kuota dan waktu ngopi yang cukup, ya.
  2. Instal Android SDK Command-line Tools: Setelah Android Studio terinstal, buka dan masuk ke SDK Manager (biasanya ada di menu File > Settings > Appearance & Behavior > System Settings > Android SDK). Di tab "SDK Tools", centang "Android SDK Command-line Tools" dan beberapa SDK Platform (misalnya versi terbaru Android). Klik "Apply" untuk menginstal.
  3. Buat Android Virtual Device (AVD / Emulator): Ini penting biar kamu bisa ngetes aplikasi Flutter-mu di perangkat Android virtual tanpa perlu punya HP fisik. Di Android Studio, masuk ke AVD Manager (biasanya ada di menu Tools > AVD Manager). Klik "Create Virtual Device..." dan ikuti petunjuknya untuk membuat emulator. Pilih device definition (misal: Pixel 4) dan system image (versi Android). Setelah jadi, kamu bisa langsung ngejalanin emulator dari AVD Manager ini.

Kalo kamu pakai macOS dan ingin ngetes di iOS, kamu juga perlu menginstal Xcode dari App Store. Tapi untuk saat ini, Android emulator sudah cukup banget kok!

Verifikasi Instalasi: Uji Coba Pertama

Oke, semua udah terpasang. Sekarang waktunya ngecek, apakah semua perangkat tempur kita sudah siap dan nggak ada yang ketinggalan. Di terminal atau CMD, jalankan perintah sakti mandraguna ini:

flutter doctor

Perintah ini akan ngecek instalasi Flutter kamu dan ngasih tau komponen apa aja yang udah terinstal dan yang masih kurang. Output-nya kira-kira kayak gini (punya kamu mungkin ada tanda seru atau silang di beberapa tempat, itu normal kok di awal):

[✓] Flutter (Channel stable, 3.x.x, on Windows 10.x.x 19044.x, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.x.x)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.x.x)
[✓] Android Studio (version 2022.x.x.x)
[✓] VS Code (version 1.x.x)
[✓] Connected device (2 available)
    • Windows (mobile) • windows • microsoft • Windows (desktop)
    • Chrome (web)     • chrome    • google    • web

✓ No issues found!

Kalau ada tanda seru (!) atau silang (X), jangan panik! Biasanya flutter doctor akan ngasih tau juga perintah apa yang harus kamu jalanin buat benerin masalahnya. Ikuti aja instruksinya. Contoh paling sering adalah belum setuju lisensi Android, tinggal jalanin flutter doctor --android-licenses.

Jika semua sudah centang hijau (atau setidaknya tidak ada yang critical dan sudah bisa run di Android/Web), berarti kamu siap tempur! Selamat, kamu sudah melewati fase terberatnya!

Latihan: Ngoding Pertama (Tapi Bo'ong)

Oke, biar nggak cuma baca doang, yuk kita "ngoding" sedikit. Walaupun belum bikin aplikasi yang heboh, setidaknya kita cobain bikin proyek Flutter pertama kita. Bayangkan kamu adalah agen rahasia yang ditugaskan membuat aplikasi kalkulator sederhana untuk menghitung berapa banyak cangkir kopi yang sudah kamu habiskan selama ngoding semalam suntuk.

  1. Buat Proyek Baru: Buka terminal atau CMD kamu, navigasi ke folder di mana kamu mau menyimpan proyekmu (misal: C:\Users\username\Documents\FlutterProjects), lalu jalankan perintah ini: 
    flutter create my_kopi_calculator
    Ini akan membuat folder baru bernama my_kopi_calculator yang isinya proyek Flutter standar.
  2. Masuk ke Folder Proyek: 
    cd my_kopi_calculator
  3. Jalankan Aplikasi Pertamamu: Pastikan emulator Androidmu sudah nyala (atau sambungkan HP fisikmu ke komputer). Lalu, jalankan perintah ini: 
    flutter run
    Atau kalau mau lebih cepat ke web: 
    flutter run -d web

Tunggu sebentar sampai proses build selesai (ini bakal agak lama di awal, maklum, belum Hot Reload). Jika berhasil, kamu akan melihat aplikasi demo Flutter dengan tombol "plus" di tengah. Selamat! Kamu baru saja ngejalanin aplikasi Flutter pertamamu!

Rasakan sensasi kesuksesan ini. Ini adalah langkah awal menuju petualanganmu sebagai developer Flutter yang handal. Di bagian selanjutnya, kita akan mulai menyelami bahasa Dart dan struktur dasar proyek Flutter. Siap-siap, karena ini baru pemanasan!

Sampai jumpa di Part 2! Jangan lupa ngopi dan jangan lupa bahagia!

Bagikan Artikel Ini