Belajar Flutter - Konsep Dasar & Arsitektur Flutter

#Pendahuluan

Di episode 1 kalian sudah tahu mengapa Flutter menggambar UInya sendiri. Sekarang kita masuk ke lapisan berikutnya: bagaimana Flutter bekerja di dalam. Memahami arsitektur adalah pembeda antara developer yang sekadar menumpuk widget dan developer yang bisa men-debug masalah rumit.

Episode 2 membedah empat pilar arsitektur Flutter: peran widgets, rendering engine, dan Dart runtime; model reactive UI dan widget lifecycle; hubungan tiga tree yang bekerja bersamaan — widget tree, element tree, dan render tree; serta model compile JIT dan AOT yang menghidupkan hot reload.

#Widgets, Rendering Engine, dan Dart Runtime

#Tiga Lapisan Inti

Flutter tersusun atas tiga lapisan yang bekerja berdampingan:

• Widget framework: perpustakaan widget dan layout yang kalian tulis setiap hari, ditulis dalam Dart.
• Rendering engine: mengeksekusi layout, painting, dan compositing — saat ini via Skia dan Impeller.
• Dart runtime: mengeksekusi kode Dart dengan garbage collector dan manajemen isolate.

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Halo Flutter'),
        ),
      ),
    );
  }
}

Kode di atas adalah aplikasi Flutter lengkap. runApp(MyApp()) menempelkan widget ke layar, lalu framework membangun pohon widget ke bawah. Perhatikan bahwa MaterialApp, Scaffold, Center, dan Text semuanya adalah widget.

#Reactive UI Model dan Widget Lifecycle

#Tampilan adalah Fungsi dari State

Flutter memakai reactive model: widget adalah deklarasi tampilan untuk state tertentu. Saat state berubah, build dipanggil ulang dan framework memperbarui layar secara efisien — kalian tidak menulis perintah imperatif untuk memutasi UI.

#Lifecycle StatefulWidget

Widget berstate punya lifecycle yang terdefinisi. Metode yang paling sering kalian gunakan:

• initState — dipanggil sekali saat widget dimasukkan ke pohon.
• didUpdateWidget — dipanggil saat parent mengganti konfigurasi widget.
• dispose — dipanggil saat widget dihapus; tempat membersihkan resource.

import 'package:flutter/material.dart';
 
class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
 
  @override
  State<CounterPage> createState() => _CounterPageState();
}
 
class _CounterPageState extends State<CounterPage> {
  int _count = 0;
 
  @override
  void initState() {
    super.initState();
    print('Widget dipasang');
  }
 
  @override
  void dispose() {
    print('Widget dibuang');
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('$_count')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

setState di contoh di atas memberi tahu framework bahwa state berubah, sehingga build dijalankan ulang. Inilah siklus yang akan kalian kuasai di episode 6 saat membahas state management.

#Widget Tree, Element Tree, dan Render Tree

#Tiga Pohon yang Berjalan Bersamaan

Flutter bekerja dengan tiga struktur sekaligus:

• Widget tree: konfigurasi immutable yang kalian tulis.
• Element tree: jembatan yang mengelola lifecycle dan instance widget, juga tempat BuildContext berasal.
• Render tree: objek yang benar-benar melakukan layout dan painting.

Saat kode build dijalankan, Flutter menghidrasi widget tree menjadi element tree, lalu render tree menghitung ukuran dan menggambar. Optimasi inti Flutter: saat tree di-rebuild, hanya bagian yang berubah yang di-mark sebagai dirty dan di-render ulang — sisanya di-skip.

#Mengapa BuildContext Penting

Setiap widget memiliki BuildContext yang berasal dari element-nya. Context dipakai untuk mencari ancestor widget, menavigasi, membaca theme, dan banyak lagi. Memahami bahwa context adalah elemen, bukan widget, menjelaskan banyak error aneh di awal belajar Flutter.

#Model Compile: JIT, AOT, dan Hot Reload

#Dua Mode untuk Dua Kebutuhan

Flutter memakai dua mode compile Dart:

• JIT saat pengembangan (flutter run): memungkinkan hot reload dan hot restart.
• AOT saat rilis (flutter build): kode dikompilasi ke machine code, menghasilkan startup dan runtime yang cepat.

#Alur Kerja yang Dimungkinkan JIT

Dengan JIT, kalian mengubah kode dan menekan r di terminal untuk langsung melihat hasilnya di emulator tanpa restart penuh:

flutter run --release

flutter run --release mengaktifkan mode AOT: aplikasi di-build dengan optimasi penuh, cocok untuk mengukur performa nyata. Jangan memakai mode ini saat mengembangkan, karena kalian kehilangan hot reload.

Verifikasi kualitas kode sebelum commit juga memakai toolchain Flutter:

dart analyze

dart analyze mendeteksi masalah potensial di kode tanpa menjalankannya — kebiasaan yang akan menghemat banyak waktu debugging.

#Penutup

Inti yang harus dibawa pulang:

• Arsitektur Flutter terdiri dari widget framework, rendering engine, dan Dart runtime.
• UI bersifat reaktif: build dipanggil ulang saat state berubah.
• StatefulWidget punya lifecycle: initState, didUpdateWidget, dan dispose.
• Widget tree, element tree, dan render tree bekerja bersama untuk layout dan painting.
• JIT menghidupkan hot reload; AOT menghasilkan performa rilis.
• Gunakan dart analyze secara rutin sebelum commit.

Di episode 3 selanjutnya kita masuk ke praktik: instalasi dan project setup — menginstall Flutter SDK dengan verifikasi environment, membuat project baru dengan flutter create, menjelajahi struktur project yang dihasilkan (lib, pubspec.yaml, android, ios, web), dan menjalankan aplikasi pertama di emulator atau device. Kalian mulai benar-benar menyentuh kode.