Cara Membuat Aplikasi Flutter Pertama Anda

Alasan Flutter terus terpilih di proyek bisnis sederhana saja: satu tim, satu basis kode, dua aplikasi — Android dan iOS sekaligus, dengan tampilan yang identik di keduanya. Untuk banyak kebutuhan (aplikasi internal, katalog, sistem pemesanan), itu memangkas hampir separuh biaya dibanding menulis dua aplikasi native terpisah, dan itulah kenapa ia sering jadi rekomendasi kami di proyek pembuatan aplikasi. Tutorial ini untuk sisi satunya: Anda yang ingin merasakan sendiri, dari instalasi sampai aplikasi berjalan di ponsel Android sungguhan.

Yang perlu disiapkan

Komputer dengan ruang disk cukup lega (SDK dan Android toolchain memakan belasan GB), koneksi stabil untuk unduhan awal, dan satu ponsel Android dengan kabelnya — menjalankan di ponsel asli lebih ringan daripada emulator dan lebih memuaskan. Pengalaman koding membantu tapi tidak wajib untuk tutorial ini; kita bergerak pelan dan setiap langkah memperlihatkan hasil.

Langkah 1: Install Flutter SDK dan jalankan doctor

Unduh Flutter SDK dari docs.flutter.dev sesuai OS Anda (atau brew install --cask flutter di Mac), ekstrak, dan tambahkan folder flutter/bin ke PATH. Lalu jalankan perintah terpenting di seluruh ekosistem Flutter:

flutter doctor

flutter doctor memeriksa seluruh rantai alat dan — ini keistimewaannya — memberi tahu persis apa yang kurang beserta cara memperbaikinya. Untuk target Android, ikuti arahannya memasang Android Studio (yang membawa Android SDK), lalu jalankan flutter doctor --android-licenses dan setujui. Ulangi flutter doctor sampai baris Android bertanda centang. Jangan lanjut sebelum centang itu muncul; 90% frustrasi pemula Flutter adalah melewati langkah ini setengah jalan.

Langkah 2: Buat proyek dan kenali strukturnya

flutter create toko_kita
cd toko_kita

Dari puluhan file yang dibuat, yang perlu Anda pedulikan hari ini hanya satu: lib/main.dart — di sanalah seluruh kode aplikasi contoh berada. Folder android/ dan ios/ adalah cangkang platform yang jarang disentuh; pubspec.yaml adalah daftar dependensi, tempat Anda kelak menambah library. Buka proyek di VS Code (dengan extension Flutter) atau Android Studio — keduanya sama baiknya.

Langkah 3: Pahami widget lewat perubahan kecil

Satu kalimat yang merangkum cara berpikir Flutter: semuanya widget — teks adalah widget, tombol widget, tata letak widget, halaman pun widget yang menampung widget lain. Anda mendesain antarmuka dengan menyusun pohon widget di kode. Rasakan lewat praktik: buka lib/main.dart, dan pada aplikasi contoh bawaan, ubah beberapa hal — teks judul di 'Flutter Demo Home Page', warna di colorScheme, lalu cari Text( dan ganti isinya jadi nama toko Anda.

Simpan file, dan perhatikan layar: perubahan muncul seketika tanpa restart. Itu hot reload — fitur yang membuat pengembangan Flutter terasa seperti percakapan langsung dengan aplikasinya, dan alasan developer betah di dalamnya. Siklus kerjanya: ubah kode → simpan → lihat → ulangi.

Langkah 4: Jalankan di HP Android sungguhan

1. Di ponsel: buka Settings → About phone, ketuk Build number tujuh kali untuk membuka Developer options, lalu aktifkan USB debugging.
2. Sambungkan kabel, setujui dialog "Allow USB debugging" di layar ponsel.
3. Verifikasi dan jalankan:

flutter devices   # ponsel Anda harus terdaftar
flutter run

Build pertama paling lama (bersabarlah — berikutnya jauh lebih cepat), lalu aplikasi Anda menyala di ponsel di genggaman Anda. Momen itu layak dinikmati: dari nol sampai aplikasi berjalan di perangkat nyata, dalam satu sesi. Hot reload tetap bekerja selama kabel tersambung — ubah kode di laptop, lihat hasilnya di ponsel.

Dari template ke aplikasi nyata: peta belajarnya

Urutan belajar yang efisien setelah hari ini: layout dasar (Column, Row, Container, ListView — 80% tampilan tersusun dari empat ini), navigasi antar halaman, state management dimulai dari setState bawaan (jangan lompat ke library sebelum yang bawaan terasa sempit), lalu mengambil data dari API — di titik mana tutorial REST API dengan FastAPI kami menjadi pasangan latihannya yang alami. Dokumentasi resmi Flutter termasuk yang terbaik di industri; codelab "first Flutter app" adalah kelanjutan resmi dari tutorial ini.

Dan penilaian jujur untuk konteks bisnis: menyelesaikan tutorial ini artinya Anda paham rasa pengembangan mobile — itu bekal bagus untuk memimpin atau memesan proyek. Jarak dari sini ke aplikasi produksi (autentikasi, database, push notification, rilis ke Play Store dan App Store, perawatan versi OS baru) adalah berbulan-bulan jam terbang. Kalau kebutuhan bisnisnya sudah menunggu, jalur cepatnya adalah tim yang sudah melewati jam terbang itu — 50+ proyek kami sebagiannya persis aplikasi semacam ini. Ceritakan aplikasi yang Anda bayangkan.