Belajar Flutter #2: Membangun UI Pertama dengan Widget Dasar

Setelah setup environment Flutter di episode 1, saatnya kamu masuk ke dunia yang lebih seru — membangun UI nyata. Widget adalah jantung Flutter, dan memahaminya dengan baik adalah kunci untuk membuat aplikasi yang rapi dan responsif. Dalam artikel ini kita akan bongkar struktur project Flutter, memahami konsep Widget Tree, membedakan StatelessWidget dan StatefulWidget, dan langsung praktik membuat halaman profil sederhana. Siap? Mari kita mulai!

Kalau di episode 1 kamu sudah berhasil setup Flutter dan menjalankan app default, sekarang saatnya kita masuk ke bagian yang lebih fun — membuat UI sendiri. Widget adalah building block Flutter, dan paham konsepnya akan membuat coding jadi jauh lebih mudah.

Pada artikel ini kita akan eksplorasi struktur project Flutter, mengenal widget tree, membedakan dua jenis widget utama, dan praktik membuat UI pertama kamu dengan widget layout yang paling sering dipakai.

Struktur Project Flutter — Recap Cepat

Ingat, di episode 1 kita sudah buat project baru dengan flutter create. Struktur foldernya kira-kira gini:

my_app/
  lib/
    main.dart        <-- File utama kamu
  pubspec.yaml       <-- Dependency management
  android/
  ios/
  build/

File paling penting adalah lib/main.dart. Di sini kita mulai kode, dan setiap kali save, Flutter hot reload otomatis update tampilan di emulator tanpa restart. Super mantap untuk development!

Widget Tree — Struktur Hierarki Flutter

Di Flutter, setiap UI yang kamu lihat adalah kombinasi dari nested widget. Analogi sederhananya: kalau web punya HTML yang hierarki (parent-child elements), Flutter punya Widget Tree yang mirip.

Contohnya, halaman profil sederhana bisa jadi widget tree begini:

MaterialApp
  └─ Scaffold
      └─ Column
          ├─ Image (foto profil)
          ├─ Text (nama)
          └─ Text (bio)

Setiap widget memiliki properties (parameter) yang bisa kamu kustomisasi. Ini akan jadi jelas pas kita lihat contoh kode.

StatelessWidget vs StatefulWidget — Kapan Pakai Mana?

StatelessWidget adalah widget yang data/tampilannnya tidak berubah setelah dibuat. Contoh: tombol, teks statis, icon. Sekali render, selesai.

StatefulWidget adalah widget yang bisa berubah state-nya (data internal), dan kalau state berubah, widget re-render otomatis. Contoh: form input, counter, like button.

Perbedaan kode:

// StatelessWidget
class MyProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello Flutter');
  }
}

// StatefulWidget
class MyCounter extends StatefulWidget {
  @override
  _MyCounterState createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

Catatan: di Dart baru (null safety), syntax StatefulWidget sudah sedikit berubah, tapi konsepnya sama. Untuk pemula, gunakan StatelessWidget dulu sampai betul-betul paham state management.

Widget Layout Paling Sering Dipakai

Berikut widget layout yang akan kamu pakai 80% dari waktu development:

Container — Kotak multi-purpose: padding, margin, background color, shadow. Seperti div di CSS.
Column — Atur widget secara vertikal (dari atas ke bawah).
Row — Atur widget secara horizontal (dari kiri ke kanan).
Stack — Tumpuk widget satu di atas yang lain. Berguna untuk overlay, positioning absolute.
ListView — Scroll widget jika content lebih panjang dari layar. Seperti flex-column di CSS tapi scrollable.
Scaffold — Template halaman standar dengan AppBar, Body, FloatingActionButton.

Buat mental model: Container untuk styling box, Column/Row untuk mengatur layout, Stack untuk overlay, ListView untuk list panjang.

Praktik: Membuat Halaman Profil Sederhana

Mari kita buat halaman profil dengan foto, nama, bio, dan tombol. Ini menggunakan hanya StatelessWidget untuk sekarang.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ProfilePage(),
      title: 'Profil Kamu',
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profil'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 20),
            // Foto profil
            CircleAvatar(
              radius: 60,
              backgroundImage: NetworkImage(
                'https://via.placeholder.com/120',
              ),
            ),
            SizedBox(height: 20),
            // Nama
            Text(
              'Budi Santoso',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            // Bio
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                'Mobile Developer | Flutter Enthusiast',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey[600],
                ),
              ),
            ),
            SizedBox(height: 20),
            // Row untuk tombol follow dan message
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Follow'),
                ),
                SizedBox(width: 16),
                OutlinedButton(
                  onPressed: () {},
                  child: Text('Message'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Kalau kamu run kode di atas dengan flutter run, hasilnya akan seperti halaman profil standar dengan foto, nama, bio, dan dua tombol. Coba rubah text, warna, ukuran — experiment adalah cara terbaik belajar!

Tabel Perbandingan Widget Layout Utama

Untuk referensi cepat, berikut tabel perbandingan widget layout yang sering dipakai:

Tips Debugging & Best Practices

Beberapa hal yang perlu diperhatikan saat membangun UI Flutter:

Gunakan Expanded atau Flexible kalau widget di Row/Column overflow. Widget ini akan membagikan space secara smart.
Hot Reload adalah teman terbaik kamu. Save file, dan perubahan langsung terlihat di emulator tanpa restart aplikasi.
Widget dapat di-nest dengan unlimited level, tapi hindari nesting terlalu dalam (>5 level) karena code jadi susah dibaca. Pecah jadi widget terpisah jika perlu.
Gunakan const widget untuk performa. const Text('Hello') lebih efisien daripada Text('Hello').
Jangan lupa SizedBox untuk spacing antar widget. Lebih clean daripada Padding di setiap tempat.

Kesimpulan

Sekarang kamu sudah mengerti konsep dasar Flutter: Widget Tree, perbedaan StatelessWidget dan StatefulWidget, serta widget layout paling penting. Yang paling penting adalah praktik — coba buat halaman lain, ubah warna, ukuran, layout. Error yang kamu dapat adalah pembelajaran terbaik, dan Flutter error message biasanya cukup jelas menunjuk masalahnya.

Di episode 3, kita akan lanjut ke navigasi antar halaman dan intro state management. Sebelum itu, pastikan kamu sudah nyaman dengan widget layout dan sudah coba buat beberapa halaman sederhana. Sampai ketemu di episode selanjutnya!