Ahmad Saifullah

Flutter #10: Validasi Form & SnackBar Feedback

2026-08-12T00:00:00+00:00

Kemarin kita udah bikin Form + TextFormField dan sempat menyinggung validator. Tapi validasi yang bener itu bukan cuma “field nggak boleh kosong”. User itu kreatif — mereka bakal masukin email tanpa @, password cuma 3 huruf, atau konfirmasi password yang beda sama password aslinya. Tugas kamu: jangan percaya input user sampai lolos validasi, dan kasih feedback yang jelas kalau ada yang salah.

Hari ini kita bongkar tuntas validasi form + cara ngasih feedback lewat SnackBar yang user-friendly.

1. Cara Kerja `validator`

Di TextFormField, ada parameter validator yang berbentuk function:

validator: (value) {
  if (value == null || value.trim().isEmpty) {
    return 'Nggak boleh kosong!';
  }
  return null; // ⬅️ null = VALID, nggak ada error
}

Aturan emas validator:

Return null → field dianggap valid (nggak ada pesan error).
Return String → field dianggap invalid, string itu ditampilkan merah di bawah field.
value bisa null kalau field dikosongkan — selalu cek null dulu!

2. Kumpulan Validator yang Wajib Kamu Punya

Daripada nulis validasi berulang-ulang, bikin kumpulan validator reusable:

class Validators {
  // ✅ Wajib diisi
  static String? required(String? value, [String? label]) {
    if (value == null || value.trim().isEmpty) {
      return '${label ?? 'Field ini'} nggak boleh kosong!';
    }
    return null;
  }

  // ✅ Email pakai regex
  static String? email(String? value) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return 'Email nggak boleh kosong!';
    final regex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
    if (!regex.hasMatch(v)) return 'Format email nggak valid!';
    return null;
  }

  // ✅ Minimal panjang
  static String? minLength(String? value, int min, [String? label]) {
    final v = value?.trim() ?? '';
    if (v.isEmpty) return '${label ?? 'Field ini'} nggak boleh kosong!';
    if (v.length < min) return 'Minimal $min karakter!';
    return null;
  }

  // ✅ Konfirmasi password (butuh nilai field lain)
  static String? match(String? value, String other, [String? label]) {
    if (value != other) return '${label ?? 'Konfirmasi'} nggak cocok!';
    return null;
  }
}

Sekarang form kamu bersih banget:

TextFormField(
  decoration: const InputDecoration(labelText: 'Email'),
  validator: Validators.email,
),

3. `autovalidateMode` — Validasi Saat Mengetik

Default-nya, validator cuma jalan saat .validate() dipanggil (biasanya saat tombol submit ditekan). Kadang user pengen tau error-nya langsung tanpa nunggu tekan tombol. Di situlah autovalidateMode berperan:

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: Validators.email,
),

Pilihan mode:

AutovalidateMode.disabled — default, cuma validasi saat submit
AutovalidateMode.onUserInteraction — validasi tiap kali user berinteraksi (nulis/hapus) — paling recommended
AutovalidateMode.always — validasi terus-menerus, bahkan sejak pertama build

Pro tip: Jangan pakai always kecuali memang perlu. Validasi yang nyala sebelum user sempat ngetik bikin form berasa “marah-marah” ke user.

4. SnackBar — Feedback yang Elegan

Setelah validasi lolos/gagal, kasih tau user hasilnya. SnackBar adalah notifikasi kecil yang muncul di bawah layar — nggak ngeblok interaksi kayak AlertDialog.

// Sukses ✅
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('✅ Registrasi berhasil! Selamat datang!'),
    backgroundColor: Colors.green,
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    duration: const Duration(seconds: 3),
  ),
);

// Gagal ❌
ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(
    content: Text('❌ Ada field yang masih salah, cek lagi ya!'),
    backgroundColor: Colors.red,
  ),
);

Kenapa pakai ScaffoldMessenger.of(context)? Karena kalau pakai Scaffold.of(context) dan halaman sudah pindah/Scaffold udah ke-dispose, SnackBar bakal error. ScaffoldMessenger lebih aman — dia dikelola di level MaterialApp, jadi nggak keilangan referensi.

5. Contoh Lengkap: Form Registrasi dengan Validasi Kuat

Gabungin semua jadi satu form register yang “production-ready”:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: RegisterScreen()));

class RegisterScreen extends StatefulWidget {
  const RegisterScreen({super.key});
  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _formKey = GlobalKey<FormState>();
  final _emailCtrl = TextEditingController();
  final _passCtrl = TextEditingController();
  final _confirmCtrl = TextEditingController();

  @override
  void dispose() {
    _emailCtrl.dispose();
    _passCtrl.dispose();
    _confirmCtrl.dispose();
    super.dispose();
  }

  void _submit() {
    // 1️⃣ Validasi semua field
    if (!_formKey.currentState!.validate()) {
      // Feedback gagal
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('❌ Cek lagi field yang merah di atas!'),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }

    // 2️⃣ Kalau lolos, save + proses
    _formKey.currentState!.save();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('✅ Akun ${_emailCtrl.text} berhasil dibuat!'),
        backgroundColor: Colors.green,
        behavior: SnackBarBehavior.floating,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('🔐 Register')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextFormField(
                controller: _emailCtrl,
                keyboardType: TextInputType.emailAddress,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                decoration: const InputDecoration(
                  labelText: 'Email',
                  icon: Icon(Icons.email),
                  border: OutlineInputBorder(),
                ),
                validator: Validators.email,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _passCtrl,
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                  icon: Icon(Icons.lock),
                  border: OutlineInputBorder(),
                ),
                validator: (v) => Validators.minLength(v, 6, 'Password'),
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _confirmCtrl,
                obscureText: true,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                decoration: const InputDecoration(
                  labelText: 'Konfirmasi Password',
                  icon: Icon(Icons.lock_outline),
                  border: OutlineInputBorder(),
                ),
                validator: (v) =>
                    Validators.match(v, _passCtrl.text, 'Konfirmasi password'),
              ),
              const SizedBox(height: 24),
              ElevatedButton.icon(
                onPressed: _submit,
                icon: const Icon(Icons.check_circle),
                label: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 12),
                  child: Text('Daftar'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Jalankan dan coba:

Tekan “Daftar” tanpa isi apa-apa → semua field merah + SnackBar merah muncul.
Isi email abc → langsung muncul “Format email nggak valid!” saat ngetik (karena onUserInteraction).
Password 123, konfirmasi 456 → error “Konfirmasi password nggak cocok!”.
Isi semua dengan benar → SnackBar hijau “berhasil dibuat!”.

6. Styling Pesan Error

Pesan error default Flutter udah bagus, tapi kamu bisa ubah:

TextFormField(
  decoration: InputDecoration(
    labelText: 'Email',
    errorStyle: const TextStyle(color: Colors.orange, fontSize: 12),
    errorBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.orange, width: 2),
      borderRadius: BorderRadius.circular(8),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.red, width: 2),
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  validator: Validators.email,
)

errorStyle — styling teks error
errorBorder — border field saat error (nggak fokus)
focusedErrorBorder — border field saat error DAN sedang fokus

Ringkasan

validator return null (valid) atau String (pesan error)
Bikin validator reusable — jangan nulis ulang tiap form
autovalidateMode.onUserInteraction — validasi real-time tanpa bikin user kesel
SnackBar — feedback elegan, pakai ScaffoldMessenger.of(context) biar aman
Pola baku: validate() → gagal (SnackBar merah) / lolos (SnackBar hijau + proses data)

Validasi + feedback yang bener bikin aplikasimu berasa profesional dan peduli user. Ini skill yang bakal kepakai di semua project nyata — dari login sampai form checkout.

Besok kita lanjut ke Asset & Image — Gambar Lokal & Network. Siap-siap bikin tampilan makin hidup! 🎨

Coba sendiri! Bikin form login (email + password) dengan validasi lengkap dan SnackBar. Share hasilnya ke sosial media dan tag @ahsai001!

Flutter #9: Form & TextField — Input dari User

2026-08-11T00:00:00+00:00

Aplikasi yang cuma bisa tampil doang itu kayak TV tanpa remote — cuma bisa dilihat, nggak bisa diajak interaksi. Realitasnya, hampir semua aplikasi butuh input dari user: login, register, search, chat, notes, form order, dll. Di Flutter, senjata utamanya ada dua: TextField (input satuan) dan Form (kumpulan input dengan validasi).

Hari ini kita bahas cara menerima input dari user dengan benar. Mulai dari TextField sederhana sampai Form multi-field yang siap divalidasi (validasi lengkapnya besok, ya!).

1. TextField — Input Satuan

TextField adalah widget paling dasar untuk menerima teks dari user. Mirip di HTML. Contoh paling sederhana:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: InputSederhana()));

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

  @override
  State<InputSederhana> createState() => _InputSederhanaState();
}

class _InputSederhanaState extends State<InputSederhana> {
  // 🔑 Controller = jembatan antara TextField dan logic kita
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose(); // WAJIB: bersihin controller biar nggak bocor memori
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('📝 Input Sederhana')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: 'Nama kamu',
                hintText: 'Ketik di sini...',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 📍 Ambil teks dari controller
                final nama = _controller.text;
                if (nama.isNotEmpty) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Halo, $nama! 👋')),
                  );
                }
              },
              child: const Text('Sapa Aku!'),
            ),
          ],
        ),
      ),
    );
  }
}

Yang wajib kamu ingat:

TextEditingController — jembatan baca/tulis ke TextField
dispose() — selalu panggil di dispose() state, kalau nggak → memory leak
decoration — styling placeholder, label, border, icon, dll

TextField Properties yang Sering Dipakai

TextField(
  controller: _controller,
  obscureText: true,          // password mode (••••••)
  maxLines: 5,                // textarea (default 1 = single line)
  keyboardType: TextInputType.emailAddress,  // keyboard @ muncul
  textInputAction: TextInputAction.done,     // tombol "Done" di keyboard
  onChanged: (value) {        // real-time listener, setiap ketikan
    print('User mengetik: $value');
  },
  onSubmitted: (value) {     // user tekan Enter/Done
    print('User submit: $value');
  },
  decoration: const InputDecoration(
    icon: Icon(Icons.person),    // icon di kiri
    labelText: 'Email',
    hintText: 'contoh@email.com',
    helperText: 'Masukkan email aktif',
    prefixText: '@',             // teks sebelum input
    suffixIcon: Icon(Icons.check),
  ),
)

Kalau cuma satu input, TextField cukup. Tapi begitu kamu punya 3-4 field (misal: nama, email, password, alamat), lebih rapi pakai widget Form.

Form adalah container yang membungkus beberapa TextFormField (adiknya TextField). Form punya GlobalKey yang bisa kamu pakai untuk validasi, reset, atau save semua field sekaligus.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: FormRegisterScreen()));

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

  @override
  State<FormRegisterScreen> createState() => _FormRegisterScreenState();
}

class _FormRegisterScreenState extends State<FormRegisterScreen> {
  // 🔑 Kunci form — wajib untuk akses FormState
  final _formKey = GlobalKey<FormState>();

  // 🗃️ Controller buat ambil nilai user
  final _namaCtrl = TextEditingController();
  final _emailCtrl = TextEditingController();
  final _passCtrl = TextEditingController();

  @override
  void dispose() {
    _namaCtrl.dispose();
    _emailCtrl.dispose();
    _passCtrl.dispose();
    super.dispose();
  }

  void _submitForm() {
    // Cek validasi semua field dulu
    if (_formKey.currentState!.validate()) {
      // Ambil data
      final nama = _namaCtrl.text;
      final email = _emailCtrl.text;

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('✅ Akun $nama ($email) berhasil dibuat!'),
          backgroundColor: Colors.green,
        ),
      );

      // Reset form setelah submit
      _formKey.currentState!.reset();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('📋 Form Registrasi')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // === FIELD 1: NAMA ===
              TextFormField(
                controller: _namaCtrl,
                decoration: const InputDecoration(
                  labelText: 'Nama Lengkap',
                  icon: Icon(Icons.person),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '❌ Nama nggak boleh kosong!';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 16),

              // === FIELD 2: EMAIL ===
              TextFormField(
                controller: _emailCtrl,
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  labelText: 'Email',
                  icon: Icon(Icons.email),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '❌ Email nggak boleh kosong!';
                  }
                  if (!value.contains('@') || !value.contains('.')) {
                    return '❌ Format email nggak valid!';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 16),

              // === FIELD 3: PASSWORD ===
              TextFormField(
                controller: _passCtrl,
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                  icon: Icon(Icons.lock),
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '❌ Password nggak boleh kosong!';
                  }
                  if (value.length < 6) {
                    return '❌ Password minimal 6 karakter!';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 24),

              // === TOMBOL SUBMIT ===
              ElevatedButton.icon(
                onPressed: _submitForm,
                icon: const Icon(Icons.check_circle),
                label: const Text('Daftar'),
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Apa yang terjadi di kode di atas:

GlobalKey — kunci ajaib yang ngasih kamu akses .validate(), .reset(), .save() ke seluruh form
TextFormField — punya parameter validator yang nggak dimiliki TextField biasa
validator — return null kalau valid, return String error kalau invalid
.validate() — memanggil semua validator, return true hanya jika SEMUA field valid

3. TextField vs TextFormField — Kapan Pakai?

Widget	Best For
`TextField`	Input tunggal, search bar, chat input, field yang nggak perlu validasi
`TextFormField`	Di dalam `Form`, butuh `validator`, butuh validasi kolektif

Pro tip: Kalau kamu cuma punya satu field (misal: search bar), pakai TextField — lebih ringan. Kalau lebih dari satu field dan ada logic validasi (register, login, checkout), pakai Form + TextFormField — lebih rapi dan terstruktur.

4. Pola Nyata: Form Auto-Save ke State

Kadang kamu nggak langsung submit ke server. Kamu cuma simpan dulu ke state lokal:

// Di dalam State class
String _nama = '';
String _email = '';
String _password = '';

// Simpan data sebelum validasi
_formKey.currentState!.save();  // ⬅️ trigger semua onSaved callback

// Setelah save, semua variabel di atas terisi
print('Data tersimpan: $_nama, $_email');

Caranya: tiap TextFormField kasih callback onSaved:

TextFormField(
  decoration: const InputDecoration(labelText: 'Nama Lengkap'),
  validator: (v) => v!.isEmpty ? 'Wajib diisi' : null,
  onSaved: (v) => _nama = v ?? '',   // ← di sini!
)

Pola save() + validate() ini lazim di production app.

Hari ini kamu udah bisa menerima input user dengan dua cara: TextField buat simpel, Form + TextFormField buat yang butuh validasi terstruktur. Ini adalah fondasi penting karena hampir semua aplikasi nyata butuh form.

Besok kita akan lanjut ke Validasi Form & SnackBar Feedback — bagaimana kasih pesan error yang jelas dan user-friendly. Stay tuned! 🚀

Coba sendiri! Bikin form login 2 field (email + password) dengan validasi. Share hasilnya ke sosial media dan tag @ahsai001!

Flutter #8: Navigasi — Navigator.push & Named Routes

2026-08-10T00:00:00+00:00

Aplikasi yang cuma satu layar itu namanya bukan aplikasi — itu cuma gambar. Aplikasi beneran pasti punya beberapa halaman: dari halaman login ke dashboard, dari list produk ke detail, dari keranjang ke checkout. Nah, di Flutter, perpindahan antar halaman ini disebut Navigasi, dan senjatanya adalah class Navigator.

Hari ini kita bahas dua metode navigasi yang paling sering dipakai: Navigator.push (imperatif) dan Named Routes (deklaratif). Dua-duanya wajib kamu kuasai!

Flutter menggunakan konsep stack — ingat tumpukan piring. Setiap kamu “push” halaman baru, dia numpuk di atas halaman sebelumnya. Setiap “pop”, halaman paling atas dibuang dan kamu kembali ke halaman di bawahnya.

┌─────────────┐
│  Detail     │ ← push (tambah)
├─────────────┤
│  List Menu  │ ← halaman sebelumnya
├─────────────┤
│  Home       │ ← halaman awal
└─────────────┘

Sederhana, tapi powerful. Tanpa perlu bikin logic ribet, Flutter udah handle animasi transisi dan back-button Android secara otomatis.

2. Navigator.push — Cara Paling Simpel

Navigator.push menerima dua parameter: context dan MaterialPageRoute. Ini metode paling cocok buat pemula karena eksplisit.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: HomeScreen()));

// ========== HALAMAN PERTAMA ==========
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('🏠 Halaman Utama')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 🌟 NAVIGASI KE HALAMAN KEDUA
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Lihat Detail ➡️'),
        ),
      ),
    );
  }
}

// ========== HALAMAN KEDUA ==========
class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('📄 Halaman Detail')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // ⬅️ KEMBALI KE HALAMAN SEBELUMNYA
            Navigator.pop(context);
          },
          child: const Text('⬅️ Kembali'),
        ),
      ),
    );
  }
}

Penjelasan:

Navigator.push(...) → dorong halaman baru ke atas stack
MaterialPageRoute → animasi transisi sesuai platform (slide dari kanan di Android, fade di iOS)
Navigator.pop(context) → buang halaman saat ini dari stack, kembali ke sebelumnya

Pass Data Antar Halaman

Kirim data dari Home ke Detail? Gampang. Karena DetailScreen adalah constructor biasa:

// Kirim dari HomeScreen
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailScreen(nama: 'Ahmad', umur: 25),
  ),
);

// DetailScreen terima lewat constructor
class DetailScreen extends StatelessWidget {
  final String nama;
  final int umur;

  const DetailScreen({super.key, required this.nama, required this.umur});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Halo, $nama!')),
      body: Center(child: Text('Umur: $umur tahun')),
    );
  }
}

Dan kalau mau balikin data dari DetailScreen ke HomeScreen:

// Di DetailScreen, pop sambil bawa data
Navigator.pop(context, 'Data dari Detail');

// Di HomeScreen, tangkap hasilnya
final hasil = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailScreen()),
);
print('Hasil: $hasil'); // Output: Hasil: Data dari Detail

3. Named Routes — Navigasi Deklaratif

Kalau aplikasi udah punya banyak halaman, MaterialPageRoute satu-satu mulai ribet. Solusinya named routes — daftarin semua route di awal, panggil tinggal sebut nama.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Demo',
      initialRoute: '/',                        // halaman default
      routes: {
        '/': (context) => const HomeScreen(),   // ← wajib ada initialRoute
        '/detail': (context) => const DetailScreen(),
        '/profile': (context) => const ProfileScreen(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('🏠 Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/detail');  // ← by name!
              },
              child: const Text('Ke Detail ➡️'),
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
              child: const Text('Ke Profil 👤'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('📄 Detail')),
    body: Center(child: Text('Halaman Detail')),
  );
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('👤 Profil')),
    body: Center(child: Text('Halaman Profil')),
  );
}

Kelebihan Named Routes:

Semua route kelihatan di satu tempat — gampang maintenancenya
Cocok untuk aplikasi menengah-besar
Bisa pakai onGenerateRoute untuk dynamic routing (ada parameter, guard auth, dsb)

Pass Arguments dengan Named Routes

// Kirim argument
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'nama': 'Siti', 'role': 'admin'},
);

// Terima di halaman tujuan
class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, String>;
    return Scaffold(
      appBar: AppBar(title: Text('Halo, ${args['nama']}!')),
      body: Center(child: Text('Role: ${args['role']}')),
    );
  }
}

4. Catatan Penting Navigasi

Metode	Kapan Dipakai
`Navigator.push` + `MaterialPageRoute`	Aplikasi kecil (1-5 halaman), butuh pass data sederhana
Named Routes (`routes: {...}`)	Aplikasi menengah, banyak halaman static
`onGenerateRoute`	Dynamic routing, butuh auth guard, parsing URL parameter

Pro tip: Jangan kirim objek yang kompleks lewat arguments — mending kirim ID, lalu fetch datanya di halaman tujuan. Lebih bersih dan lebih aman.

5. Push vs PushNamed: Beda Tipis Tapi Penting

// IMPERATIF — kamu yang atur route-nya manual
Navigator.push(context, MaterialPageRoute(builder: (_) => TargetScreen()));

// DEKLARATIF — tinggal sebut nama, Flutter yang handle
Navigator.pushNamed(context, '/target');

Keduanya valid. Pilih yang bikin kode kamu lebih rapi dan mudah dibaca. Di proyek real, tim biasanya pakai named routes + onGenerateRoute biar scalable.

Hari ini kamu udah belajar cara berpindah halaman — skill fundamental yang ada di 100% aplikasi Flutter. Dari dua layar sederhana sampai puluhan halaman dengan auth guard, semuanya berawal dari Navigator.push dan pushNamed.

Besok kita lanjut ke Form & TextField — bagaimana menerima input dari user dengan benar. Stay tuned! 🚀

Coba sendiri! Bikin aplikasi 3 halaman dengan named routes. Share hasilnya ke sosial media dan tag @ahsai001!

Flutter #7: ListView & GridView — Bikin List Konten

2026-08-09T00:00:00+00:00

Aplikasi yang cuma satu layar statis itu ibarat warung kosong — sepi, gak ada yang bisa di-scroll. Nah, dua widget paling penting untuk bikin konten yang bisa digulir adalah ListView dan GridView. Mau bikin feed berita, daftar kontak, galeri foto, sampai katalog produk? Dua inilah senjata utamamu.

Hari ini kita akan bahas dari yang paling sederhana sampai yang performanya juara. Let’s go!

1. ListView — Raja Daftar Vertikal

ListView adalah widget untuk menampilkan daftar item yang bisa di-scroll secara vertikal (atau horizontal). Cara paling simpel:

ListView Sederhana

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: ListBasicScreen()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListView Dasar')),
      body: ListView(
        children: const [
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Budi Santoso'),
            subtitle: Text('Flutter Developer'),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Siti Aminah'),
            subtitle: Text('UI/UX Designer'),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Joko Widodo'),
            subtitle: Text('Project Manager'),
          ),
        ],
      ),
    );
  }
}

Cocok buat list yang pendek dan jumlahnya fix. Tapi kalau datanya ratusan? Jangan! Kenapa? Karena ListView(children: [...]) langsung me-render semua child widget sekaligus — memory boros, performa jeblok.

2. ListView.builder — Pahlawan Performa

Untuk data banyak (dari API, database, atau list panjang), pakai ListView.builder. Dia cuma me-render item yang terlihat di layar — mirip RecyclerView di Android.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: ListBuilderScreen()));

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

  // Simulasi data dari API
  final List<Map<String, String>> _contacts = const [
    {'name': 'Ahmad Fathan', 'role': 'Senior Flutter Dev'},
    {'name': 'Rina Marlina', 'role': 'Backend Engineer'},
    {'name': 'Doni Prasetyo', 'role': 'DevOps'},
    {'name': 'Putri Ayu', 'role': 'Product Manager'},
    {'name': 'Eko Nugroho', 'role': 'Mobile Developer'},
    {'name': 'Fitri Handayani', 'role': 'QA Engineer'},
    {'name': 'Bayu Saputra', 'role': 'Data Scientist'},
    {'name': 'Citra Lestari', 'role': 'Tech Lead'},
    {'name': 'Galih Prakoso', 'role': 'Frontend Dev'},
    {'name': 'Indah Permatasari', 'role': 'Scrum Master'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView.builder'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: _contacts.length,
        itemBuilder: (context, index) {
          final contact = _contacts[index];
          return Card(
            margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
            child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.indigo.shade100,
                child: Text(
                  contact['name']![0],
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              title: Text(contact['name']!),
              subtitle: Text(contact['role']!),
              trailing: const Icon(Icons.chevron_right),
              onTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Klik: ${contact['name']}')),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

Kunci ListView.builder

Parameter	Wajib?	Fungsi
`itemCount`	Ya (untuk fix-length)	Jumlah total item
`itemBuilder`	Ya	Callback yang dipanggil per item, nerima `(context, index)`
`itemExtent`	Tidak	Kalau semua item tingginya sama, set ini biar makin kencang
`scrollDirection`	Tidak	Default `Axis.vertical`, bisa juga `Axis.horizontal`

Pro tip: Kalau tinggi semua item seragam (misal 80px), tambahin itemExtent: 80. Flutter gak perlu ngukur tinggi satu per satu → scrolling lebih mulus.

3. ListView.separated — Tambahin Pembatas

Mau ada divider di antara item? ListView.separated jawabannya:

ListView.separated(
  itemCount: _contacts.length,
  separatorBuilder: (context, index) => const Divider(
    height: 1,
    indent: 72,  // biar rata dengan text, bukan avatar
  ),
  itemBuilder: (context, index) {
    final contact = _contacts[index];
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.indigo.shade100,
        child: Text(contact['name']![0]),
      ),
      title: Text(contact['name']!),
      subtitle: Text(contact['role']!),
    );
  },
)

separatorBuilder cuma dipanggil di antara item — bukan di awal atau akhir. Simpel tapi powerful.

4. GridView — Saat Konten Perlu Tampil “Kotak-Kotak”

Kalau kontenmu lebih cocok tampil dalam grid (galeri foto, katalog produk, menu), pakai GridView. Mirip ListView, ada beberapa varian:

GridView.count — Grid dengan Jumlah Kolom Fix

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: GridBasicScreen()));

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

  final List<Map<String, dynamic>> _products = const [
    {'icon': Icons.phone_android, 'name': 'Smartphone', 'color': Colors.blue},
    {'icon': Icons.laptop, 'name': 'Laptop', 'color': Colors.teal},
    {'icon': Icons.watch, 'name': 'Smartwatch', 'color': Colors.orange},
    {'icon': Icons.headphones, 'name': 'Headset', 'color': Colors.purple},
    {'icon': Icons.camera_alt, 'name': 'Kamera', 'color': Colors.red},
    {'icon': Icons.tablet, 'name': 'Tablet', 'color': Colors.green},
    {'icon': Icons.speaker, 'name': 'Speaker', 'color': Colors.brown},
    {'icon': Icons.keyboard, 'name': 'Keyboard', 'color': Colors.indigo},
    {'icon': Icons.mouse, 'name': 'Mouse', 'color': Colors.pink},
    {'icon': Icons.monitor, 'name': 'Monitor', 'color': Colors.cyan},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView Katalog Produk'),
        centerTitle: true,
      ),
      body: GridView.count(
        crossAxisCount: 2,           // 2 kolom
        crossAxisSpacing: 12,        // jarak horizontal antar item
        mainAxisSpacing: 12,         // jarak vertikal antar item
        padding: const EdgeInsets.all(16),
        children: _products.map((product) {
          return Card(
            elevation: 2,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: InkWell(
              borderRadius: BorderRadius.circular(16),
              onTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Kamu pilih: ${product['name']}')),
                );
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    product['icon'] as IconData,
                    size: 48,
                    color: product['color'] as Color,
                  ),
                  const SizedBox(height: 12),
                  Text(
                    product['name'] as String,
                    style: const TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

GridView.builder — Buat Data Banyak

Sama seperti ListView.builder, ada GridView.builder untuk data yang banyak:

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,       // 3 kolom
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
    childAspectRatio: 0.85,  // ratio width:height (0.85 = lebih tinggi dari lebar)
  ),
  itemCount: _products.length,
  itemBuilder: (context, index) {
    final product = _products[index];
    return Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(product['icon'] as IconData, size: 36, color: product['color'] as Color),
          const SizedBox(height: 8),
          Text(product['name'] as String, textAlign: TextAlign.center),
        ],
      ),
    );
  },
)

GridDelegate — Kunci Flexibilitas Grid

Ada dua delegate penting:

Delegate	Fungsi
`SliverGridDelegateWithFixedCrossAxisCount`	Jumlah kolom fix (2, 3, 4 kolom)
`SliverGridDelegateWithMaxCrossAxisExtent`	Lebar maksimal per item fix, jumlah kolom menyesuaikan

Contoh MaxCrossAxisExtent (responsif!):

SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 180,   // maks 180 pixel per item → di layar lebar bisa 4 kolom
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  childAspectRatio: 1.0,     // kotak sempurna
)

Ini berguna banget buat layout responsif: di HP muncul 2 kolom, di tablet 4 kolom — otomatis tanpa media query.

5. Horizontal Scroll — Bikin Carousel ala Netflix

ListView dan GridView juga bisa horizontal! Tinggal tambah scrollDirection: Axis.horizontal:

SizedBox(
  height: 180,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: _products.length,
    padding: const EdgeInsets.symmetric(horizontal: 12),
    itemBuilder: (context, index) {
      final product = _products[index];
      return Container(
        width: 140,
        margin: const EdgeInsets.only(right: 12),
        decoration: BoxDecoration(
          color: (product['color'] as Color).withOpacity(0.1),
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: product['color'] as Color, width: 2),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(product['icon'] as IconData, size: 48, color: product['color'] as Color),
            const SizedBox(height: 8),
            Text(product['name'] as String, textAlign: TextAlign.center),
          ],
        ),
      );
    },
  ),
)

Bungkus dengan SizedBox(height: ...) karena horizontal ListView butuh constraint tinggi dari parent.

6. Pull-to-Refresh — Sentuhan Akhir

Tambahkan RefreshIndicator supaya user bisa swipe-down untuk refresh:

RefreshIndicator(
  onRefresh: () async {
    // panggil API / reload data
    await Future.delayed(const Duration(seconds: 1));
  },
  child: ListView.builder(
    itemCount: _contacts.length,
    itemBuilder: (context, index) { ... },
  ),
)

7. Perbandingan Lengkap: Kapan Pakai yang Mana?

Kasus	Widget	Alasan
List pendek, fix (< 20 item)	`ListView(children: [...])`	Simpel, gak perlu builder
List panjang, banyak data	`ListView.builder`	Lazy loading, performa optimal
List dengan divider	`ListView.separated`	`separatorBuilder` built-in
Grid jumlah kolom fix	`GridView.count` / `.builder` + `FixedCrossAxisCount`	Kolom statis
Grid responsif	`.builder` + `MaxCrossAxisExtent`	Kolom menyesuaikan lebar layar
Carousel / horizontal scroll	`ListView(horizontal)` / `.builder`	Bungkus dengan `SizedBox(height)`
Galeri foto / grid padat	`GridView.builder`	Hanya render yang terlihat

8. Common Mistakes (Jangan Diulang!)

❌ ListView di dalam Column tanpa Expanded

// ERROR: ListView gak tahu tinggi maksimalnya
Column(
  children: [
    Text('Judul'),
    ListView.builder(...),  // ❌ unbounded height error!
  ],
)

// ✅ BENER: bungkus dengan Expanded
Column(
  children: [
    Text('Judul'),
    Expanded(
      child: ListView.builder(...),  // ✅ dapat constraint tinggi
    ),
  ],
)

❌ Pakai `ListView(children: [])` untuk ratusan item

Kalau datanya dari API, selalu pakai .builder. Memory dan performa kamu akan berterima kasih.

❌ Lupa `itemCount` di `ListView.builder`

Tanpa itemCount, Flutter anggap list-nya infinite. Scroll bar bisa aneh, dan kalau index out of bounds → crash.

9. Latihan Mandiri

Coba implementasikan tiga latihan ini sendiri:

Daftar kontak dari JSON: Bikin model class Contact, parse JSON lokal, tampilkan di ListView.separated dengan avatar, nama, dan nomor telepon.
Katalog produk e-commerce: GridView.builder 2 kolom dengan gambar, nama produk, harga, dan rating bintang.
Horizontal story carousel: ListView horizontal menampilkan circle avatar dengan nama di bawahnya, seperti Instagram Stories.

Penutup

Hari ini kita udah menguasai dua widget paling fundamental untuk konten scrollable: ListView dan GridView. Dari yang simpel (children: []) sampai yang performa juara (.builder), dari scroll vertikal ke horizontal, dari list ke grid responsif — semuanya udah di tangan kamu.

Materi ini bakal terus kepakai di sepanjang perjalanan Flutter kamu. Feed berita? Pakai ListView. Katalog produk? Pakai GridView. Stories? Horizontal ListView. Inbox chat? ListView lagi.

Di artikel berikutnya kita akan bahas Navigasi: pindah-pindah halaman dengan Navigator.push, named routes, dan passing data antar screen. Stay tuned!

Coba sendiri! Implementasikan tiga latihan di atas, share hasilnya ke sosial media, dan tag @ahsai001 🚀

Flutter #6: Layouting — Padding, Margin, SizedBox, Expanded & Flexible

2026-08-08T00:00:00+00:00

Kalau widget adalah bata, layouting adalah cara kita menyusun bata itu jadi rumah yang rapi. Di Flutter, urusan tata letak itu hampir semuanya pakai widget juga — dan justru di situlah kekuatannya. Nggak ada XML layout terpisah, nggak ada constraint-based layout yang bikin pusing. Semua adalah widget, semua composable.

Hari ini kita bahas lima “alat” layouting paling fundamental: Padding & Margin, SizedBox, Expanded, dan Flexible. Kuasai kelimanya, dan kamu bisa bikin layout apapun.

1. Padding & Margin — Bedanya Apa?

Di Flutter, konsep “margin” dan “padding” disatukan dalam satu widget: Padding dan properti margin pada Container. Bedanya sederhana:

Padding = ruang di dalam widget, antara border dan child
Margin = ruang di luar widget, antara widget dan parent/saudaranya

Padding dengan Widget `Padding`

Padding(
  padding: const EdgeInsets.all(16.0),
  child: Container(
    color: Colors.blue,
    child: const Text('Ada jarak 16 di semua sisi'),
  ),
)

EdgeInsets punya beberapa constructor yang berguna:

EdgeInsets.all(16)           // semua sisi 16
EdgeInsets.symmetric(        // horizontal 24, vertical 12
  horizontal: 24,
  vertical: 12,
)
EdgeInsets.only(             // hanya kiri & atas
  left: 32,
  top: 8,
)
EdgeInsets.fromLTRB(8, 16, 8, 16) // left, top, right, bottom

Margin dengan `Container`

Container(
  margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  padding: const EdgeInsets.all(12),
  color: Colors.grey[200],
  child: const Text('Margin luar 20 horizontal, padding dalam 12'),
)

Tips: Kalau cuma butuh padding tanpa dekorasi lain, pakai widget Padding langsung. Container lebih “berat” karena punya banyak properti. Untuk kasus simpel, Padding lebih ringan secara rendering.

Visualisasi Box Model

┌────────── MARGIN ──────────┐
│  ┌────── BORDER ──────┐   │
│  │  ┌── PADDING ──┐   │   │
│  │  │              │   │   │
│  │  │   CONTENT    │   │   │
│  │  │              │   │   │
│  │  └──────────────┘   │   │
│  └─────────────────────┘   │
└─────────────────────────────┘

2. SizedBox — Bikin Jarak & Ukuran Fix

SizedBox adalah widget paling sederhana untuk membuat ruang kosong dengan ukuran tertentu. Dua kegunaan utama:

Column(
  children: [
    ElevatedButton(onPressed: () {}, child: const Text('Tombol 1')),
    const SizedBox(height: 16),  // jarak vertikal 16 pixel
    ElevatedButton(onPressed: () {}, child: const Text('Tombol 2')),
  ],
)

Sebagai Fixed-Size Container

SizedBox(
  width: 200,
  height: 100,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Lebar fix 200, tinggi 100'),
  ),
)

SizedBox vs Container

Aspek	SizedBox	Container
Fungsi utama	Ukuran fix atau spacer	Multi-purpose box
Performance	Ringan	Lebih berat
Dekorasi	❌ Tidak bisa	✅ `decoration`, `borderRadius`
Transform	❌ Tidak bisa	✅ `transform`
Gunakan saat	Cuma perlu ukuran	Perlu styling (warna, border, shadow, dll)

3. Expanded — Ambil Semua Sisa Ruang

Expanded adalah widget yang mengambil semua sisa ruang dari parent Row atau Column. Ini adalah senjata utama untuk layout responsif.

Row(
  children: [
    Container(width: 80, height: 50, color: Colors.red),
    const SizedBox(width: 8),
    Expanded(
      child: Container(height: 50, color: Colors.blue),
    ),  // ← mengambil sisa lebar setelah 80+8 pixel
  ],
)

Properti `flex` — Pembagian Proporsional

Kalau ada beberapa Expanded, properti flex menentukan rasio pembagiannya:

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(height: 50, color: Colors.green),
    ),  // dapat 2/5 lebar
    SizedBox(width: 8),
    Expanded(
      flex: 3,
      child: Container(height: 50, color: Colors.orange),
    ),  // dapat 3/5 lebar
  ],
)

Total flex = 2 + 3 = 5. Hijau dapat 2/5, orange dapat 3/5.

4. Flexible — Mirip Expanded, Tapi Bisa “Ngeliat” Dulu

Flexible adalah kakak yang lebih santai dari Expanded. Bedanya:

Fitur	Expanded	Flexible
Default fit	`FlexFit.tight`	`FlexFit.loose`
Memaksa isi	Widget child mengisi SEMUA ruang	Child bebas lebih kecil dari ruang
Cocok untuk	Widget yang memang harus full-width	Widget yang punya ukuran natural

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(
        height: 50,
        color: Colors.purple,
        child: const Text('Aku Flexible — tidak harus full'),
      ),
    ),
    const SizedBox(width: 8),
    Expanded(
      flex: 1,
      child: Container(
        height: 50,
        color: Colors.teal,
        child: const Text('Aku Expanded — selalu full'),
      ),
    ),
  ],
)

Kapan Pakai Flexible vs Expanded?

Expanded: Card, button, container yang harus memenuhi sisa ruang
Flexible: Text panjang yang boleh wrap, chip/tag yang ukurannya natural
Konversi mudah: Expanded() sebenarnya sama dengan Flexible(fit: FlexFit.tight)

5. Studi Kasus: Card Profile Responsif

Mari gabungkan semuanya dalam satu contoh nyata. Buat card profile yang:

Ada avatar bulat di kiri
Nama dan bio di kanan
Responsif di berbagai ukuran layar

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(16),          // margin luar
      child: Padding(
        padding: const EdgeInsets.all(16),        // padding dalam
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Avatar — ukuran fix 60x60
            const SizedBox(
              width: 60,
              height: 60,
              child: CircleAvatar(
                radius: 30,
                backgroundImage: NetworkImage('https://i.pravatar.cc/150'),
              ),
            ),
            const SizedBox(width: 16),             // spacer
            // Info profile — ambil sisa lebar
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Ahmad Fathan',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    'Senior Flutter Developer • Iya, bikin app dari nol sampai Play Store cuma modal ngopi.',
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Jalankan:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Scaffold(body: ProfileCard())));

Hasilnya: avatar 60×60 bulat di kiri, teks fleksibel di kanan. Kalau layar kecil, teks otomatis wrap — berkat Expanded yang membatasi lebar maksimalnya.

6. Cheat Sheet Cepat

Pengen jarak antar widget?      → SizedBox(width/height: X)
Pengen padding di dalam?        → Padding(edgeInsets: ...)
Pengen margin di luar?          → Container(margin: ...)
Pengen isi sisa ruang penuh?    → Expanded(flex: ...)
Pengen isi sisa ruang fleksibel? → Flexible(flex: ...)
Pengen ukuran fix?              → SizedBox(width: X, height: Y)
Pengen ukuran fix + styling?    → Container(width: X, height: Y, decoration: ...)

7. Common Mistakes (Jangan Dilakukan!)

❌ `Expanded` di luar `Row`/`Column`/`Flex`

// ERROR: Expanded harus child langsung dari Flex widget
Scaffold(
  body: Expanded(child: ...),  // ❌ Tidak bisa!
)

❌ Lupa `crossAxisAlignment` saat pakai `Expanded`

Row(
  children: [
    SizedBox(width: 60, height: 60, child: ...),
    Expanded(
      child: Column(...),   // kalau Row, cross axis = vertical
    ),
  ],
)
// Tambahkan crossAxisAlignment: CrossAxisAlignment.start pada Row
// supaya avatar tidak stretch!

❌ `Container` banyak properti untuk hal simpel

// ❌ Berat
Container(
  margin: const EdgeInsets.only(top: 12),
  child: const Text('Halo'),
)

// ✅ Ringan
Padding(
  padding: const EdgeInsets.only(top: 12),
  child: const Text('Halo'),
)

8. Latihan Mandiri

Coba bikin layout berikut sendiri:

Card produk: Gambar produk di atas (height fix 200), judul + harga + rating di bawah (pakai Padding + SizedBox + Expanded)
Bar navigasi bawah buatan: Empat icon dalam Row, masing-masing pakai Expanded(flex: 1), biar lebar otomatis rata
Chat bubble: Pesan kiri (flexible, align kiri) dan pesan kanan (flexible, align kanan) dalam satu Column

Penutup

Lima widget ini — Padding, SizedBox, Expanded, Flexible, dan Container(margin) — adalah 90% dari pekerjaan layouting kamu sehari-hari. Begitu paham kombinasi ketiganya, bikin UI kompleks pun rasanya kayak main lego: tinggal susun, atur jarak, atur fleksibilitas, beres.

Di artikel berikutnya kita akan naik level: ListView & GridView — bikin list konten yang bisa di-scroll, mulai dari list kontak, galeri foto, sampai feed berita.

Coba sendiri! Share hasil latihan kamu ke sosial media dan tag @ahsai001 🚀

Flutter #5: StatelessWidget vs StatefulWidget & setState

2026-08-07T00:00:00+00:00

Halo, teman-teman! Setelah kemarin kita ngulik widget dasar — Text, Container, Row, Column — sekarang saatnya masuk ke konsep yang bikin aplikasi Flutter jadi hidup: State! Kamu pasti pernah liat tombol yang berubah warna pas diklik, counter yang naik angkanya, atau form yang nampilin error pas input kosong. Semua itu berkat State Management. Dan pondasi pertamanya: StatelessWidget vs StatefulWidget.

Apa Itu “State”?

Sederhananya, state adalah “keadaan saat ini” dari sebuah widget. Bayangin kamu punya lampu — state-nya bisa hidup atau mati. Begitu juga di Flutter:

Teks yang berubah setelah user ngetik → state
Counter yang bertambah setelah tombol ditekan → state
Checkbox yang dicentang → state
Halaman yang berpindah → state

Nah, Flutter membagi widget menjadi dua jenis berdasarkan apakah mereka punya state yang bisa berubah:

Tipe Widget	State Berubah?	Contoh
`StatelessWidget`	❌ Tidak	Text, Icon, Image (statis)
`StatefulWidget`	✅ Ya	Checkbox, Slider, TextField, Counter

StatelessWidget adalah widget yang gak bisa berubah setelah dibuat. Begitu dia di-build, semua propertinya final — kayak foto yang sudah dijepret.

Kapan pakai StatelessWidget? Kalau UI kamu cuma bergantung pada data yang dikasih dari luar dan gak akan berubah sendiri.

Contoh sederhana: widget ucapan selamat datang.

import 'package:flutter/material.dart';

class WelcomeCard extends StatelessWidget {
  final String username;

  const WelcomeCard({Key? key, required this.username}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      margin: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.indigo.shade50,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        children: [
          Icon(Icons.waving_hand, color: Colors.amber.shade700, size: 32),
          const SizedBox(width: 12),
          Text(
            'Halo, $username! Selamat datang kembali.',
            style: const TextStyle(fontSize: 18),
          ),
        ],
      ),
    );
  }
}

Widget ini nerima username dari constructor, lalu langsung render. Gak ada yang berubah sendiri. build() cuma dipanggil sekali saat widget dibuat.

Ciri StatelessWidget:

Cuma punya method build().
Semua data masuk lewat constructor, bersifat final.
Ringan, performanya bagus — gak ada overhead state.

Nah, kalau StatefulWidget ini widget yang state-nya bisa berubah seiring waktu. FLutter mengawinkan StatefulWidget dengan class pasangannya: State. Jadi ada dua class:

StatefulWidget — immutable, cuma bungkus, nerima data dari luar.
State — mutable, tempat logic dan data yang berubah berada.

Contoh paling klasik: counter app.

import 'package:flutter/material.dart';

class CounterScreen extends StatefulWidget {
  const CounterScreen({Key? key}) : super(key: key);

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  void _decrement() {
    setState(() {
      if (_counter > 0) _counter--;
    });
  }

  void _reset() {
    setState(() {
      _counter = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Belajar StatefulWidget'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Kamu sudah klik sebanyak:',
              style: TextStyle(fontSize: 18, color: Colors.grey.shade600),
            ),
            const SizedBox(height: 12),
            Text(
              '$_counter',
              style: const TextStyle(
                fontSize: 72,
                fontWeight: FontWeight.bold,
                color: Colors.indigo,
              ),
            ),
            const SizedBox(height: 32),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton.icon(
                  onPressed: _decrement,
                  icon: const Icon(Icons.remove),
                  label: const Text('Kurang'),
                ),
                const SizedBox(width: 16),
                ElevatedButton.icon(
                  onPressed: _increment,
                  icon: const Icon(Icons.add),
                  label: const Text('Tambah'),
                ),
              ],
            ),
            const SizedBox(height: 12),
            TextButton(
              onPressed: _counter > 0 ? _reset : null,
              child: const Text('Reset'),
            ),
          ],
        ),
      ),
    );
  }
}

Magic-nya `setState()`

setState() adalah rahasia di balik kenapa UI Flutter bisa berubah. Begitu kamu panggil:

setState(() {
  _counter++; // ubah data di sini
});

Yang terjadi:

Flutter menjalankan callback di dalam setState() — jadi _counter bertambah.
Flutter otomatis memanggil ulang build().
UI di-rebuild hanya dengan data terbaru.
Hasilnya: layar menampilkan angka counter yang baru!

Tanpa setState(), meskipun nilai _counter berubah di memori, Flutter gak akan tahu kalau UI perlu direfresh. Angka tetap seperti semula.

⚠️ Jangan taruh logic berat di dalam setState()! Isinya sebaiknya cuma assignment variabel ringan. Kalau kamu manggil API atau baca file di dalam setState(), UI bakal freeze.

Lifecycle StatefulWidget (Penting!)

StatefulWidget punya siklus hidup yang perlu kamu kenali sejak awal:

createState()    →  initState()   →  build()
                                      ↓
                              setState() → build()
                                      ↓
                              dispose()

Method	Kapan Dipanggil	Gunanya
`initState()`	Sekali, sebelum `build()` pertama	Inisialisasi data, listener, controller
`build()`	Setiap kali widget dirender	Membangun UI
`setState()`	Kamu panggil manual saat data berubah	Trigger rebuild UI
`dispose()`	Saat widget dihancurkan dari widget tree	Bersihin controller, listener, subscription

Contoh dengan initState dan dispose:

class TimerWidget extends StatefulWidget {
  const TimerWidget({Key? key}) : super(key: key);

  @override
  State<TimerWidget> createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  int _seconds = 0;

  @override
  void initState() {
    super.initState();
    // Mulai timer pas widget pertama kali dibuat
    Future.delayed(const Duration(seconds: 1), _tick);
  }

  void _tick() {
    if (!mounted) return; // cek apakah widget masih ada
    setState(() => _seconds++);
    Future.delayed(const Duration(seconds: 1), _tick);
  }

  @override
  void dispose() {
    // Gak perlu apa-apa di sini karena pakai Future, bukan Timer
    // Tapi kalau pakai Timer.periodic, wajib cancel di sini!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text('Waktu: $_seconds detik');
  }
}

Pro tip: selalu panggil super.initState() di awal dan super.dispose() di akhir.

Kapan Pakai yang Mana?

Gunakan StatelessWidget kalau:

UI cuma menampilkan data yang gak berubah (label, logo, header statis)
Widget cuma nge-wrap child tanpa logic internal

Gunakan StatefulWidget kalau:

Ada data yang bisa berubah karena interaksi user (counter, form, checkbox)
Ada animasi, timer, atau efek berbasis waktu
Widget punya lifecycle event yang perlu di-handle (initState, dispose)

Tips Biar Gak Salah Paham

Stateless ≠ gak bisa update sama sekali. Kalau parent-nya rebuild (misal lewat setState di parent), StatelessWidget juga ikut dirender ulang dengan data baru.
Minimalkan StatefulWidget. Makin banyak state, makin kompleks debugging-nya. Kalau bisa pakai Stateless, pakai aja.
setState() bukan satu-satunya cara. Nanti di artikel lanjutan kita bakal bahas Provider, BLoC, GetX — cara yang lebih scalable buat state management.

Kesimpulan

Hari ini kita belajar:

State = data yang bisa berubah di widget
StatelessWidget = widget statis, gak bisa berubah sendiri
StatefulWidget = widget dinamis, state-nya bisa diubah lewat setState()
setState() = cara Flutter untuk rebuild UI saat data berubah
Lifecycle = initState → build ↔ setState → dispose

Di artikel berikutnya, kita masuk ke Layouting: cara mengatur padding, margin, SizedBox, Expanded, dan Flexible supaya aplikasi kamu rapi di semua ukuran layar. Stay tuned!

Coba sendiri counter app di atas, tambahin fitur kayak multiply atau auto-increment, terus share ke sosial media dan tag @ahsai001! Sampai jumpa besok. Happy coding! 🚀

Flutter #4: Widget Dasar — Text, Container, Row, Column

2026-08-06T00:00:00+00:00

Halo, teman-teman! Setelah kita kenalan sama Flutter (#1), install SDK-nya (#2), dan paham struktur project (#3), sekarang saatnya masuk ke bagian paling seru: ngoding UI! Di Flutter, semuanya adalah widget. Mau bikin teks? Widget. Mau bikin kotak? Widget. Mau atur tata letak? Widget lagi. Jadi hari ini kita bahas empat widget paling fundamental yang bakal kamu pakai di setiap halaman: Text, Container, Row, dan Column.

Bayangin Flutter kayak main Lego. Satu brick kecil itu widget. Kamu gabungin brick-brick itu buat bikin layar aplikasi. Semua yang kamu lihat di Flutter — tombol, teks, gambar, spasi, scroll — semuanya widget.

Flutter punya dua pendekatan UI:

Imperatif — kayak Android XML: “bikin TextView, kasih warna, taruh di kiri atas.”
Deklaratif — Flutter style: “gambarin UI kayak gini sekarang, kalau state berubah ya gambar ulang.”

Nah, kita langsung gaspol ke empat widget paling dasar.

1. Text — Bikin Tulisan

Widget paling sederhana: Text(). Cukup kasih string, langsung muncul di layar.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('Halo, Flutter!'),
      ),
    ),
  ));
}

Segampang itu. Tapi Text punya banyak styling:

Text(
  'Belajar Flutter itu menyenangkan!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue.shade700,
    fontStyle: FontStyle.italic,
    letterSpacing: 1.2,
    height: 1.5, // line-height
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Yang perlu kamu ingat:

style pakai TextStyle — ini tempat semua properti font
textAlign buat rata kiri/kanan/tengah
maxLines + overflow berguna biar teks gak kepanjangan

Text Direction & Softwrap

Flutter otomatis softwrap teks yang panjang. Tapi kalau container-nya sempit dan gak ada scroll, teks bisa meluap (muncul garis kuning-hitam di debug mode). Solusinya: bungkus Text dengan Expanded atau Flexible kalau dia ada di dalam Row/Column.

2. Container — Kotak Serbaguna

Kalau Text itu isi, Container itu bungkusnya. Dia kotak yang bisa kamu kasih warna, padding, margin, border, shadow — kayak

-nya Flutter.

Container(
  width: 200,
  height: 150,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  decoration: BoxDecoration(
    color: Colors.teal.shade100,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: Colors.teal, width: 2),
    boxShadow: [
      BoxShadow(
        color: Colors.teal.withOpacity(0.3),
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Text('Ini dalam Container', style: TextStyle(fontSize: 18)),
)

Container properties wajib tahu:

Property	Fungsi
`width` / `height`	Ukuran kotak
`padding`	Jarak dari border ke child
`margin`	Jarak dari luar ke border
`decoration`	Warna, border, shadow (pakai `BoxDecoration`)
`child`	Widget di dalamnya

⚠️ PENTING: Jangan pakai color bareng decoration! Kalau kamu pakai decoration: BoxDecoration(...), properti color harus dimasukin ke BoxDecoration, bukan langsung ke Container. Kalau kamu tulis dua-duanya, Flutter error.

// ❌ SALAH — bakal error
Container(color: Colors.red, decoration: BoxDecoration(color: Colors.blue))

// ✅ BENAR
Container(decoration: BoxDecoration(color: Colors.blue))

3. Row & Column — Atur Tata Letak

Inilah dua widget paling dipakai buat layouting. Row menyusun child horizontal (kiri ke kanan), Column menyusun vertikal (atas ke bawah). Mirip flexbox di CSS.

Row

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star, color: Colors.amber, size: 32),
    Icon(Icons.favorite, color: Colors.red, size: 32),
    Icon(Icons.thumb_up, color: Colors.blue, size: 32),
    Icon(Icons.share, color: Colors.green, size: 32),
  ],
)

Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Nama: Ahsai', style: TextStyle(fontSize: 20)),
    SizedBox(height: 8),
    Text('Role: Flutter Developer', style: TextStyle(fontSize: 16)),
    SizedBox(height: 8),
    Text('Hobi: Ngoding & Kopi', style: TextStyle(fontSize: 16)),
  ],
)

MainAxisAlignment vs CrossAxisAlignment

Ini konsep penting banget. Gampangnya:

Main axis = arah susunan utama. Untuk Column = vertikal, untuk Row = horizontal.
Cross axis = arah yang tegak lurus. Untuk Column = horizontal, untuk Row = vertikal.

MainAxisAlignment	Efek
`start`	Rapat atas (Column) / kiri (Row)
`end`	Rapat bawah (Column) / kanan (Row)
`center`	Tengah
`spaceBetween`	Renggang, space di antara item
`spaceAround`	Space merata, setengah di ujung
`spaceEvenly`	Space benar-benar merata

Contoh Praktek: Card Profile

Gabungin semuanya jadi satu widget keren:

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Avatar
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: Colors.deepPurple,
            borderRadius: BorderRadius.circular(30),
          ),
          child: Icon(Icons.person, color: Colors.white, size: 32),
        ),
        SizedBox(width: 16),
        // Info
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Ahsai Dev',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 4),
            Text('Flutter Developer • 3 tahun'),
            SizedBox(height: 8),
            Row(
              children: [
                Icon(Icons.location_on, size: 16, color: Colors.grey),
                SizedBox(width: 4),
                Text('Jakarta, Indonesia'),
              ],
            ),
          ],
        ),
      ],
    ),
  ),
)

Outputnya: sebuah card profile dengan avatar bulat di kiri, teks dan icon di kanan — rapi, clean, dan cuma pakai Row, Column, Container, dan Text.

Tips Anti-Pusing Layouting

Mulai dari luar ke dalam — bungkus pakai Container dulu, baru isi child.
Row/Column bisa nested — jangan takut bikin Column di dalam Row atau sebaliknya.
SizedBox is your best friend — buat kasih jarak antar widget tanpa ribet ngatur margin.
Gunakan debugPaintSizeEnabled = true — aktifkan di main() buat liat garis batas setiap widget. Super membantu debugging layout!

Kesimpulan

Empat widget ini adalah fondasi dari semua UI Flutter:

Widget	Fungsi
`Text`	Menampilkan tulisan
`Container`	Kotak pembungkus dengan styling
`Row`	Susun child horizontal
`Column`	Susun child vertikal

Kuasai empat ini dulu, nanti widget lain seperti ListView, Stack, GridView bakal jauh lebih gampang dipahami. Di artikel selanjutnya, kita masuk ke State: bedanya StatelessWidget dan StatefulWidget serta magic-nya setState.

Sampai jumpa di artikel #5! Kalau ada pertanyaan, pantau terus blog ini — tiap hari ada tutorial baru. Jangan lupa share ke sosial media dan tag @ahsai001. Selamat ngoding! 🚀

Flutter #3: Struktur Project Flutter & File Penting yang Wajib Kamu Kenali

2026-08-05T00:00:00+00:00

Pengantar

Di artikel sebelumnya kita sudah berhasil install Flutter SDK dan setup IDE. Waktu kamu jalankan flutter create pertama kali, Flutter langsung menghasilkan puluhan file dan folder. Jangan panik! Hari ini kita akan membedah satu per satu — mana yang penting, mana yang bisa kamu abaikan, dan apa fungsi masing-masing.

Membuat Project Baru

Buka terminal dan jalankan:

flutter create belajar_flutter
cd belajar_flutter

Setelah perintah selesai, buka folder belajar_flutter di VS Code atau Android Studio. Kamu akan melihat struktur seperti ini:

belajar_flutter/
├── .dart_tool/
├── .idea/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── linux/
├── macos/
├── test/
│   └── widget_test.dart
├── web/
├── windows/
├── .gitignore
├── .metadata
├── analysis_options.yaml
├── pubspec.yaml
└── README.md

Folder & File Penting (Wajib Tahu)

1. `lib/main.dart` — Jantung Aplikasi

Ini adalah entry point aplikasi Flutter-mu. Setiap kali Flutter dijalankan, ia akan mencari fungsi main() di file ini. Buka main.dart, kamu akan melihat kode default:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Ingat: main() adalah fungsi pertama yang dipanggil. Tanpa main(), aplikasi gak akan jalan.

2. `pubspec.yaml` — Manager Dependencies & Aset

File YAML ini adalah pusat konfigurasi project. Di sini kamu mendaftarkan:

Dependencies (package): library dari pub.dev
Aset (gambar, font, JSON): file statis yang dipakai aplikasi
Metadata project: nama, deskripsi, versi

Contoh pubspec.yaml:

name: belajar_flutter
description: Aplikasi Flutter pertamaku
version: 1.0.0+1

environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  flutter:
    sdk: flutter
  # Tambahkan package dari pub.dev di sini
  http: ^1.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  # Daftarkan aset di sini
  assets:
    - assets/images/
    - assets/data/sample.json
  # Font custom
  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Regular.ttf

Tips: Setiap kali kamu mengubah pubspec.yaml, jalankan flutter pub get di terminal untuk mengunduh dependency baru.

3. `android/` & `ios/` — Kode Native Platform

Folder ini berisi project Android dan iOS native. Kamu gak perlu sering-sering menyentuhnya kecuali:

Konfigurasi permission (kamera, lokasi, notifikasi)
Setup Firebase (menambahkan google-services.json / GoogleService-Info.plist)
Menambahkan kemampuan platform-specific (misalnya widget native)

4. `test/widget_test.dart` — Testing

Flutter otomatis menyediakan satu file test sederhana. Ini folder tempat kamu menulis unit test dan widget test. Sangat penting saat aplikasi mulai besar — kita bahas lebih detail di artikel lanjutan.

5. `analysis_options.yaml` — Aturan Kode

File ini mengatur static analysis — semacam “linter” yang membantu kamu menulis kode Dart yang rapi dan konsisten:

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    - prefer_const_constructors
    - prefer_const_literals_to_create_immutables
    - avoid_print

Folder yang Bisa Diabaikan (Untuk Sekarang)

Folder	Fungsi	Jangan Dihapus?
`.dart_tool/`	Cache internal Dart	Jangan dihapus manual, gitignore sudah menanganinya
`.idea/`	Konfigurasi IntelliJ/Android Studio	Bisa dihapus kalau pakai VS Code
`linux/`, `macos/`, `windows/`	Platform desktop	Biarkan saja, Flutter tangani otomatis
`web/`	Konfigurasi Flutter Web	Nanti berguna kalau deploy ke web
`.metadata`	Versi Flutter yang dipakai	Jangan diubah manual

`.gitignore` — File Wajib Saat Push ke Git

File ini sudah disediakan Flutter secara otomatis. Isinya mendaftarkan file/folder yang tidak akan di-push ke GitHub:

# Contoh isi .gitignore Flutter
.dart_tool/
.packages
build/
*.iml
.idea/
.metadata

Dengan .gitignore, project kamu tetap bersih dan tidak membawa file sampah saat di-commit.

Tips Praktis

Jangan hapus pubspec.lock — file ini mencatat versi spesifik dari setiap dependency agar project tetap konsisten antar developer.
Gunakan folder lib/ untuk semua kode Dart — Flutter mencari kode di sini. Jangan taruh kode aplikasi di root folder.
Strukturkan lib/ sejak awal — walaupun masih kecil, biasakan bagi kode ke subfolder seperti screens/, widgets/, models/, services/. Nanti kita bahas arsitektur di artikel lanjutan.
Selalu jalankan flutter doctor setelah install package baru atau mengubah konfigurasi platform — untuk memastikan semuanya OK.

Penutup

Sekarang kamu sudah paham isi setiap folder dan file di project Flutter. Dengan pemahaman ini, kamu gak akan bingung lagi saat membaca tutorial atau debugging error yang menyangkut path file.

Selanjutnya: Kita akan mulai ngoding beneran — mengenal Widget Dasar: Text, Container, Row, dan Column sebagai fondasi UI Flutter!

Sampai jumpa di artikel berikutnya. Coba sendiri struktur project yang udah kita bahas, lalu share ke sosial media dan tag @ahsai001 — aku penasaran lihat progress belajarmu! 🚀

Flutter #1: Apa itu Flutter & Kenapa Harus Flutter

2026-08-04T00:00:00+00:00

Pengantar

Selamat datang di seri “Flutter dari Nol sampai Expert”! Ini adalah artikel pertama dari 90 artikel yang akan menemanimu dari benar-benar nol — bahkan belum pernah install Flutter — sampai bisa bikin aplikasi full-stack dan deploy ke production. Kenapa kita mulai dari “apa itu”? Karena sebelum nyemplung, penting buat paham big picture-nya dulu.

Apa Itu Flutter?

Flutter adalah UI toolkit open-source buatan Google untuk membangun aplikasi yang dikompilasi secara native. Satu kode, banyak platform: Android, iOS, Web, Windows, macOS, dan Linux. Flutter pertama kali dirilis tahun 2017 (versi alpha) dan sekarang sudah versi 3.x yang sangat matang.

Bahasa pemrograman yang dipakai: Dart — juga buatan Google, didesain khusus untuk UI development.

Coba lihat perbandingan sederhana ini:

// React Native (JavaScript)
<View style=>
  <Text>Halo</Text>
  <Text>Dunia</Text>
</View>

// Flutter (Dart)
Row(
  children: [
    Text('Halo'),
    Text('Dunia'),
  ],
)

Semua di Flutter adalah widget — dari Text, Container, Row, sampai Scaffold. Gak ada markup terpisah seperti XML atau HTML. Semuanya ditulis dalam Dart. Ini bikin kode lebih konsisten dan gampang dibaca.

Kenapa Harus Flutter?

1. Hot Reload — Fitur Paling Bikin Candu

Hot Reload memungkinkan kamu lihat perubahan kode dalam kurang dari 1 detik tanpa harus rebuild ulang aplikasi. Ubah warna tombol? Simpan. Langsung muncul. Ini super produktif untuk iterasi desain UI.

// Ubah warna dari biru ke ungu, Ctrl+S, boom — langsung berubah!
ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.deepPurple, // ganti ini, hot reload!
  ),
  onPressed: () {},
  child: Text('Klik Aku'),
),

2. Single Codebase, Multi-Platform

Satu project Flutter bisa kamu build jadi:

APK/AAB untuk Android
IPA untuk iOS
Web app (HTML/JS/CSS)
Desktop app (Windows, macOS, Linux)

Bukan cuma “jalan”, tapi benar-benar native performance. Flutter gak pakai bridge seperti React Native; dia render langsung ke canvas menggunakan engine Skia.

Material Design (Android-style) dan Cupertino (iOS-style) tersedia out-of-the-box. Mau tampilan yang persis native di kedua platform? Flutter bisa.

// Android-style switch
Switch(value: true, onChanged: (v) {})

// iOS-style switch
CupertinoSwitch(value: true, onChanged: (v) {})

4. Ekosistem & Komunitas Besar

pub.dev punya 40.000+ package siap pakai
Dokumentasi resmi Google sangat lengkap
Komunitas global aktif — StackOverflow, Discord, Reddit, GitHub
500.000+ apps di Google Play dibuat dengan Flutter

5. Performa Native

Flutter compile ke ARM/x86 native code (bukan interpreted). Tidak ada JavaScript bridge. Jadi performanya mendekati aplikasi native murni — 60 FPS smooth, bahkan untuk animasi kompleks.

Arsitektur Flutter (Gambaran Singkat)

┌─────────────────────────┐
│     Framework (Dart)     │  ← Kamu coding di sini
│  Material / Cupertino    │
│  Widgets / Rendering     │
├─────────────────────────┤
│     Engine (C++)         │  ← Skia, Dart VM, Text
├─────────────────────────┤
│    Embedder (Platform)   │  ← Android/iOS/Web/Desktop
└─────────────────────────┘

Gak perlu hafal sekarang — nanti di artikel-artikel selanjutnya kamu bakal paham layer demi layer.

Mitos & Fakta Flutter

Mitos	Fakta
“Flutter cuma buat Android”	Flutter support 6 platform
“Flutter lambat”	Flutter compile ke native code, 60 FPS
“Dart susah dipelajari”	Mirip Java/JavaScript/C#, 1-2 minggu udah nyaman
“Flutter gak cocok buat app besar”	Google Ads, Alibaba, BMW, Grab pakai Flutter

Siapa yang Pakai Flutter di Dunia Nyata?

Google Ads — dashboard iklan
Alibaba (Xianyu app) — 50+ juta pengguna
BMW — My BMW App
Grab — GrabMerchant, GrabFood
Tokopedia, Gojek — beberapa micro-app internal
Reflectly — journal app pemenang design award

Latihan Hari Ini

Karena ini masih artikel perkenalan, latihanmu ringan aja:

Google: Cari 3 aplikasi di Play Store yang dibuat pakai Flutter selain yang disebutkan di atas
Refleksi: Tulis di notes kenapa kamu mau belajar Flutter — apa yang pengen kamu bikin?
Install: Kalau udah gak sabaran, install Flutter SDK (step-by-step di artikel besok!)

Apa Selanjutnya?

Besok kita bakal install Flutter SDK & setup IDE — dari nol sampai project pertama berhasil jalan di emulator. Pastikan laptopmu siap: RAM minimal 8GB, storage kosong ~20GB.

🚀 Coba sendiri, share hasilnya ke sosial media! Tag @ahsai001 — siapa tahu ada yang mau belajar bareng.

Seri “Flutter dari Nol sampai Expert” — artikel ke-1

Flutter #2: Install Flutter SDK & Setup IDE (VS Code / Android Studio)

2026-08-04T00:00:00+00:00

Pengantar

Di artikel pertama kita sudah kenalan dengan Flutter dan alasan kenapa framework ini layak dipelajari. Sekarang saatnya aksi: install Flutter SDK, setup IDE, dan jalankan project pertama! Tenang, step-by-step-nya bakal gampang banget — bahkan kalau kamu belum pernah setup environment development sebelumnya.

Langkah 1: Install Flutter SDK

Windows

Download Flutter SDK dari flutter.dev
Ekstrak ZIP ke C:\src\flutter (hindari folder seperti C:\Program Files yang butuh permission khusus)
Tambahkan Flutter ke Environment Variables → Path: C:\src\flutter\bin
Buka Command Prompt atau PowerShell, jalankan:

flutter doctor

macOS

# Pakai Homebrew (paling gampang)
brew install --cask flutter

# Atau download manual dari flutter.dev

Linux

# Download & ekstrak ke ~/development/
cd ~/development
wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_latest.tar.xz
tar xf flutter_linux_latest.tar.xz

# Tambahkan ke PATH (masukkan ke ~/.bashrc atau ~/.zshrc)
export PATH="$PATH:$HOME/development/flutter/bin"

# Reload
source ~/.bashrc

PENTING: Setelah install, selalu jalankan flutter doctor — command ini akan kasih tahu apa saja yang masih kurang.

Langkah 2: Pahami Output `flutter doctor`

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x)
[✓] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device

Setiap tanda centang hijau artinya siap. Kalau ada tanda silang [✗] atau tanda seru [!], Flutter akan kasih petunjuk apa yang perlu kamu install/fix. Jangan skip ini! Banyak error di kemudian hari gara-gara flutter doctor gak bersih.

Hal yang biasanya perlu diinstall:

Item	Solusi
`[✗] Android toolchain`	Install Android Studio, lalu buka SDK Manager
`[✗] Android license`	Jalankan `flutter doctor --android-licenses`
`[!] Chrome`	Install Google Chrome (untuk web development)
`[✗] Visual Studio`	Hanya untuk Windows desktop development

Langkah 3: Setup IDE

Kamu bisa pilih VS Code (ringan, rekomendasi untuk pemula) atau Android Studio (fitur lengkap, lebih berat).

VS Code (Rekomendasi)

Install VS Code
Buka Extensions (Ctrl+Shift+X), cari dan install:
- Flutter (otomatis juga install Dart extension)

// Setelah install extension, test dengan:
// Ctrl+Shift+P → ketik "Flutter: New Project"

Android Studio

Install Android Studio
Saat setup, pastikan centang Android SDK, Android SDK Platform-Tools, dan Android Emulator
Buka SDK Manager → tab SDK Tools → centang Android SDK Command-line Tools
Install plugin Flutter: File → Settings → Plugins → cari “Flutter”

Langkah 4: Setup Emulator & Device

Opsi A: Android Emulator (Built-in)

# Di terminal, list emulator yang tersedia
flutter emulators

# Jalankan emulator tertentu
flutter emulators --launch Pixel_7_API_34

Atau lewat Android Studio: AVD Manager → Create Virtual Device → pilih device → pilih system image → Finish → Play.

Opsi B: Chrome (untuk Web)

Paling simpel: flutter run otomatis detect Chrome dan jalankan versi web.

Opsi C: Real Device (Android)

Aktifkan Developer Options di HP (Settings → About Phone → tap “Build Number” 7x)
Aktifkan USB Debugging
Colok HP ke laptop pakai kabel USB
Accept “Allow USB debugging” dialog di HP
Verify: flutter devices

Langkah 5: Buat Project Pertama & Jalankan!

# Buat project baru
flutter create nama_aplikasi_pertamamu

# Masuk ke folder project
cd nama_aplikasi_pertamamu

# Jalankan!
flutter run

Kalau berhasil, kamu akan lihat aplikasi counter default Flutter — tombol + di kanan bawah, tiap tap angka bertambah.

Struktur file yang terbentuk:

nama_aplikasi_pertamamu/
├── lib/
│   └── main.dart          ← Tempat kamu ngoding!
├── android/               ← Native Android project
├── ios/                   ← Native iOS project
├── web/                   ← Web config
├── test/                  ← Unit test
├── pubspec.yaml           ← Dependencies & asset config
└── README.md

Coba buka lib/main.dart — isinya kode Dart yang menghasilkan tampilan aplikasi counter tadi. Kita akan bahas struktur project lebih detail di artikel berikutnya.

Tips & Troubleshooting

Error: `cmdline-tools component is missing`

Jalanin: Android Studio → SDK Manager → SDK Tools → centang “Android SDK Command-line Tools” → Apply

Error: `Unable to locate Android SDK`

Pastikan ANDROID_HOME environment variable ter-set ke lokasi SDK (biasanya C:\Users\NAMA\AppData\Local\Android\Sdk di Windows, /Users/NAMA/Library/Android/sdk di macOS).

Error: Emulator gak muncul

Coba restart ADB: adb kill-server && adb start-server

Flutter gak kedetect di terminal (Windows)

Tutup dan buka ulang Command Prompt setelah set PATH. Atau restart PC.

Latihan Hari Ini

Install Flutter sampai flutter doctor minimal 4 centang hijau (Flutter, Chrome, VS Code/Android Studio, Connected device)
Buat project baru, ganti teks “You have pushed the button…” di lib/main.dart jadi kalimat versimu sendiri, lalu jalankan
Screenshot hasil flutter doctor dan aplikasi pertamamu — share ke sosial media, tag @ahsai001!

Apa Selanjutnya?

Besok kita akan bahas Struktur Project Flutter & File Penting — kamu akan paham fungsi setiap folder dan file yang digenerate oleh flutter create, termasuk pubspec.yaml, lib/, dan cara mengorganisir kode dengan benar.

🚀 Install Flutter sekarang juga! 15 menit aja udah bisa lihat aplikasi jalan. Share pengalaman pertamamu — tag @ahsai001!

Seri “Flutter dari Nol sampai Expert” — artikel ke-2

Ahmad Saifullah

Flutter #10: Validasi Form & SnackBar Feedback

1. Cara Kerja validator

2. Kumpulan Validator yang Wajib Kamu Punya

3. autovalidateMode — Validasi Saat Mengetik

4. SnackBar — Feedback yang Elegan

5. Contoh Lengkap: Form Registrasi dengan Validasi Kuat

6. Styling Pesan Error

Ringkasan

Flutter #9: Form & TextField — Input dari User

1. TextField — Input Satuan

TextField Properties yang Sering Dipakai

2. Form Widget — Multi-Field Terstruktur

3. TextField vs TextFormField — Kapan Pakai?

4. Pola Nyata: Form Auto-Save ke State

Flutter #8: Navigasi — Navigator.push & Named Routes

1. Konsep Dasar: Stack Navigation

2. Navigator.push — Cara Paling Simpel

Pass Data Antar Halaman

3. Named Routes — Navigasi Deklaratif

Pass Arguments dengan Named Routes

4. Catatan Penting Navigasi

5. Push vs PushNamed: Beda Tipis Tapi Penting

Flutter #7: ListView & GridView — Bikin List Konten

1. ListView — Raja Daftar Vertikal

ListView Sederhana

2. ListView.builder — Pahlawan Performa

Kunci ListView.builder

3. ListView.separated — Tambahin Pembatas

4. GridView — Saat Konten Perlu Tampil “Kotak-Kotak”

GridView.count — Grid dengan Jumlah Kolom Fix

GridView.builder — Buat Data Banyak

GridDelegate — Kunci Flexibilitas Grid

5. Horizontal Scroll — Bikin Carousel ala Netflix

6. Pull-to-Refresh — Sentuhan Akhir

7. Perbandingan Lengkap: Kapan Pakai yang Mana?

8. Common Mistakes (Jangan Diulang!)

❌ ListView di dalam Column tanpa Expanded

❌ Pakai ListView(children: []) untuk ratusan item

❌ Lupa itemCount di ListView.builder

9. Latihan Mandiri

Penutup

Flutter #6: Layouting — Padding, Margin, SizedBox, Expanded & Flexible

1. Padding & Margin — Bedanya Apa?

Padding dengan Widget Padding

Margin dengan Container

Visualisasi Box Model

2. SizedBox — Bikin Jarak & Ukuran Fix

Sebagai Spacer (Jarak Antar Widget)

Sebagai Fixed-Size Container

SizedBox vs Container

3. Expanded — Ambil Semua Sisa Ruang

Properti flex — Pembagian Proporsional

4. Flexible — Mirip Expanded, Tapi Bisa “Ngeliat” Dulu

Kapan Pakai Flexible vs Expanded?

5. Studi Kasus: Card Profile Responsif

6. Cheat Sheet Cepat

7. Common Mistakes (Jangan Dilakukan!)

❌ Expanded di luar Row/Column/Flex

❌ Lupa crossAxisAlignment saat pakai Expanded

❌ Container banyak properti untuk hal simpel

8. Latihan Mandiri

Penutup

Flutter #5: StatelessWidget vs StatefulWidget & setState

Apa Itu “State”?

StatelessWidget — Widget yang “Beku”

StatefulWidget — Widget yang “Hidup”

Magic-nya setState()

Lifecycle StatefulWidget (Penting!)

Kapan Pakai yang Mana?

Tips Biar Gak Salah Paham

Kesimpulan

Flutter #4: Widget Dasar — Text, Container, Row, Column

Widget = Lego Blocks

1. Text — Bikin Tulisan

Text Direction & Softwrap

2. Container — Kotak Serbaguna

3. Row & Column — Atur Tata Letak

Row

Column

1. Cara Kerja `validator`

3. `autovalidateMode` — Validasi Saat Mengetik

❌ Pakai `ListView(children: [])` untuk ratusan item

❌ Lupa `itemCount` di `ListView.builder`

Padding dengan Widget `Padding`

Margin dengan `Container`

Properti `flex` — Pembagian Proporsional

❌ `Expanded` di luar `Row`/`Column`/`Flex`

❌ Lupa `crossAxisAlignment` saat pakai `Expanded`

❌ `Container` banyak properti untuk hal simpel

Magic-nya `setState()`

1. `lib/main.dart` — Jantung Aplikasi

2. `pubspec.yaml` — Manager Dependencies & Aset

3. `android/` & `ios/` — Kode Native Platform

4. `test/widget_test.dart` — Testing

5. `analysis_options.yaml` — Aturan Kode

`.gitignore` — File Wajib Saat Push ke Git

Langkah 2: Pahami Output `flutter doctor`

Error: `cmdline-tools component is missing`

Error: `Unable to locate Android SDK`