Widget Tree: apa itu, struktur dan peran dalam pohon widget

Apa itu Widget Tree di Flutter?

Widget Tree — deskripsi deklaratif antarmuka pengguna di Flutter, dibangun dalam bentuk pohon widget bersarang. Setiap widget mendefinisikan bagian UI: konfigurasinya, parameter tampilan, dan perilaku saat interaksi. Pengembang mendeskripsikan bagaimana antarmuka harus terlihat dalam status aplikasi saat ini, dan Flutter bertanggung jawab untuk mengubah deskripsi ini menjadi piksel di layar.

Pendekatan deklaratif Flutter

Tidak seperti framework imperatif di mana pengembang secara langsung memanipulasi elemen antarmuka, Flutter menggunakan pendekatan deklaratif. Saat status aplikasi berubah, Widget Tree baru dibuat dan framework menghitung perbedaan antara pohon lama dan baru. Ini meminimalkan jumlah operasi penggambaran dan membuat kode lebih dapat diprediksi.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Widget Tree")),
        body: Center(
          child: Column(
            children: [
              Text("Halo, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("Tekan saya"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Dalam contoh ini, Widget Tree terdiri dari MaterialApp, Scaffold, AppBar, Center, Column, Text, dan ElevatedButton. Masing-masing widget ini adalah simpul pohon. Saat status aplikasi berubah, Flutter memanggil ulang metode build dan membandingkan hasilnya dengan pohon sebelumnya.

Struktur Widget Tree: widget root dan anak

Widget Tree dimulai dengan widget root yang diteruskan ke metode runApp. Widget root biasanya MaterialApp, CupertinoApp, atau WidgetsApp — menetapkan pengaturan global aplikasi. Dari root, pohon bercabang menjadi widget anak, yang masing-masing dapat berisi keturunannya sendiri.

Widget satu anak dan banyak anak

Widget di Flutter dibagi menjadi single-child (menerima satu anak melalui parameter child) dan multi-child (menerima daftar anak melalui children). Contoh single-child: Center, Padding, SizedBox, Container. Multi-child: Column, Row, Stack, ListView, GridView. Perbedaan ini memengaruhi struktur Widget Tree: widget multi-child menciptakan pohon yang lebih lebar, sedangkan single-child menciptakan pohon yang lebih dalam.

Peran BuildContext dalam pohon

BuildContext — lokasi widget di Widget Tree. Setiap widget memiliki BuildContext sendiri, yang diteruskan ke metode build dan digunakan untuk mengakses widget induk, tema, MediaQuery, dan InheritedWidget lainnya. BuildContext adalah jembatan antara widget dan elemennya di Element Tree.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final mediaQuery = MediaQuery.of(context);
    return Container(
      color: theme.colorScheme.primary,
      child: Text(
        "Lebar layar: ${mediaQuery.size.width}"
      ),
    );
  }
}

Dalam contoh ini, BuildContext digunakan untuk mendapatkan tema dan ukuran layar. Flutter naik ke atas Widget Tree ke Theme dan MediaQuery terdekat, yang merupakan InheritedWidget. Ini menunjukkan bagaimana konteks menghubungkan widget dengan posisinya dalam hierarki.

Bagaimana Flutter membangun Widget Tree saat startup?

Saat menjalankan aplikasi Flutter, fungsi runApp dipanggil, yang menerima widget root dan memulai pembangunan Widget Tree. Proses ini mencakup tiga tahap: membuat konfigurasi widget, membentuk Element Tree, dan membangun RenderObject Tree untuk penggambaran yang sebenarnya.

Tahap 1: Membuat widget root

Fungsi runApp membuat elemen root melalui WidgetsFlutterBinding, yang menghubungkan framework dengan mesin grafis. Widget root ditempatkan di pohon dan Flutter memanggil metode build untuk mengisinya dengan widget anak. Setiap panggilan build menghasilkan subgraf baru dari Widget Tree.

Tahap 2: Layout awal

Setelah membangun Widget Tree, Flutter melakukan layout awal — menghitung ukuran dan posisi semua widget. Proses ini dimulai dari root dan menyebar ke bawah pohon. Setiap widget menerima batasan dari induk dan mengembalikan ukuran yang dihitung. Jika ukuran tidak cocok, Flutter menghasilkan kesalahan layout.

Tahap 3: Menggambar di layar

Setelah layout selesai, Flutter memulai penggambaran setiap widget. RenderObject mengubah deskripsi antarmuka menjadi perintah grafis yang dijalankan oleh GPU melalui Skia atau Impeller. Seluruh proses — dari Widget Tree hingga piksel — diulang pada setiap pembaruan status dengan frekuensi hingga 120 frame per detik.

StatelessWidget dan StatefulWidget dalam hierarki pohon

StatelessWidget — widget yang tidak memiliki status internal yang dapat diubah. Penampilannya sepenuhnya ditentukan oleh parameter input yang diteruskan melalui konstruktor. Jika parameter tidak berubah, StatelessWidget tidak dibangun ulang. Ini membuatnya ringan dari segi kinerja.

Kapan menggunakan StatelessWidget

Gunakan StatelessWidget untuk elemen statis antarmuka: ikon, label teks, pemisah dekoratif, dan tombol sederhana tanpa logika internal. Menurut dokumentasi Flutter, sekitar 70% widget dalam aplikasi tipikal dapat berupa StatelessWidget, yang mengurangi beban pengumpul sampah dan mempercepat rebuild.

StatefulWidget dan manajemen status

StatefulWidget membuat objek State yang dipertahankan di antara pembangunan ulang widget. Saat status berubah (melalui panggilan setState), Flutter menandai widget sebagai “kotor” dan pada frame berikutnya membangunnya ulang. StatefulWidget memungkinkan implementasi elemen interaktif: bidang input, animasi, timer, dan daftar dinamis.

class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Hitungan: $_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("Tambah"),
        ),
      ],
    );
  }
}

Dalam contoh ini, StatefulWidget menggunakan setState untuk mengubah penghitung. Saat status diperbarui, Flutter hanya membangun ulang bagian Widget Tree yang berubah — widget CounterWidget dan keturunannya. Widget induk tidak dibangun ulang, yang merupakan keuntungan utama model deklaratif Flutter.

Bagaimana Widget Tree terkait dengan Element Tree

Widget Tree adalah lapisan konfigurasi, dan Element Tree adalah penghubung antara widget dan penggambaran sebenarnya. Setiap widget di Widget Tree membuat elemen di Element Tree yang menyimpan referensi ke widget dan mengelola siklus hidup. Arsitektur ini memungkinkan Flutter memproses perubahan secara efisien.

Membuat elemen dari widget

Saat Flutter pertama kali menemukan widget, ia memanggil metode createElement yang membuat elemen yang sesuai. Untuk StatelessWidget, dibuat StatelessElement; untuk StatefulWidget, dibuat StatefulElement yang juga membuat objek State. Elemen dipertahankan di antara siklus rebuild, bahkan jika widget dibuat ulang.

Mekanisme Keys di Element Tree

Key — pengidentifikasi yang membantu Flutter mencocokkan widget dari Widget Tree lama dan baru. Jika widget memiliki Key, Flutter menggunakannya untuk menemukan elemen yang sesuai, bukan posisi di pohon. Kunci diperlukan saat bekerja dengan daftar dinamis di mana urutan elemen dapat berubah.

ListView(
  children: items.map((item) => ListItem(
    key: ValueKey(item.id),
    data: item,
  )).toList(),
)

Tanpa Key, Flutter mencocokkan elemen berdasarkan posisi, yang dapat menyebabkan penyimpanan status yang tidak tepat saat urutan berubah. ValueKey dengan pengidentifikasi unik memastikan bahwa setiap elemen mempertahankan statusnya terlepas dari posisinya dalam daftar.

Pengaruh Widget Tree terhadap kinerja

Struktur Widget Tree secara langsung memengaruhi kinerja aplikasi Flutter. Pohon yang dalam dengan banyak widget bersarang memerlukan lebih banyak waktu untuk fase layout dan meningkatkan konsumsi memori. Flutter DevTools menyediakan alat untuk menganalisis Widget Tree dan mengidentifikasi hambatan.

Penempatan bersarang berlebihan

Setiap tingkat penempatan bersarang menambahkan perhitungan tambahan pada layout dan paint. Alih-alih penempatan bersarang rantai yang dalam, gunakan struktur yang lebih datar. Misalnya, Row dengan Expanded dapat menggantikan beberapa Container bersarang dengan Align. Menurut Flutter Team, optimasi pohon dapat mengurangi waktu layout hingga 40%.

• Layout — setiap induk meneruskan batasan ke widget anak dan menerima ukuran kembali, yang pada penempatan bersarang dalam menciptakan rantai perhitungan.
• Paint — setiap widget dapat membuat lapisan terpisah untuk penggambaran, dan penempatan bersarang berlebihan meningkatkan jumlah lapisan.
• Memory — setiap elemen di Element Tree memakan memori, dan widget tambahan meningkatkan konsumsi sumber daya.

Alat untuk analisis Widget Tree

Flutter DevTools menyediakan widget “Widget Inspector” yang menampilkan Widget Tree saat ini secara real-time. Pengembang dapat memilih widget apa pun di layar dan melihat tempatnya di pohon, parameter, dan batasan layout. Ini membantu mengidentifikasi penempatan bersarang yang tidak terduga, rebuild yang tidak perlu, dan masalah ukuran.

RepaintBoundary untuk optimasi

RepaintBoundary — widget yang mengisolasi bagian Widget Tree untuk penggambaran mandiri. Jika konten RepaintBoundary berubah, hanya areanya yang digambar ulang, bukan seluruh layar. Gunakan RepaintBoundary untuk animasi, daftar, dan elemen lain yang sering diperbarui.

RepaintBoundary(
  child: CustomPaint(
    painter: MyPainter(),
    child: SizedBox(
      width: 200,
      height: 200,
    ),
  ),
)

Dalam contoh ini, RepaintBoundary mengisolasi CustomPaint ke area penggambaran terpisah. Saat memperbarui animasi di dalam area ini, hanya widget CustomPaint yang digambar ulang, sisa layar tetap tidak berubah. Ini sangat berguna dalam antarmuka kompleks dengan banyak elemen animasi.