Engine Layer #

Flutter Engine adalah komponen arsitektur tengah yang paling jarang kita sentuh secara langsung selama pengembangan aplikasi sehari-hari, namun ia merupakan faktor penentu paling utama bagi performa, kelancaran (framerate), dan konsistensi visual aplikasi kita di berbagai platform. Seluruh kode di dalam Engine Layer ditulis menggunakan bahasa pemrograman tingkat rendah C++ (dengan bagian-bagian kecil dalam Rust, Assembly, dan Objective-C) dan bersifat platform-agnostic (tidak terikat pada satu sistem operasi tertentu). Lapisan ini bertanggung jawab untuk mengeksekusi Dart VM runtime, merasterisasi instruksi grafis 2D ke dalam kartu grafis (GPU), melakukan tata letak teks (text shaping), serta mengelola alur data I/O asinkron.

Gambaran Engine Layer #

Secara arsitektural, Engine Layer memegang peran sebagai mesin mekanis raksasa. Ia menerima instruksi-instruksi tata letak dan penggambaran visual tingkat tinggi yang dikirimkan oleh Flutter Framework melalui gerbang binding dart:ui. Engine kemudian memproses instruksi tersebut secara paralel, mengonversinya menjadi perintah GPU mentah, dan menyerahkan hasil akhir berupa buffer piksel ke Platform Embedder native untuk disajikan ke layar fisik perangkat.

flowchart TD
    subgraph Framework["Framework Layer (Dart)"]
        FW["Kode Dart & UI Framework"]
    end
    subgraph Engine["Engine Layer (C++)"]
        direction TB
        Binding["dart:ui API Bindings"]
        subgraph Core["Core Engine Components"]
            direction TB
            VM["Dart VM Runtime Isolate"]
            Render["Rendering Engine (Impeller / Skia)"]
            Text["Text Layout (SkParagraph / HarfBuzz)"]
            Compositor["Compositor (Flow)"]
            System["System Services (I/O, Network, A11y)"]
        end
        Binding --> VM
        Binding --> Render
        Binding --> Text
        Binding --> Compositor
        Binding --> System
    end
    subgraph Embedder["Platform Embedder"]
        PE["Host Shell (Android/iOS/Desktop)"]
    end
        
    Framework -->|"Panggilan API dart:ui"| Binding
    Engine -->|"Frame Buffer / Metal Layer / Vulkan Surface"| PE
        
    style Engine stroke:#388e3c,stroke-width:2px
    style Core stroke:#81c784,stroke-width:2px

Keindahan dari pemisahan C++ Engine ini adalah ia menyediakan antarmuka biner aplikasi (ABI - Application Binary Interface) yang sangat stabil bagi lapisan di atasnya. Hal ini membuat Framework Dart tidak perlu tahu apakah ia sedang berjalan di atas arsitektur prosesor ARM64 Android, chip Apple Silicon iOS, atau prosesor x64 Windows. Selama Framework berkomunikasi dengan ABI dart:ui, Engine yang akan menangani seluruh kompleksitas perangkat keras di bawahnya.

Dart Runtime & Compile Toolchain #

Salah satu komponen paling fundamental di dalam Engine adalah Dart Runtime. Komponen inilah yang bertanggung jawab untuk mendirikan lingkungan virtual, mengalokasikan memori, mengelola siklus hidup objek, dan mengeksekusi kode Dart aplikasi kita.

1. Model Isolasi Memori: Dart Isolate #

Dart VM di dalam engine mengeksekusi kode menggunakan model konkurensi berbasis Isolate. Berbeda dengan thread pada sistem operasi konvensional yang berbagi ruang memori yang sama (shared memory), Isolate berjalan secara mandiri dan memiliki tumpukan memori (heap memory) tersendiri yang terisolasi secara fisik.

flowchart LR
    subgraph MainIsolate["Main Isolate (UI Thread)"]
        direction TB
        UIHeap["Heap Memori UI"]
        UICode["Build/State/Layout"]
    end
    subgraph WorkerIsolate["Worker Isolate (Background)"]
        direction TB
        WorkerHeap["Heap Memori Worker"]
        WorkerCode["Kalkulasi Berat / JSON Parsing"]
    end
          
    MainIsolate <-->|"SendPort / ReceivePort (Message Passing)"| WorkerIsolate
          
    style MainIsolate stroke:#0288d1,stroke-width:2px
    style WorkerIsolate stroke:#e91e63,stroke-width:2px

Karena tidak ada memori yang dibagi di antara beberapa Isolate, sistem konkurensi Dart secara alami terhindar dari masalah persaingan data (race condition), penguncian memori (deadlocks), dan overhead sinkronisasi mutex. Komunikasi antar Isolate hanya dapat dilakukan melalui mekanisme berkirim pesan (message passing) menggunakan objek Port.

Selain itu, model isolasi memori ini memberikan dampak positif yang sangat besar bagi pengumpul sampah (Garbage Collector - GC). GC Dart VM dapat berjalan di setiap Isolate secara independen dan asinkron tanpa harus menghentikan jalannya Isolate lain (stop-the-world pauses). Hal ini membuat alokasi dan pembersihan memori widget-widget pendek di UI thread berjalan sangat mulus tanpa mengganggu laju rendering animasi.

2. Jalur Kompilasi Ganda: JIT vs AOT #

Engine Flutter mengemas dua rantai kompilasi (compiler toolchains) Dart VM yang digunakan untuk dua kebutuhan yang berbeda:

  • Mode Pengembangan (JIT - Just-In-Time): Digunakan saat kita menjalankan perintah flutter run dalam mode debug. Dart VM memuat compiler JIT langsung di dalam memori runtime perangkat. Ketika kita melakukan perubahan kode sumber dan memicu Hot Reload, compiler JIT hanya mengompilasi perbedaan kode baru tersebut secara bertahap (incremental compilation) lalu menyuntikkannya ke dalam VM berjalan tanpa membuang status data aplikasi.
  • Mode Produksi (AOT - Ahead-Of-Time): Digunakan saat kita membangun paket rilis menggunakan perintah flutter build. Seluruh kode Dart kita dikompilasi secara statis di komputer pengembang menggunakan modul gen_snapshot menjadi file pustaka mesin native ARM/x64 murni (.so untuk Android atau .dylib untuk iOS). Di dalam paket rilis, compiler JIT dibuang sepenuhnya sehingga aplikasi dapat terbuka secara instan (cold start) dan berjalan dengan performa maksimal tanpa waktu pemanasan (warm-up phase).

Rendering Engine: Skia vs Impeller #

Rendering Engine adalah subsistem inti di dalam Engine C++ yang memiliki tugas paling berat: merasterisasi instruksi visual tingkat tinggi menjadi piksel mentah pada kartu grafis perangkat. Sejarah perkembangan Flutter ditandai oleh peralihan besar dari engine grafis Skia menuju Impeller.

1. Era Skia dan Tantangan Shader Jank #

Skia adalah pustaka grafis 2D open-source legendaris buatan Google yang juga menjadi tulang punggung peramban Google Chrome dan OS Android. Skia menggunakan model Immediate Mode Rendering, di mana setiap instruksi gambar dieksekusi secara instan ke kartu grafis begitu perintah diterima.

Meskipun Skia sangat matang, ia memiliki satu kelemahan arsitektural yang fatal ketika digunakan dalam sistem UI deklaratif seperti Flutter, yaitu Shader Compilation Jank. Shader adalah program kecil yang dijalankan oleh kartu grafis (GPU) untuk menghitung warna piksel, bayangan, atau gradien. Skia menulis program shader ini dalam format GLSL (OpenGL Shading Language) dan melakukan kompilasi shader tersebut secara dinamis (Just-In-Time) saat aplikasi sedang berjalan tepat ketika transisi visual baru pertama kali ditampilkan.

Proses kompilasi GPU runtime ini memakan waktu sekitar 10 hingga 50 milidetik, yang menyebabkan drop frame (stuttering) yang sangat terasa oleh pengguna pada frame pertama animasi.

2. Era Impeller: Solusi Total Bebas Jank #

Untuk mengatasi keterbatasan fundamental Skia tersebut, tim Flutter mengembangkan Impeller — rendering engine baru yang dirancang khusus sejak awal untuk kebutuhan arsitektur Flutter.

flowchart TD
    subgraph SkiaJIT["Skia JIT Shader (Runtime)"]
        direction TB
        CodeRun["Aplikasi Berjalan"] -->|"Animasi Baru Muncul"| CheckCache{"Shader di Cache?"}
        CheckCache -->|"Tidak"| CompileGPU["Kompilasi GPU Dinamis (10-50ms)"]
        CompileGPU -->|"Menyebabkan Frame Drop (Jank)"| RenderSkia["Render Frame"]
        CheckCache -->|"Ya"| RenderSkia
    end
    subgraph ImpellerAOT["Impeller AOT Shader (Build Time)"]
        direction TB
        BuildApp["Kompilasi Aplikasi (Build Time)"] -->|"impellerc"| CompileAOT["Kompilasi ke MSL/SPIR-V"]
        CompileAOT -->|"Kemasan APK/IPA"| Distribute["Distribusi Paket Aplikasi"]
        Distribute -->|"Aplikasi Berjalan"| LoadShader["Muat Instan Shader dari Biner"]
        LoadShader -->|"Render Frame Mulus (0ms Delay)"| RenderImpeller["Render Frame"]
    end
        
    style SkiaJIT stroke:#f44336,stroke-width:2px
    style ImpellerAOT stroke:#4caf50,stroke-width:2px

Perbedaan arsitektural utama yang dibawa oleh Impeller meliputi:

  • Kompilasi Shader Ahead-Of-Time (AOT): Impeller memintas seluruh proses kompilasi shader saat runtime. Selama proses build aplikasi, alat kompilasi shader khusus bernama impellerc mengambil semua shader GLSL dalam proyek dan menerjemahkannya secara statis menjadi biner shader GPU platform target (format MSL untuk iOS/Metal atau SPIR-V untuk Android/Vulkan). Ketika aplikasi berjalan, biner shader ini langsung dimuat instan ke GPU tanpa ada jeda kompilasi sama sekali.
  • Model Retained Mode Rendering: Impeller melacak status visual aplikasi di GPU buffer secara cerdas. Jika hanya ada satu bagian UI kecil yang berubah, Impeller tidak menggambar ulang seluruh layar dari awal. Ia hanya memperbarui area yang berubah (tile-based rendering) dan menggunakan kembali cache GPU buffer untuk area visual lainnya.
  • Dukungan API Modern Native: Impeller membuang OpenGL abstraction layer yang sudah usang dan berkomunikasi langsung dengan API grafis modern kelas konsol seperti Metal milik Apple dan Vulkan milik Android untuk meminimalkan overhead driver CPU.

Text Layout — SkParagraph #

Menampilkan tulisan atau huruf di layar perangkat keras merupakan salah satu proses rekayasa grafis yang paling rumit. Tulisan bukan sekadar gambar bitmap mati; ia harus mendukung jutaan kombinasi karakter unicode, emoji berwarna, spasi baris, ligatur, font kustom, serta arah penulisan bidirectional (seperti teks bahasa Arab yang mengalir dari kanan ke kiri dicampur dengan teks Latin dari kiri ke kanan).

Untuk menangani kerumitan ini, Flutter Engine mengandalkan subsistem layout teks C++ yang sangat canggih bernama SkParagraph. Alur kerja layout teks di dalam engine mengikuti tahapan berikut:

flowchart TD
    TextInput["Teks Mentah (String)"] -->|"1. Segmentasi Unicode"| Seg["Pecah Karakter & Emoji"]
    Seg -->|"2. Bidirectional Analysis (BiDi)"| BiDi["Tentukan Arah (LTR/RTL)"]
    BiDi -->|"3. Font Matching"| Font["Pilih Font per Karakter"]
    Font -->|"4. Text Shaping (HarfBuzz)"| Shaping["Konversi Codepoint ke Glyph ID"]
    Shaping -->|"5. Glyph Layout (SkParagraph)"| Layout["Hitung Koordinat X/Y per Glyph"]
    Layout -->|"6. Rasterisasi (Impeller/Skia)"| Raster["Gambar Glyph ke Framebuffer"]
    
    style Shaping stroke:#0288d1,stroke-width:2px
    style Layout stroke:#388e3c,stroke-width:2px

Di dalam tahapan ke-4, engine mengintegrasikan pustaka HarfBuzz yang bertugas melakukan Text Shaping. HarfBuzz menganalisis kode biner huruf (codepoints) dan memetakannya menjadi representasi gambar huruf (glyphs) yang tepat setelah mempertimbangkan penyesuaian spasi antar huruf (kerning) dan kombinasi karakter tertentu.

Seluruh proses perhitungan geometri teks yang berat ini dilakukan dalam level C++ Engine agar tidak membebani performa runtime Dart aplikasi kita.

Compositor dan Layer Tree #

Sebelum diserahkan secara fisik ke Rendering Engine, Framework Layer Flutter menghasilkan sebuah objek struktur data yang disebut Layer Tree. Layer Tree adalah representasi UI abstrak yang dioptimalkan untuk compositing GPU.

Jenis-jenis Layer Inti #

Di dalam Layer Tree, antarmuka aplikasi kita dipecah menjadi beberapa jenis lapisan visual yang terstruktur:

  • PictureLayer: Lapisan dasar yang menampung instruksi gambar grafis 2D hasil rekaman dari CustomPainter.
  • TransformLayer: Menyimpan matriks transformasi 3D untuk rotasi, translasi, dan penskalaan visual pada anak lapisannya.
  • OpacityLayer: Menampung informasi transparansi alfa untuk diterapkan pada seluruh anak lapisan di bawahnya.
  • ClipRectLayer / ClipPathLayer: Menyimpan batasan geometri potong persegi atau kustom untuk memotong visual anak lapisan.
  • TextureLayer: Menyimpan tekstur gambar mentah dari luar, seperti aliran kamera langsung (live camera feed) atau pemutar video native.

Proses Compositing Flow #

Engine C++ memiliki komponen internal bernama Compositor Flow (sering disebut sebagai Flow oleh tim inti Flutter). Flow bertindak sebagai sutradara yang menerima objek Layer Tree dari Framework melalui API dart:ui.

Flow menganalisis struktur Layer Tree tersebut secara menyeluruh, menggabungkannya secara optimal (layer compositing), dan menghasilkan serangkaian perintah grafis GPU (Command Buffer) untuk dieksekusi secara instan oleh Impeller atau Skia ke dalam framebuffer layar.

flowchart TD
    Widget["1. Widget Tree (Framework)"] -->|"Rebuild"| Element["2. Element Tree (Framework)"]
    Element -->|"Layout & Paint"| Render["3. RenderObject Tree (Framework)"]
    Render -->|"Composite (SceneBuilder)"| Layer["4. Layer Tree (Framework)"]
    Layer -->|"dart:ui Binding"| Flow["5. Compositor (Flow - Engine C++)"]
    Flow -->|"GPU Submission"| GPU["6. GPU Commands (Impeller/Skia)"]
    GPU -->|"Rasterize"| Framebuffer["7. Framebuffer (Piksel Mentah)"]
    Framebuffer -->|"Present Surface"| Screen["8. Layar Fisik (OS/Hardware)"]
    
    style Flow stroke:#388e3c,stroke-width:2px
    style GPU stroke:#7b1fa2,stroke-width:2px

Task Runners — Empat Thread Flutter #

Untuk menjamin aplikasi kita tetap merespons input dengan cepat saat melakukan operasi berat (seperti memuat gambar berukuran besar), Flutter Engine mengadopsi arsitektur threading yang terisolasi dengan rapi. Arsitektur ini dijalankan di atas empat Task Runner (thread) utama yang dikelola secara asinkron:

1. UI Task Runner #

Thread ini bertugas mengeksekusi Dart VM isolate utama. Di sinilah seluruh logika bisnis aplikasi, pembaruan state (setState), siklus hidup widget, perhitungan layout, perekaman gambar (painting), dan pemrosesan masukan gestur berjalan. UI Task Runner menghasilkan Layer Tree dan mengirimkannya ke Raster Task Runner. Target alokasi waktu aman thread ini adalah 16,6ms per frame (untuk layar 60Hz) guna mencegah terjadinya hambatan performa.

2. Raster Task Runner (GPU Task Runner) #

Thread ini bertugas mengambil objek Layer Tree dari UI Task Runner dan mengubahnya menjadi instruksi biner GPU menggunakan engine Impeller atau Skia. Raster Task Runner berjalan secara paralel di latar belakang. Saat Raster Task Runner sedang sibuk mengirimkan frame ke GPU, UI Task Runner diperbolehkan untuk langsung memproses kalkulasi tata letak untuk frame berikutnya tanpa harus menunggu proses rasterisasi GPU selesai.

3. IO Task Runner #

Thread latar belakang yang bertugas menangani tugas-tugas I/O yang berat dan memakan banyak waktu, seperti membaca dan mendekode file gambar dari penyimpanan lokal menjadi tekstur mentah GPU, mengunduh aset dari server internet, atau menulis database. Setelah IO Task Runner selesai mendekode gambar, ia mengirimkan data tekstur yang sudah matang langsung ke Raster Task Runner untuk dirender tanpa pernah memblokir jalannya UI Task Runner.

4. Platform Task Runner #

Thread utama dari sistem operasi native (UI thread asli Android/iOS). Thread ini digunakan oleh Platform Embedder untuk menangani interaksi langsung dengan API sistem operasi, memproses pesan dari Platform Channels (MethodChannel), mengelola daur hidup sistem, serta mendengarkan event perangkat keras fisik (seperti orientasi layar atau tombol volume fisik).

dart:ui — Interface antara Engine dan Framework #

Engine C++ menyediakan jembatan komunikasi tingkat paling rendah bagi bahasa pemrograman Dart melalui pustaka bawaan SDK bernama dart:ui. Pustaka ini mendefinisikan seluruh binding native C++ ke kelas Dart.

Sebagai pengembang aplikasi biasa, kita jarang sekali mengimpor dart:ui secara langsung karena kita telah dimanjakan oleh kemudahan visual yang ditawarkan oleh Material dan Cupertino Widget. Namun, di dalam rekayasa grafis kustom yang ekstrem, kita dapat memanfaatkannya langsung:

import 'dart:ui' as ui;

// BENAR: Menggunakan API dart:ui langsung untuk memicu manipulasi piksel mentah
void paintRawText(ui.Canvas canvas) {
  final paragraphBuilder = ui.ParagraphBuilder(
    ui.ParagraphStyle(
      textDirection: ui.TextDirection.ltr,
      fontSize: 20,
      fontWeight: ui.FontWeight.bold,
    ),
  )
    ..addText('Teks Mentah Engine');

  final paragraph = paragraphBuilder.build()
    ..layout(const ui.ParagraphConstraints(width: 300));

  // Menggambar paragraph langsung di canvas koordinat fisik
  canvas.drawParagraph(paragraph, const ui.Offset(20.0, 50.0));
}

Flutter GPU — Masa Depan Rendering Kustom #

Mulai tahun 2025, integrasi erat Impeller membuka babak baru bagi arsitektur Flutter dengan diperkenalkannya Flutter GPU API. Ini adalah pustaka rendering 3D dan shader tingkat rendah eksperimental yang dapat diakses langsung menggunakan bahasa Dart.

Melalui Flutter GPU API, kita dapat:

  • Menulis program shader GLSL kustom secara bebas dan melampirkannya langsung ke objek pipeline grafis.
  • Mengimpor model-model visual 3D kompleks menggunakan format glTF (Graphics Language Transmission Format).
  • Mengembangkan game 3D berkinerja tinggi atau efek grafis interaktif kustom (seperti simulasi air dinamis atau partikel 3D) langsung di atas Flutter tanpa memerlukan game engine pihak ketiga seperti Unity.

Fitur ini berjalan secara optimal karena Impeller telah menyediakan infrastruktur shader AOT statis yang sangat stabil untuk mendukung kompilasi pipeline shader kustom tersebut secara aman sejak awal.

Ringkasan #

  • Bahan Dasar Engine — Flutter Engine ditulis dalam C++, bersifat platform-agnostic, dan mengorkestrasi segalanya dari Dart runtime hingga piksel GPU.
  • Model Konkurensi Isolate — Dart VM menggunakan Isolate yang memiliki heap memori mandiri, sehingga membebaskan GC dari kebutuhan penguncian sinkronisasi data yang lambat.
  • Dual Compiler VM — Mengemas JIT compiler untuk mendukung Hot Reload cepat saat pengembangan, serta AOT compiler untuk memproduksi biner native berkinerja tinggi saat rilis produksi.
  • Evolusi Rendering — Beralih dari Skia (Immediate Mode dengan Shader Jank runtime JIT) ke Impeller (Retained Mode dengan kompilasi shader AOT build-time) untuk performa visual mulus bebas lag.
  • Komposisi Teks SkParagraph — Mengintegrasikan modul HarfBuzz untuk text shaping tingkat tinggi dan SkParagraph untuk pemrosesan layout unicode bidirectional yang cepat di tingkat C++.
  • Compositor Flow — Flow bertindak sebagai komponen internal engine yang mengolah data Layer Tree dari Framework menjadi biner GPU Command Buffer.
  • Model Empat Thread — Memisahkan beban kerja ke dalam thread UI, Raster, IO, dan Platform secara asinkron agar proses rendering grafis tidak menghambat responsivitas input pengguna.
  • Integrasi Flutter GPU — Membuka akses pemrograman grafis 3D dan custom shader dinamis langsung dari Dart menggunakan fondasi rendering modern milik Impeller.

← Sebelumnya: Framework Layer   Berikutnya: Platform Embedder →

About | Author | Content Scope | Editorial Policy | Privacy Policy | Disclaimer | Contact