Flutter Widgets — apa itu, pohon widget dan build

Apa itu Flutter Widgets?

Flutter Widgets — semua elemen UI dalam kerangka Flutter, diimplementasikan sebagai kelas Dart yang tidak dapat diubah (immutable). Widget adalah konfigurasi elemen UI: ukuran, warna, posisi, penanganan peristiwa. Berbeda dengan Android (XML + View) atau iOS (Storyboard + UIView), Flutter tidak menggunakan komponen native — semuanya digambar oleh mesin Skia (Android/iOS/Linux) atau Impeller (iOS/macOS) di atas Canvas. Ini memastikan tampilan yang identik di semua platform tanpa perbedaan platform. Flutter hadir dengan dua set widget: Material Widgets (desain Google Material Design 3 untuk Android/Web) dan Cupertino Widgets (desain Apple HIG untuk iOS/macOS). Pengembang dapat menggabungkan kedua set dalam satu aplikasi. Setiap widget memiliki metode build() yang mengembalikan widget anak atau komposisinya — begitulah pohon widget dibangun.

Tiga pohon Flutter

Flutter beroperasi dengan tiga pohon: Widget Tree (konfigurasi, dibuat oleh pengembang), Element Tree (pencocokan widget dengan posisi di pohon, dikelola oleh kerangka), Render Tree (objek yang menghitung layout dan melakukan paint). Widget membuat Element, yang membuat RenderObject. Element digunakan kembali saat perubahan konfigurasi (rebuild) — ini adalah mekanisme optimasi Flutter: jika tipe widget dan key cocok, Element tidak dibuat ulang, melainkan konfigurasi baru diperbarui. Memahami ketiga pohon adalah kunci untuk mengoptimalkan kinerja aplikasi Flutter.

StatelessWidget: widget tidak dapat diubah

StatelessWidget — widget yang tidak menyimpan status internal. Ia menerima parameter melalui konstruktor dan menampilkannya tanpa kemungkinan berubah setelah pembuatan. StatelessWidget sangat cocok untuk elemen statis: judul, ikon, avatar, daftar dengan data tetap. Metode build() dipanggil sekali saat pembuatan dan saat perubahan widget induk. Karena StatelessWidget tidak memiliki status, ia tidak memerlukan objek State terpisah — build() didefinisikan langsung di kelas widget.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — StatelessWidget yang menerima name dan avatarUrl melalui konstruktor. CircleAvatar menampilkan avatar, Text menampilkan nama. Widget tidak dapat mengubah nilai-nilai ini setelah pembuatan. Menggunakan konstruktor const (const ProfileHeader) memungkinkan Flutter menggunakan kembali instance widget saat rebuild induk — ini adalah mikro-optimasi yang direkomendasikan untuk semua StatelessWidget.

StatefulWidget: widget dengan status

StatefulWidget — widget dengan status yang dapat diubah, disimpan dalam objek State terpisah. StatefulWidget sendiri tidak dapat diubah (immutable), seperti StatelessWidget. Bagian yang dapat diubah ditempatkan di State: State — objek yang dibuat sekali dan bertahan dari banyak rebuild widget. Saat status berubah (setState()), Flutter memanggil build() dari State, memperbarui UI. StatefulWidget digunakan untuk elemen interaktif: penghitung, bidang teks, kotak centang, animasi, pengatur waktu.

import 'package:flutter/material.dart';

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — StatefulWidget dengan kelas State _LikeButtonState. Bidang liked dan count adalah status yang disimpan di State dan tidak direset saat rebuild. setState() memberi tahu Flutter tentang perlunya membangun ulang UI. Flutter tidak membuat ulang State pada setiap rebuild induk — hanya saat perubahan konfigurasi (key atau tipe widget). Di IT Sectr, kami menggunakan StatelessWidget untuk tampilan dan StatefulWidget untuk komponen interaktif, mengikuti prinsip meminimalkan StatefulWidget hingga batas mutasi.

Pohon widget: dari Widget ke RenderObject

Widget Tree — struktur hierarkis widget yang mendeskripsikan UI aplikasi. Flutter mengubah Widget Tree menjadi Element Tree: setiap Widget membuat Element yang melacak posisi di pohon dan koneksi ke RenderObject. Render Tree melakukan layout (menentukan ukuran dan posisi) dan paint (menggambar). Element adalah lapisan optimasi kunci: jika tipe widget dan key tidak berubah saat rebuild, Element digunakan kembali, memperbarui konfigurasi tanpa membuat ulang RenderObject. Ini memastikan kinerja Flutter pada kecepatan bingkai tinggi (60/120 FPS).

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Halo, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

Pohon widget HomeScreen: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold — widget layout utama Material Design. Center memusatkan Column anak. Column mengatur anak secara vertikal dengan perataan tengah (mainAxisAlignment.center). Flutter menghitung layout dari atas ke bawah (constraints diteruskan dari induk) dan ukuran dari bawah ke atas (sizedByParent atau sizing from children).

BuildContext: konteks pembuatan dan akses ke pohon

BuildContext — deskriptor posisi widget di Element Tree. Setiap metode build() menerima BuildContext, di mana widget dapat mengakses:MediaQuery (ukuran layar, orientasi, kerapatan piksel, area aman), Theme (MaterialThemeData atau CupertinoThemeData), Navigator (tumpukan navigasi), ScaffoldMessenger (SnackBar), InheritedWidget (meneruskan data ke bawah pohon). BuildContext tidak boleh disimpan setelah build() selesai atau digunakan di luar konteks sinkron — ini menyebabkan kesalahan “Scaffold.of() called with a context that does not contain a Scaffold”. Alih-alih menyimpan context, gunakan widget Builder atau pola InheritedWidget untuk akses data.

Key: identifikasi widget di pohon

Key — parameter opsional konstruktor setiap widget (super.key). Key membantu Flutter mengidentifikasi widget saat perubahan urutan/jumlah elemen dalam daftar. Tanpa key, Flutter membandingkan widget berdasarkan tipe dan posisi; saat menambahkan elemen ke tengah daftar tanpa key, Flutter menggunakan kembali Element untuk widget yang salah, menyebabkan bug status (StatefulWidget) dan animasi. Gunakan ValueKey (pengidentifikasi unik) untuk daftar, ObjectKey (berdasarkan objek data), UniqueKey (dijamin unik di setiap rebuild — untuk pembuatan ulang paksa).

Katalog widget Flutter: Material, Cupertino, Layout

Flutter SDK (versi stabil 3.3+, Dart 3+) mencakup 200+ widget bawaan, dibagi ke dalam kategori: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) dan Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Widget Layout adalah dasar dari setiap Flutter UI: Row untuk urutan horizontal, Column untuk vertikal, Stack untuk elemen yang tumpang tindih, Container dengan BoxDecoration untuk dekorasi.