Engine, Framework & Embedder #

Setiap kali kamu menulis widget Flutter dan menjalankan aplikasi, ada tiga lapisan besar yang bekerja bersama di balik layar: Framework, Engine, dan Embedder. Memahami ketiganya akan membantumu debug masalah yang lebih dalam, memilih arsitektur yang tepat, dan memahami mengapa Flutter bisa sekonsisten dan secepat ini.

Gambaran Besar: “Layer Cake” Flutter #

Flutter sering digambarkan sebagai sebuah layer cake — tumpukan lapisan yang masing-masing bergantung pada lapisan di bawahnya:

+-----------------------------------------------+
|              Aplikasi Kamu (Dart)             |
+-----------------------------------------------+
|           Flutter Framework (Dart)            |
|  Material / Cupertino                         |
|  Widgets                                      |
|  Rendering                                    |
|  Animation, Painting, Gestures                |
|  Foundation                                   |
+-----------------------------------------------+
|           Flutter Engine (C++)                |
|  Dart Runtime & Compiler                      |
|  Skia / Impeller (rendering)                  |
|  Text Layout                                  |
|  File & Network I/O                           |
|  Accessibility                                |
|  Plugin Architecture                          |
+-----------------------------------------------+
|         Platform Embedder                     |
|  Android (Java/Kotlin + C++)                  |
|  iOS / macOS (Swift / Obj-C)                  |
|  Windows / Linux (C++)                        |
+-----------------------------------------------+
|            Sistem Operasi & Hardware          |
+-----------------------------------------------+

Setiap lapisan hanya berkomunikasi dengan lapisan di atas atau di bawahnya secara langsung — tidak ada lapisan yang “melompati” lapisan lain. Ini membuat arsitektur Flutter bersih, dapat diuji, dan mudah diperluas.

Lapisan 1: Flutter Framework #

Framework adalah lapisan yang paling sering kamu sentuh sebagai developer. Seluruhnya ditulis dalam Dart dan dibagi menjadi beberapa sub-lapisan dari bawah ke atas:

Foundation #

Lapisan paling bawah dari Framework. Berisi utilitas dasar yang digunakan oleh seluruh sistem:

• ChangeNotifier — mekanisme notifikasi perubahan state
• Listenable — abstraksi untuk objek yang bisa diobservasi
• Utilitas logging, debugging, dan assertion

Animation, Painting & Gestures #

Tiga library independen yang masing-masing menangani satu domain:

// Animation — mengontrol nilai yang berubah seiring waktu
AnimationController controller = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 300),
);

// Painting — abstraksi untuk menggambar ke canvas
Canvas canvas = ...; // dari CustomPainter
canvas.drawRect(rect, paint);

// Gestures — mendeteksi input sentuhan
GestureDetector(
  onTap: () => print('Tap!'),
  onPanUpdate: (details) => print('Geser: ${details.delta}'),
  child: Container(),
)

Rendering #

Sub-lapisan ini bertanggung jawab atas layout dan painting widget. Di sini RenderObject — bukan Widget — menghitung ukuran, posisi, dan menggambar ke canvas. Ini adalah lapisan paling dekat dengan engine.

Widgets #

Lapisan yang paling kamu kenal. Semua StatelessWidget, StatefulWidget, InheritedWidget ada di sini. Widget adalah deskripsi immutable dari UI yang kemudian diterjemahkan menjadi RenderObject oleh lapisan Rendering.

Material & Cupertino #

Lapisan paling atas Framework — kumpulan widget siap pakai yang mengimplementasikan Material Design (Google) dan Cupertino (Apple). Ini adalah apa yang kebanyakan developer gunakan setiap hari: AppBar, Scaffold, ElevatedButton, CupertinoNavigationBar, dan seterusnya.

Semua lapisan Framework bersifat opsional dan dapat diganti. Kamu bisa melewati Material/Cupertino dan membangun design system sendiri langsung di atas layer Widgets. Bahkan kamu bisa melewati Widgets dan bekerja langsung dengan RenderObjects — meski ini jarang diperlukan.

Lapisan 2: Flutter Engine #

Engine adalah jantung Flutter, ditulis hampir seluruhnya dalam C++. Engine bersifat platform-agnostic — ia tidak peduli apakah berjalan di Android, iOS, atau desktop. Engine menyediakan ABI (Application Binary Interface) yang stabil sehingga embedder bisa berkomunikasi dengannya secara konsisten.

Dart Runtime & Compile Toolchain #

Engine menyertakan Dart runtime lengkap — termasuk garbage collector, JIT compiler (untuk debug), dan AOT compiler (untuk release). Inilah yang memungkinkan kode Dart kamu berjalan di semua platform tanpa perlu dimodifikasi.

Dart Source Code
      |
      v
Dart VM (debug)  atau  AOT Binary (release)
      |                        |
      v                        v
Engine menjalankan kode  Engine mengeksekusi
Dart saat runtime        machine code langsung

Rendering: Skia dan Impeller #

Ini adalah komponen yang paling krusial — bertanggung jawab mengubah instruksi gambar menjadi piksel aktual di layar.

Skia adalah engine grafis 2D open-source yang sudah lama digunakan Flutter (dan juga digunakan oleh Chrome, Android, dan YouTube). Skia menggunakan pendekatan Immediate Mode Rendering — menggambar ulang seluruh frame dari awal setiap kali ada perubahan.

Impeller adalah engine rendering baru yang dikembangkan khusus untuk Flutter, mulai diprototiping sejak 2021. Perbedaan utamanya:

SKIA (Immediate Mode Rendering):
  Frame 1: Gambar semua elemen dari awal
  Frame 2: Gambar semua elemen dari awal lagi
  Frame 3: Gambar semua elemen dari awal lagi
  --> Boros, tapi sederhana

IMPELLER (Retained Mode Rendering):
  Frame 1: Gambar semua elemen, simpan state
  Frame 2: Hanya gambar ulang elemen yang BERUBAH
  Frame 3: Hanya gambar ulang elemen yang BERUBAH
  --> Lebih efisien, performa lebih konsisten

Masalah utama Skia adalah shader compilation jank — jeda yang terjadi saat Skia mengkompilasi shader GPU untuk pertama kali saat runtime. Impeller menyelesaikan ini dengan mengkompilasi semua shader saat build time (AOT), sehingga tidak ada kompilasi shader saat aplikasi berjalan.

Status Impeller saat ini (2025):

Komponen Engine Lainnya #

Selain rendering, Engine juga menangani:

• Text Layout — menggunakan SkParagraph (bagian dari Skia) untuk shaping dan layout teks
• File & Network I/O — operasi file dan HTTP yang diekspos ke Dart melalui dart:io
• Accessibility — meneruskan informasi aksesibilitas ke platform (screen reader, dll.)
• Plugin Architecture — sistem channel untuk komunikasi antara Dart dan kode native

dart:ui — Jembatan Engine ke Framework #

Engine mengekspos fungsionalitasnya ke Framework melalui library bernama dart:ui. Ini adalah API level terendah yang bisa diakses dari Dart:

import 'dart:ui' as ui;

// dart:ui memberikan akses langsung ke engine
// Biasanya kamu tidak perlu ini — Framework sudah membungkusnya
// Tapi berguna untuk kasus custom rendering yang sangat spesifik

void paintLowLevel(ui.Canvas canvas) {
  final paint = ui.Paint()
    ..color = const ui.Color(0xFF2196F3)
    ..style = ui.PaintingStyle.fill;

  canvas.drawCircle(
    const ui.Offset(100, 100),
    50,
    paint,
  );
}

Kamu jarang perlu menyentuh dart:ui secara langsung. Flutter Framework sudah membungkus semua fungsionalitas dart:ui dalam abstraksi yang lebih ramah developer — seperti CustomPainter, Canvas, Paint, dan widget-widget standar. Gunakan dart:ui hanya untuk kebutuhan rendering yang sangat spesifik dan tidak bisa dicapai dengan API Framework.

Lapisan 3: Platform Embedder #

Embedder adalah lapisan paling bawah yang ditulis dalam bahasa native masing-masing platform. Tugasnya adalah menjadi “jembatan” antara Flutter Engine dan sistem operasi.

Bahasa Embedder per Platform #

Tanggung Jawab Embedder #

Embedder menangani semua hal yang spesifik untuk platform:

1. Menyediakan rendering surface Embedder memberikan “kanvas” kepada Engine untuk menggambar — bisa berupa SurfaceView di Android, CAMetalLayer di iOS, atau window handle di desktop.

2. Mengelola thread dan event loop Engine Flutter membutuhkan empat task runner yang dikelola oleh Embedder:

UI Task Runner    --> Menjalankan kode Dart (build, layout)
Raster Task Runner --> Rasterisasi layer tree ke GPU
IO Task Runner    --> Operasi I/O (load gambar, file, dll.)
Platform Task Runner --> Komunikasi dengan platform native

3. Menangani input Embedder menangkap event input dari OS (sentuhan, keyboard, mouse) dan meneruskannya ke Engine dalam format yang Engine mengerti.

4. Mengatur lifecycle aplikasi Embedder memberi tahu Engine tentang perubahan lifecycle: aplikasi dibuka, di-pause, di-resume, atau ditutup.

5. Menjembatani Platform Channel Ketika kode Dart memanggil fitur native (kamera, GPS, dll.) melalui Platform Channel, Embedder yang menangani routing pesan ke kode native yang sesuai.

Integrasi Flutter ke Aplikasi yang Sudah Ada #

Salah satu keunggulan arsitektur Embedder adalah Flutter bisa diintegrasikan sebagai modul ke dalam aplikasi native yang sudah ada — tidak harus menggantikan seluruh aplikasi:

Aplikasi Android yang Sudah Ada
+----------------------------------+
|  Activity A (Android native)     |
|  Activity B (Android native)     |
|  FlutterActivity (Flutter UI)    |  <-- Flutter sebagai modul
|  Activity D (Android native)     |
+----------------------------------+

Ini memungkinkan migrasi bertahap dari aplikasi native ke Flutter tanpa harus menulis ulang segalanya dari awal.

Bagaimana Ketiganya Bekerja Bersama #

Mari kita ikuti perjalanan sebuah interaksi sederhana — pengguna mengetuk tombol — dari awal hingga akhir:

1. PENGGUNA mengetuk layar
        |
        v
2. EMBEDDER menangkap touch event dari OS
        |
        v
3. ENGINE menerima event, meneruskan ke Dart isolate
        |
        v
4. FRAMEWORK (Gestures layer) mendeteksi gesture Tap
        |
        v
5. FRAMEWORK memanggil onPressed callback
        |
        v
6. Kode Dart kamu berjalan, mengubah state
        |
        v
7. FRAMEWORK memanggil build() ulang pada widget yang terpengaruh
        |
        v
8. FRAMEWORK (Rendering layer) melakukan layout & paint
        |
        v
9. ENGINE menerima layer tree dari Framework via dart:ui
        |
        v
10. ENGINE (Impeller/Skia) merasterisasi ke frame buffer
        |
        v
11. EMBEDDER menyerahkan frame buffer ke OS
        |
        v
12. OS menampilkan frame baru di layar
        |
        v
Pengguna melihat perubahan UI (~16ms total, 60 FPS)

Ringkasan #

• Flutter memiliki tiga lapisan utama: Framework (Dart), Engine (C++), dan Embedder (bahasa native platform).
• Framework adalah lapisan yang paling sering disentuh developer — berisi Foundation, Gestures, Rendering, Widgets, Material, dan Cupertino.
• Engine adalah jantung Flutter: menjalankan Dart runtime, me-render UI lewat Impeller/Skia, menangani I/O, aksesibilitas, dan plugin.
• Impeller menggantikan Skia sebagai engine rendering default — menyelesaikan masalah shader compilation jank dengan mengkompilasi shader saat build time (AOT).
• Embedder menghubungkan Engine dengan OS — menyediakan rendering surface, mengelola thread, menangani input, dan lifecycle aplikasi.
• Engine mengekspos fungsionalitasnya ke Framework melalui dart:ui — API level terendah yang bisa diakses dari Dart.
• Flutter bisa diintegrasikan sebagai modul ke dalam aplikasi native yang sudah ada, memungkinkan migrasi bertahap.

← Sebelumnya: Dart Language   Berikutnya: Architecture Overview →