Belajar Flutter - Sejarah, Latar Belakang & Mengapa Memilih Flutter

#Pendahuluan

Environment kalian sudah siap dari episode 0. Sekarang saatnya memahami mengapa Flutter ada dan mengapa kalian harus memilihnya. Sebelum menulis widget, kalian perlu tahu sejarah panjang yang membentuk cara Flutter bekerja hari ini — karena arsitektur renderingnya adalah jawaban langsung atas masalah yang dihadapi pengembangan mobile lintas platform.

Episode 1 membedah perjalanan Flutter dari proyek eksperimen internal Google sampai framework dengan jutaan developer: arsitektur rendering Skia dan Impeller, keunggulan single codebase, perbandingan langsung dengan native, React Native, dan Xamarin, serta use case di mana Flutter benar-benar unggul.

Materi dibagi menjadi empat bagian. Pertama kita melihat sejarah dan arsitektur rendering yang menjadi fondasi Flutter, lalu keunggulan single codebase dan alur kerja hot reload. Setelah itu kita bandingkan Flutter dengan pendekatan alternatif secara jujur, dan terakhir kita petakan use case yang paling masuk akal untuk setiap kategori aplikasi. Dengan peta ini, keputusan memilih framework untuk project berikutnya menjadi jauh lebih terarah.

#Sejarah Flutter dan Arsitektur Renderingnya

#Dari Sky hingga Flutter 1.0

Flutter berawal dari proyek internal Google bernama Sky yang dikembangkan di tahun 2015 untuk menguji apakah mungkin membangun UI yang konsisten di 60 frame per detik. Pendekatannya radikal: daripada menerjemahkan widget ke kontrol native, Flutter menggambar seluruh antarmuka sendiri langsung ke kanvas.

Arsitektur inilah yang membuat Flutter unik. Flutter memakai Skia sebagai rendering engine, dan sejak versi 3.7 mulai bertransisi ke Impeller — engine rendering berbasis GPU yang menghilangkan stuttering saat cold start. Karena Flutter menggambar semuanya sendiri, tampilan aplikasi identik di Android, iOS, web, dan desktop, apa pun kebiasaan platform.

Implikasi dari pendekatan ini penting untuk dipahami. Ketika kalian menulis widget di Flutter, widget tersebut tidak diterjemahkan menjadi tombol atau text field native dari sistem operasi, melainkan digambar piksel demi piksel di atas layar. Hasilnya adalah konsistensi visual yang sulit ditandingi framework lain, dan inilah alasan mengapa aplikasi Flutter terasa sama mulusnya di perangkat dengan spesifikasi beragam.

#Dart: Bahasa yang Didesain untuk Flutter

Flutter memakai Dart — bahasa dengan JIT (just-in-time) untuk hot reload saat pengembangan, dan AOT (ahead-of-time) untuk performa rilis. Kombinasi ini memberi dua keunggulan sekaligus: siklus pengembangan cepat dan runtime yang cepat.

flutter --version

Output menampilkan versi Flutter dan Dart yang aktif di mesin kalian. Perintah flutter --version juga berguna untuk memastikan kalian berada di channel stable.

Jika versi kalian sudah tertinggal dari rilis resmi terbaru, perbarui dulu sebelum melanjutkan series. Contoh kode di semua episode diasumsikan berjalan di Flutter versi terbaru, sehingga perilaku yang kalian lihat akan sama dengan apa yang dijelaskan di sini.

#Keunggulan Single Codebase

#Satu Kode, Banyak Platform

Keunggulan utama Flutter: tulis satu codebase, jalankan di iOS, Android, web, Windows, macOS, dan Linux. UI yang digambar sendiri berarti kode UI tidak perlu diadaptasi per platform. Ini memangkas biaya pengembangan dan menjaga konsistensi produk.

Dari sisi tim, satu codebase berarti satu bahasa, satu set tool, satu pipeline test, dan satu jalur rilis. Untuk startup dan tim kecil, keuntungan ini sering kali menjadi faktor penentu.

#Hot Reload dan Hot Restart

Dengan JIT, Flutter menyediakan hot reload: perubahan kode tercermin di layar dalam hitungan detik tanpa kehilangan state aplikasi. Ini mempercepat iterasi UI secara drastis dibanding native development yang harus mengulang compile. Alur kerjanya menjadi: ubah kode, simpan file, lihat hasilnya — siklus yang membuat eksperimen desain terasa ringan.

flutter run

flutter run membangun dan meluncurkan aplikasi di device atau emulator aktif, lalu menunggu perintah hot reload dengan menekan huruf r di terminal. Setelah aplikasi berjalan, perhatikan kecepatan iterasi: setiap tekanan tombol r hanya mengganti widget yang berubah, tanpa membangun ulang seluruh project.

Hot restart, dengan huruf R, tetap mempertahankan hot reload untuk perubahan yang melibatkan lebih banyak state. Alur kerja ini membuat eksperimen desain menjadi jauh lebih murah, dan menjadi alasan kuat Flutter digemari untuk rapid prototyping.

#Perbandingan dengan Pendekatan Lain

#Flutter vs Native Development

Native development (Kotlin di Android, Swift di iOS) memberi akses penuh ke platform API dan performa terbaik. Namun, biayanya dua codebase penuh. Flutter menawarkan penghematan besar dengan trade-off kecil pada akses API yang sangat spesifik — yang biasanya bisa diatasi dengan plugin atau platform channel (episode 12).

#Flutter vs React Native

React Native menerjemahkan komponen JavaScript ke widget native, sehingga tampilan mengikuti gaya sistem operasi. Flutter menggambar sendiri UInya, sehingga konsistensi lintas platform lebih terjaga. React Native memakai ekosistem JavaScript yang besar, sedangkan Flutter menawarkan toolchain terintegrasi dan dokumentasi terpusat.

#Flutter vs Xamarin

Xamarin (kini .NET MAUI) memakai C# dan bindings native untuk menyusun UI. Flutter mengemas runtime Dart dan rendering engine sendiri, menghasilkan bundle yang lebih besar namun perilaku yang lebih konsisten di setiap platform. Xamarin lebih cocok untuk tim yang sudah dalam ekosistem .NET; Flutter lebih netral terhadap latar belakang bahasa.

#Use Cases Flutter

#Mobile Apps

Kategori paling matang: aplikasi consumer dengan UI kompleks, animasi halus, dan kebutuhan rilis serentak di dua app store. Toko retail, aplikasi finansial, hingga super app masuk kategori ini. Performa tinggi dan rendering konsisten menjadikan Flutter pilihan kuat untuk aplikasi yang mengutamakan pengalaman visual yang seragam di semua device.

#Web Apps dan PWA

Dengan CanvasKit, Flutter web menghasilkan pengalaman yang mendekati aplikasi desktop. Untuk aplikasi internal dan tooling dashboard, Flutter web sangat efisien karena memakai codebase yang sama dengan aplikasi mobile.

#Desktop Apps

Flutter desktop (Windows, macOS, Linux) memakai renderer sama dengan mobile. Produktivitas dan tooling internal adalah use case utama, terutama karena distribusi cukup lewat bundle mandiri.

#Embedded

Flutter juga berjalan di device embedded berkat dukungan runtime tanpa UI bawaan — fondasi yang sama dengan inisiatif Flutter untuk fuchsia dan perangkat pintar.

flutter config --enable-linux-desktop
flutter config --enable-macos-desktop
flutter config --enable-windows-desktop

flutter config --enable-linux-desktop mengaktifkan target desktop sehingga project yang sama bisa dijalankan di Linux, selain mobile dan web.

Setelah mengaktifkan platform, flutter run -d linux menjalankan aplikasi sebagai aplikasi desktop native. Coba kombinasikan dengan hot reload: perubahan UI langsung terlihat tanpa membangun ulang aplikasi, pengalaman yang sama dengan pengembangan mobile.

#Penutup

Inti yang harus dibawa pulang:

• Flutter lahir dari proyek Sky untuk membuktikan UI 60 fps lintas platform.
• Flutter menggambar sendiri antarmukanya via Skia dan Impeller, bukan menerjemahkan ke native widget.
• Dart memadukan JIT untuk hot reload dan AOT untuk performa rilis.
• Single codebase menuju mobile, web, dan desktop memangkas biaya dan menjaga konsistensi.
• Bandingkan Flutter dengan native, React Native, dan Xamarin berdasarkan kebutuhan tim dan produk.
• Use case utama: mobile apps, web, desktop, dan embedded.

Di episode 2 selanjutnya kita akan masuk ke konsep dasar dan arsitektur Flutter — bagaimana Widgets, rendering engine, dan Dart runtime bekerja sama, model reactive UI dan widget lifecycle, hubungan widget tree, element tree, dan render tree, serta model compile JIT dan AOT dengan hot reload. Fondasi ini menentukan cara kalian berpikir saat menulis Flutter.