Bab 1 — Pengantar Flutter & Dart

Sebelum menulis satu baris kode pun, ada baiknya kamu tahu benda apa yang sedang kamu pegang. Banyak orang belajar Flutter dengan cara meniru tutorial, lalu bingung ketika sesuatu tidak berjalan — karena mereka tidak pernah tahu apa yang sebenarnya terjadi ketika mengetik flutter run. Bab ini menutup lubang itu.

Flutter sebenarnya dua benda sekaligus

Ketika orang mengucapkan "Flutter", mereka biasanya mencampur dua hal yang berbeda menjadi satu kata.

Yang pertama, Flutter adalah UI framework. Ini kumpulan paket kode berisi komponen siap pakai — tombol, teks, kotak, daftar bergulir — yang kamu susun untuk membentuk antarmuka. Kamu tidak menggambar tombol dari nol; kamu memakai ElevatedButton yang sudah disediakan, lalu mengonfigurasinya sesuai kebutuhan.

Yang kedua, Flutter adalah kumpulan perkakas. Ada flutter CLI, ada compiler, ada emulator manager, ada DevTools. Perkakas inilah yang mengubah kode Dart kamu menjadi aplikasi yang benar-benar bisa dipasang di ponsel Android, iPhone, atau dijalankan di peramban.

Framework saja tidak cukup, karena kode kamu perlu diterjemahkan ke bentuk yang dimengerti tiap platform. Perkakas saja juga tidak cukup, karena kamu butuh bahan untuk membangun. Keduanya harus ada.

┌──────────────────────────────────────────────────────────┐
│                    KODE DART KAMU                        │
│         (widget, logika, model data, styling)            │
└────────────────────────┬─────────────────────────────────┘
                         │
        ┌────────────────┴────────────────┐
        │      FLUTTER UI FRAMEWORK       │
        │  Widget · Material · Cupertino  │
        │  Rendering · Animation · Gesture│
        └────────────────┬────────────────┘
                         │
        ┌────────────────┴────────────────┐
        │       FLUTTER TOOLING           │
        │  flutter CLI · compiler · Skia  │
        └────────────────┬────────────────┘
                         │
   ┌──────────┬──────────┼──────────┬──────────┐
   ▼          ▼          ▼          ▼          ▼
Android      iOS       Web       Windows     macOS
 (.apk)     (.ipa)    (JS/WASM)   (.exe)     (.app)

Satu basis kode, banyak platform

Inilah alasan utama orang memilih Flutter. Secara historis, membangun aplikasi untuk Android berarti belajar Kotlin atau Java; untuk iOS berarti Swift atau Objective-C. Dua tim, dua basis kode, dua sumber bug, dan dua kali biaya.

Flutter memutus lingkaran itu. Kamu menulis sekali dalam Dart, lalu mengompilasinya ke Android, iOS, web, Windows, macOS, dan Linux.

Yang membuat Flutter berbeda dari solusi lintas platform lain adalah caranya menggambar. Flutter tidak meminjam komponen bawaan sistem operasi. Ia membawa mesin renderingnya sendiri dan melukis setiap piksel di atas kanvas kosong. Konsekuensinya penting untuk kamu pahami sejak awal:

• Aplikasimu tampak identik di Android dan iOS, karena keduanya digambar oleh mesin yang sama. Ini keunggulan sekaligus jebakan — pengguna iOS mungkin merasa aplikasimu "tidak terasa seperti iPhone" kalau kamu tidak sengaja menyesuaikannya.
• Kamu tidak terikat pada keterbatasan komponen bawaan sistem. Mau tombol berbentuk bintang dengan gradasi berputar? Bisa.
• Pembaruan Flutter tidak menunggu pembaruan sistem operasi. Widget baru langsung tersedia begitu kamu memperbarui SDK.

Kenapa Dart, bukan JavaScript

Flutter memakai Dart, bahasa buatan Google. Pilihan ini sering dipertanyakan, tetapi alasannya cukup teknis dan masuk akal.

Dart bisa dikompilasi dengan dua cara berbeda, dan Flutter memanfaatkan keduanya pada waktu yang berbeda:

JIT — Just In Time, dipakai saat pengembangan. Kode dikompilasi saat dibutuhkan, sehingga kamu bisa mengubah warna tombol lalu menekan simpan, dan perubahan tampak di layar dalam waktu di bawah satu detik tanpa kehilangan state aplikasi. Inilah yang disebut hot reload, dan ini adalah fitur yang paling akan kamu rindukan kalau suatu saat pindah ke framework lain.

AOT — Ahead Of Time, dipakai saat rilis. Seluruh kode dikompilasi menjadi kode mesin asli sebelum aplikasi dipaketkan. Hasilnya aplikasi yang cepat, tanpa perantara penerjemah saat berjalan.

PENGEMBANGAN                          PRODUKSI
─────────────────────────             ─────────────────────────
   Kode Dart                             Kode Dart
       │                                     │
       ▼ JIT (cepat dikompilasi)             ▼ AOT (dioptimalkan)
   Dart VM                               Kode mesin ARM/x64
       │                                     │
       ▼                                     ▼
   Hot reload < 1 detik                  Aplikasi cepat & mandiri
   State tetap terjaga                   Tanpa VM saat runtime

Selain itu Dart adalah bahasa bertipe kuat dengan null safety. Compiler menolak menjalankan kode yang berpotensi mengakses nilai kosong, sehingga kelas bug paling umum di aplikasi mobile — crash karena null — sebagian besar tertangkap sebelum aplikasimu sampai ke pengguna.

Menyiapkan lingkungan kerja

Ada empat hal yang perlu terpasang, apa pun sistem operasimu:

1. Flutter SDK — berisi CLI, framework, dan Dart SDK sekaligus.
2. Editor kode — Visual Studio Code atau Android Studio.
3. Toolchain platform — Android Studio untuk Android, Xcode untuk iOS (khusus macOS).
4. Perangkat uji — emulator, simulator, atau ponsel fisik.

Windows

Unduh Flutter SDK dalam bentuk arsip zip, lalu ekstrak ke lokasi yang tidak mengandung spasi dan tidak butuh hak administrator. Contoh yang baik: C:\src\flutter. Contoh yang buruk: C:\Program Files\flutter — spasi dan proteksi izin di situ akan menyusahkanmu nanti.

Setelah itu tambahkan C:\src\flutter\bin ke variabel lingkungan Path. Buka Edit environment variables for your account, pilih Path, klik New, dan masukkan jalur tersebut. Tutup semua terminal yang terbuka, lalu buka yang baru — perubahan Path tidak berlaku di terminal yang sudah berjalan.

Berikutnya pasang Android Studio. Kamu tidak wajib memakainya sebagai editor, tetapi kamu butuh Android SDK, platform tools, dan emulator yang disertakan di dalamnya. Setelah terpasang, buka SDK Manager dan pastikan "Android SDK Command-line Tools" ikut tercentang — ini sering terlewat dan menjadi penyebab flutter doctor mengeluh.

macOS

Cara termudah adalah lewat Homebrew:

brew install --cask flutter

Untuk membangun aplikasi iOS, pasang Xcode dari App Store, lalu setujui lisensinya dan pasang komponen tambahannya:

sudo xcodebuild -license accept
sudo xcode-select --install

Kalau kamu memakai Mac dengan chip Apple Silicon, pasang juga Rosetta agar beberapa perkakas iOS berjalan mulus:

sudo softwareupdate --install-rosetta --agree-to-license

Memastikan semuanya sehat

Apa pun sistem operasimu, satu perintah ini adalah pemeriksa kesehatan resmi:

flutter doctor

Keluarannya kira-kira seperti ini:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on Microsoft Windows)
[✓] Windows Version
[✓] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps
[✓] Android Studio (version 2024.x)
[✓] VS Code (version 1.9x)
[✓] Connected device (3 available)
[✓] Network resources

Centang hijau berarti aman. Tanda silang merah berarti ada yang harus diselesaikan — dan pesan di bawahnya biasanya sudah memberi tahu persis apa yang kurang. Jangan lanjut sebelum ini bersih; belajar sambil melawan lingkungan yang belum siap adalah cara tercepat untuk frustrasi.

Satu masalah yang hampir pasti kamu temui pertama kali adalah lisensi Android yang belum disetujui. Perbaikannya satu baris:

flutter doctor --android-licenses

Tekan y untuk setiap pertanyaan yang muncul.

Ekstensi editor

Di VS Code, pasang dua ekstensi: Flutter dan Dart (biasanya Dart ikut otomatis ketika kamu memasang Flutter). Keduanya memberi kamu hot reload lewat tombol, autocomplete, format otomatis, dan pintasan refactor yang akan sangat sering kamu pakai.

Membuat proyek pertama

flutter create belajar_flutter
cd belajar_flutter
flutter run

Ada satu aturan penamaan yang perlu diingat: nama proyek harus memakai snake_case — huruf kecil dengan garis bawah. Tidak boleh ada spasi, tanda hubung, atau huruf kapital. belajar_flutter benar, Belajar Flutter dan belajar-flutter akan ditolak.

Perintah flutter run akan mencari perangkat yang tersedia. Kalau ada lebih dari satu, kamu akan diminta memilih. Untuk melihat daftarnya lebih dulu:

flutter devices

Setelah aplikasi berjalan, terminal tetap aktif dan menerima perintah singkat:

Tombol	Fungsi
r	Hot reload — terapkan perubahan, pertahankan state
R	Hot restart — jalankan ulang aplikasi dari awal
p	Tampilkan garis bantu layout di layar
o	Bertukar antara tampilan Android dan iOS
q	Keluar

Anatomi proyek yang baru dibuat

flutter create menghasilkan cukup banyak berkas. Sebagian besar tidak perlu kamu sentuh untuk waktu yang lama.

belajar_flutter/
├── android/              ← proyek Android asli (Gradle, manifest, ikon)
├── ios/                  ← proyek iOS asli (Xcode, Info.plist)
├── web/                  ← titik masuk web
├── windows/ macos/ linux/← proyek desktop
├── lib/                  ← ★ DI SINI KAMU BEKERJA
│   └── main.dart         ← titik masuk aplikasi
├── test/                 ← berkas pengujian
├── assets/               ← (kamu buat sendiri) gambar, font, JSON
├── pubspec.yaml          ← ★ daftar dependensi & aset
├── pubspec.lock          ← versi persis yang terpasang (jangan diedit manual)
└── analysis_options.yaml ← aturan linter

Dua yang bertanda bintang adalah yang benar-benar penting:

lib/ adalah rumah seluruh kode Dart kamu. Semua widget, model, layanan, dan logika ada di sini. Awalnya hanya ada main.dart, tetapi seiring proyek tumbuh kamu akan memecahnya menjadi banyak berkas dan subfolder.

pubspec.yaml adalah tempat kamu mendaftarkan paket pihak ketiga dan aset. Formatnya YAML, yang berarti indentasi menentukan makna — salah satu spasi bisa membuat seluruh berkas tidak valid.

Folder android/, ios/, dan seterusnya berisi proyek asli tiap platform. Kamu baru akan menyentuhnya ketika mengubah nama aplikasi, ikon, izin, atau menambahkan konfigurasi khusus seperti kunci API Google Maps.

Aplikasi terkecil yang bisa berjalan

Berkas main.dart bawaan cukup panjang dan penuh komentar. Mari kita ganti dengan versi paling sederhana yang masih bermakna, supaya jelas bagian mana yang benar-benar wajib.

// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const AplikasiSaya());
}

class AplikasiSaya extends StatelessWidget {
  const AplikasiSaya({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Belajar Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const HalamanUtama(),
    );
  }
}

class HalamanUtama extends StatelessWidget {
  const HalamanUtama({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halo Flutter'),
      ),
      body: const Center(
        child: Text(
          'Aplikasi pertamamu berjalan.',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

Mari bedah baris per baris, karena hampir setiap aplikasi Flutter yang akan kamu tulis dimulai dari kerangka yang sama.

import 'package:flutter/material.dart'; — mengambil seluruh pustaka Material Design. Satu baris ini memberimu akses ke ratusan widget: MaterialApp, Scaffold, AppBar, Text, Center, dan seterusnya. Tanpa baris ini, tidak ada satu pun nama itu yang dikenali.

void main() — titik masuk setiap program Dart. Ketika aplikasi diluncurkan, fungsi inilah yang dipanggil pertama kali.

runApp(...) — fungsi dari Flutter yang mengambil sebuah widget dan menjadikannya akar dari seluruh antarmuka. Widget yang kamu berikan di sini akan memenuhi seluruh layar.

class AplikasiSaya extends StatelessWidget — widget buatanmu sendiri. StatelessWidget berarti widget ini tidak menyimpan data yang berubah-ubah; tampilannya sepenuhnya ditentukan oleh konfigurasi yang diberikan padanya.

const AplikasiSaya({super.key}) — konstruktor. Kata kunci const memungkinkan Flutter menandai widget ini sebagai tidak berubah sehingga bisa digunakan ulang tanpa dibangun ulang. super.key meneruskan parameter key ke kelas induk; kegunaannya dibahas tuntas di Bab 12.

Widget build(BuildContext context) — metode yang wajib ada. Flutter memanggilnya setiap kali perlu menggambar widget ini, dan kamu mengembalikan susunan widget yang menggambarkan tampilannya.

MaterialApp — widget pembungkus yang menyediakan tema, navigasi, dan lokalisasi untuk seluruh aplikasi. Hampir selalu menjadi widget terluar.

Scaffold — kerangka satu halaman Material: menyediakan slot untuk app bar, body, floating action button, drawer, dan bottom navigation. Tanpa Scaffold, teks akan menempel di pojok kiri atas layar tanpa latar belakang.

Sekilas Material Design

MaterialApp, Scaffold, dan AppBar semuanya berasal dari Material Design — sistem desain buatan Google yang menetapkan bagaimana tombol, kartu, bayangan, jarak, dan warna seharusnya berperilaku.

Memakainya memberi kamu dua keuntungan langsung. Pertama, aplikasimu langsung terlihat rapi tanpa kamu harus menjadi desainer. Kedua, perilaku interaksi — efek riak saat tombol ditekan, animasi transisi halaman, cara snackbar muncul — sudah benar sejak awal.

Flutter juga menyediakan Cupertino, padanan Material yang meniru gaya iOS. Kamu bisa mencampur keduanya, dan di Bab 10 kamu akan belajar membangun widget adaptif yang memilih gaya sesuai platform.

Versi terbaru sistem ini adalah Material 3, yang kamu aktifkan lewat useMaterial3: true. Perbedaan paling terasa ada pada warna: alih-alih memilih belasan warna satu per satu, kamu cukup memberi satu warna benih dan Flutter menurunkan seluruh palet yang harmonis darinya.

theme: ThemeData(
  // Satu warna benih → seluruh palet aplikasi
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  useMaterial3: true,
),

Pembahasan tuntas soal tema ada di Bab 9.

Merasakan hot reload

Ini latihan kecil, tetapi kerjakan sungguh-sungguh karena inilah ritme kerja harianmu nanti.

Dengan aplikasi masih berjalan, ubah teks di HalamanUtama:

body: const Center(
  child: Text(
    'Perubahan ini muncul tanpa restart.',
    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  ),
),

Simpan berkasnya. Dalam waktu kurang dari satu detik, layar berubah — dan aplikasi tidak dimulai ulang. Kalau kamu sedang berada di halaman kelima sebuah alur pendaftaran, kamu tetap di halaman kelima.

Ada situasi ketika hot reload tidak cukup dan kamu butuh hot restart (R): ketika kamu mengubah main(), mengubah state awal, atau mengubah tipe sebuah widget dari stateless menjadi stateful. Kalau perubahanmu tidak muncul, coba hot restart sebelum mencurigai kodemu salah.

Ikhtisar

• Flutter adalah gabungan UI framework (kumpulan widget siap pakai) dan perkakas (CLI, compiler, DevTools). Keduanya diperlukan.
• Flutter menggambar setiap piksel dengan mesin renderingnya sendiri, bukan meminjam komponen sistem operasi — sehingga tampilannya konsisten di semua platform dan tidak terbatas oleh komponen bawaan.
• Dart dipilih karena mendukung JIT untuk hot reload saat pengembangan dan AOT untuk performa saat rilis, serta punya null safety yang menangkap banyak bug sebelum aplikasi sampai ke pengguna.
• flutter doctor adalah pemeriksa kesehatan lingkungan. Selesaikan semua tanda silang merah sebelum melangkah.
• Nama proyek harus snake_case — tanpa spasi, tanda hubung, atau huruf besar.
• Dari seluruh berkas hasil flutter create, yang benar-benar penting di awal hanya lib/ (tempat kodemu) dan pubspec.yaml (dependensi & aset).
• Kerangka minimal setiap aplikasi: main() → runApp() → MaterialApp → Scaffold.
• r untuk hot reload (state terjaga), R untuk hot restart (state direset). Kalau perubahan tidak muncul, coba R sebelum panik.

---

Berikutnya: Bab 2 — Dart Esensial untuk Flutter, tempat kita membedah bahasa yang akan kamu pakai setiap hari.

Transkrip asli

Materi bab ini disintesis dari 1_flutter_core/1_Introduction.md, 1_flutter_core/2_basics.md, dan 1_flutter_zero-to-hero/1_key-concepts.md. Versi lengkapnya tersedia di PDF Flutter Core dan PDF Zero to Hero.