Flutter adalah toolkit UI (kumpulan pustaka dan alat untuk membangun antarmuka pengguna) dari Google untuk membuat aplikasi yang berjalan pada iOS, Android, web, Windows, macOS, dan Linux dari satu basis kode. Topik ini membahas cara Flutter menggambar antarmukanya sendiri melalui mesin rendernya, arsitektur berlapis yang mendasarinya, serta kelebihan dan trade-off (pengorbanan yang menyertai keuntungan) pendekatan tersebut. Setelah topik ini dibaca, posisi Flutter di antara pendekatan pengembangan aplikasi lain dapat dinilai secara berimbang.
Flutter sebagai toolkit UI lintas platform#
Flutter adalah proyek open source yang dikembangkan Google, dan versi stabil pertamanya dirilis pada Desember 2018. Posisinya bukan bahasa pemrograman, melainkan framework (kerangka kerja) lengkap yang memuat pustaka widget, mesin render, dan alat baris perintah. Aplikasi yang dibangun dengannya ditulis dalam bahasa Dart, sedangkan hasil akhirnya terpasang seperti aplikasi biasa pada masing-masing platform.
Sifat lintas platform (cross-platform) berarti satu proyek Dart dapat dibangun (build) untuk beberapa target tanpa ditulis ulang. Sebagian besar kode dibagikan di antara target, sedangkan bagian yang memang khusus platform, misalnya izin Android atau ikon aplikasi iOS, tetap dikonfigurasi pada proyek host masing-masing. Bagi aplikasi yang harus tersedia di lebih dari satu platform, pembagian satu basis kode ini menekan biaya perawatan sekaligus menjaga perilaku aplikasi tetap selaras antarplatform.
Penyusun dasar UI pada Flutter disebut widget, yaitu unit tampilan yang dapat disusun menjadi antarmuka yang lebih besar. Flutter menyediakan dua rangkaian widget bawaan yang meniru bahasa desain platform, yaitu Material dan Cupertino, sehingga pengembang dapat memilih gaya visual tanpa pustaka tambahan. Seluruh tampilan, mulai dari tombol dan teks sampai struktur tata letak, tersusun atas widget secara bertingkat.
Cara Flutter merender antarmuka#
Sebagian besar framework lintas platform bekerja dengan menerjemahkan widgetnya menjadi komponen antarmuka bawaan sistem operasi (native), lalu menyisipkan hasil terjemahan itu ke dalam aplikasi. Flutter mengambil jalan berbeda. Framework menyusun deskripsi UI dari widget, kemudian engine (mesin yang menggambar UI) merasterisasi seluruh piksel layar sendiri tanpa meminta bantuan komponen bawaan platform. Pendekatan ini sering disebut self-drawing, yaitu menggambar sendiri.
Tabel berikut membandingkan ketiga pendekatan tersebut.
| Pendekatan | Basis kode | Cara UI dibangun |
|---|---|---|
| Native murni (Kotlin atau Swift) | satu basis kode per platform | komponen UI bawaan sistem operasi |
| Lintas platform penerjemah | satu basis kode | widget diterjemahkan ke komponen native |
| Lintas platform mandiri (Flutter) | satu basis kode | seluruh UI digambar engine Flutter sendiri |
Konsekuensi penggambaran mandiri adalah tampilan yang konsisten antarplatform. Widget yang sama dirender dengan hasil yang sama pada Android dan iOS karena tidak ada perbedaan perilaku komponen native di antara keduanya. Konsekuensi lain dari pendekatan ini ada pada sisi pembaruan. Aplikasi Flutter tidak otomatis mengikuti perubahan gaya komponen native sistem operasi, sehingga pembaruan tampilan mengikuti ritme rilis Flutter.
Engine yang menggambar UI itu ditulis dalam C dan C++. Tugasnya merasterisasi (mengubah deskripsi UI menjadi piksel) setiap frame (satuan gambar yang ditampilkan), menyediakan tata letak teks, I/O berkas dan jaringan, serta runtime (lingkungan eksekusi) Dart. Dahulu engine merender melalui pustaka grafis Skia, sedangkan pada Flutter 3.47 renderer bawaannya di iOS dan Android adalah Impeller. Impeller menyusun kumpulan shader (program kecil yang menentukan cara piksel diwarnai) lebih awal pada saat engine dibangun, sehingga kompilasi shader tidak terjadi saat aplikasi berjalan dan animasi pertama tidak tersendat oleh pekerjaan itu. Perangkat Android yang lebih lama dari API 29 atau tidak mendukung Vulkan beralih secara otomatis ke renderer Skia berbasis OpenGL tanpa tindakan tambahan dari pengembang.
Arsitektur berlapis#
Cara kerja di atas dapat dibaca dari arsitektur berlapis Flutter. Lapisan paling atas adalah aplikasi, yaitu kode Dart yang memuat logika aplikasi dan menyusun widget. Di bawahnya, framework menyediakan API tingkat tinggi bagi aplikasi, mulai dari kerangka widget, lapisan rendering, sampai dukungan gesture serta aksesibilitas. Lapisan berikutnya adalah engine yang merasterisasi hasil komposisi widget menjadi piksel dan menjalankan runtime Dart. Lapisan paling bawah adalah platform, yaitu sistem operasi tempat aplikasi dikemas seperti aplikasi native, yang menyediakan permukaan gambar, masukan, dan event loop (antrian peristiwa) melalui embedder, kode yang menjembatani engine dengan sistem operasi.
Diagram berikut merangkum empat lapisan itu beserta arah ketergantungannya. Setiap lapisan hanya berkomunikasi dengan lapisan tepat di bawahnya: kode aplikasi memanggil framework, framework meneruskan pekerjaan ke engine, dan engine menampilkan piksel di layar melalui platform. Susunan ini pula yang membuat dukungan platform baru dapat ditambahkan pada lapisan terbawah tanpa mengubah cara aplikasi ditulis.
Kelebihan dan trade-off#
Keuntungan utama pendekatan Flutter terletak pada satu basis kode. Logika, tampilan, dan perbaikan bug cukup ditulis sekali untuk semua platform, sedangkan UI yang digambar sendiri menjaga hasil visual tetap konsisten. Saat aplikasi dirilis, kode Dart dikompilasi AOT (ahead-of-time, dikompilasi penuh sebelum aplikasi disebarkan) menjadi kode mesin native. Saat pengembangan, hot reload memperlihatkan perubahan kode dalam waktu singkat tanpa menghilangkan state (kondisi aplikasi yang sedang berjalan). Ekosistem package (paket pustaka siap pakai) di pub.dev menyediakan akses ke banyak kemampuan platform, seperti kamera dan penyimpanan.
Keuntungan itu disertai pengorbanan yang perlu dipahami sejak awal:
- Ukuran aplikasi dasar lebih besar. Engine dan framework dibawa di dalam setiap aplikasi, sehingga aplikasi sekecil apa pun memiliki ukuran minimum yang lebih tinggi daripada aplikasi native minimalis.
- Bahasa Dart perlu dipelajari. Sintaksnya akrab bagi pembaca yang pernah menyentuh Java atau JavaScript, tetapi tetap satu bahasa baru yang harus dikuasai lebih dahulu.
- Akses fitur platform bergantung pada plugin. Kemampuan seperti sensor, Bluetooth, atau penyimpanan diakses melalui package, dan apabila plugin yang tersedia belum memenuhi kebutuhan, kode native tambahan harus ditulis sendiri.
- Tampilan tidak mengikuti komponen native secara otomatis. Perubahan gaya komponen native sistem operasi hanya tampak pada aplikasi Flutter setelah rilis Flutter yang memuat pembaruan widget tersebut.
Kesalahan umum#
Empat salah paham paling sering muncul saat Flutter baru dikenal:
- Menganggap Flutter sebagai bahasa pemrograman. Flutter adalah toolkit, sedangkan bahasanya adalah Dart. Kebiasaan menyebut keduanya dengan satu nama membuat pencarian dokumentasi melenceng, sehingga pemakaian kedua istilah sebaiknya dipisahkan sejak awal.
- Menganggap widget Flutter diterjemahkan menjadi komponen native. Widget dikomposisi pada framework dan digambar engine, bukan disisipkan sebagai komponen bawaan platform. Pemahaman ini menjelaskan mengapa tampilan Flutter konsisten antarplatform.
- Menganggap satu basis kode berarti tanpa kode khusus platform sama sekali. Sebagian besar kode memang dibagikan, tetapi izin, ikon, konfigurasi build, dan sebagian fitur tetap menyentuh proyek host tiap platform, sehingga perencanaan yang realistis menyisakan porsi pekerjaan untuk bagian yang khusus platform tersebut.
- Menganggap hot reload dan hot restart sama. Hot reload menyuntikkan kode yang diubah ke aplikasi yang masih berjalan tanpa membuang state-nya, sedangkan hot restart memulai ulang aplikasi dari awal dan mengosongkan seluruh state.
Ringkasan#
- Flutter adalah toolkit UI dari Google yang membangun aplikasi iOS, Android, web, dan desktop dari satu basis kode Dart.
- Flutter menggambar seluruh UI-nya sendiri melalui engine tanpa menerjemahkan widget menjadi komponen native, dan pada Flutter 3.47 renderer bawaannya di iOS dan Android adalah Impeller yang menggantikan peran Skia.
- Arsitekturnya berlapis dari atas ke bawah: aplikasi Dart, framework (widgets dan rendering), engine (Impeller dan runtime Dart), serta platform melalui embedder.
- Trade-off utamanya meliputi ukuran aplikasi dasar yang lebih besar, kebutuhan mempelajari Dart, dan akses fitur platform yang bergantung pada ekosistem plugin.
Referensi#
- Flutter documentation — Google — Dokumentasi resmi Flutter yang menjadi rujukan utama jalur ini.
- Flutter architectural overview — Google — Penjelasan resmi lapisan aplikasi, framework, engine, dan embedder beserta model rendering Flutter.
- Build for and integrate with multiple platforms — Google — Rincian dukungan platform, termasuk web dan desktop, beserta penyetelannya.