Flutter — konsep kunci, arsitektur dan widget

Apa itu Flutter

Flutter adalah SDK (Software Development Kit) dan framework untuk membuat antarmuka pengguna, diumumkan oleh Google pada tahun 2015. Versi stabil pertama Flutter 1.0 dirilis pada Desember 2018. Tidak seperti React Native, Flutter tidak menggunakan jembatan antara JavaScript dan kode native — ia dikompilasi langsung ke instruksi native prosesor.

Fitur kunci Flutter adalah mesin renderingnya sendiri. Framework ini tidak bergantung pada UIKit (iOS) atau sistem View Android. Sebagai gantinya, Flutter menggambar setiap piksel secara mandiri melalui Skia (hingga 2024) atau mesin baru Impeller. Ini menjamin tampilan aplikasi yang sama di semua platform dan menghilangkan masalah adaptasi ke berbagai versi OS.

Menurut data Statista 2024, Flutter menempati peringkat pertama di antara framework lintas platform dalam popularitas: sekitar 46% pengembang menggunakannya untuk pengembangan mobile. Framework ini digunakan dalam proyek Google Pay, Alibaba, eBay, BMW dan Tencent.

Sejarah dan versi Flutter

Versi alpha pertama Flutter dipresentasikan di Dart Developer Summit pada tahun 2015 dengan nama Sky. Pada tahun 2018, Flutter 1.0 dirilis dengan dukungan hanya untuk iOS dan Android. Flutter 2.0 (2021) menambahkan Web dan Desktop. Flutter 3.0 (2022) memperkenalkan dukungan stabil untuk macOS dan Linux. Flutter 3.16 (2023) menghadirkan Impeller — mesin rendering baru berbasis Metal dan Vulkan.

Versi Flutter 3.22 (2024) menyertakan Impeller secara default di iOS, dukungan yang ditingkatkan untuk Material Design 3, Dart 3.4 dengan ekstensi makro dan dukungan bawaan untuk Native Assets untuk akses langsung ke sumber daya platform. Google melaporkan bahwa Impeller mengurangi jank (kehilangan bingkai) hingga 90% dibandingkan dengan Skia.

Bahasa Dart

Dart adalah bahasa pemrograman yang dibuat oleh Google pada tahun 2011 dan digunakan di Flutter. Dart menggabungkan pengetikan ketat dengan kemampuan kompilasi JIT (untuk Hot Reload) dan kompilasi AOT (untuk versi produksi). Dart 3.0 (2023) memperkenalkan pattern matching, sealed class dan records sebagai fitur stabil.

Null safety di Dart — fitur wajib yang diperkenalkan sejak versi 2.12. Kompiler memeriksa semua tipe nullable pada tahap pembuatan, menghilangkan NullPointerException saat runtime. Tipe data (int, String, bool) secara default non-nullable, dan untuk nilai nullable digunakan akhiran ? (misalnya, String? name).

Arsitektur Flutter

Arsitektur Flutter dibangun berdasarkan prinsip tiga lapisan. Lapisan bawah — mesin (C/C++), bertanggung jawab untuk rendering, input/output dan akses ke API platform. Lapisan tengah — framework (Dart), mengimplementasikan sistem widget, gesture, animasi dan navigasi. Lapisan atas — aplikasi (Dart), yang mengumpulkan widget ke dalam pohon.

Widget dan pohon widget

Di Flutter semuanya adalah widget. Widget terdiri dari dua jenis: StatelessWidget (tidak dapat diubah, tidak menyimpan status) dan StatefulWidget (dapat diubah, mengelola status melalui State). Pohon widget (Widget Tree) adalah struktur hierarkis di mana setiap widget anak bersarang di dalam induk. Scaffold, AppBar, Container, Text, Column, Row — blok bangunan dasar.

BuildContext adalah objek yang meneruskan posisi widget di pohon. MediaQuery.of(context) mendapatkan ukuran layar, Theme.of(context) — tema saat ini. BuildContext digunakan untuk navigasi (Navigator.of(context)), akses ke InheritedWidget dan terjemahan locale melalui Localizations.of.

Mesin Impeller

Impeller adalah mesin rendering Flutter modern, ditulis dalam C++ dan menggunakan Metal (iOS/macOS) dan Vulkan (Android). Tidak seperti Skia yang menggambar ulang setiap bingkai dari awal, Impeller mengompilasi shader terlebih dahulu dan menyimpannya di cache. Ini menghilangkan penundaan pada rendering pertama adegan kompleks dan mengurangi beban GPU.

Pengujian Google Flutter Team menunjukkan bahwa Impeller mengurangi waktu kompilasi shader dari 200–500 ms (Skia) menjadi 1–3 ms. Di iPhone 13 Pro, rendering Impeller mencapai 120 FPS tanpa kehilangan bingkai. Di Android dengan Vulkan, 60 FPS stabil bahkan pada perangkat kelas menengah (Xiaomi Redmi Note 12).

Contoh aplikasi di Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Aplikasi Flutter')),
        body: const Center(
          child: Text('Halo, Flutter!'),
        ),
      ),
    );
  }
}

Keuntungan Flutter

Basis kode tunggal — keuntungan utama Flutter. Satu proyek di Dart dikompilasi untuk iOS, Android, Web, Windows, macOS dan Linux. Menurut perkiraan Google, ini mengurangi waktu pengembangan sebesar 30–50% dibandingkan dengan proyek iOS dan Android terpisah. Alibaba mengurangi waktu rilis versi sebesar 30% setelah beralih ke Flutter.

Kinerja Flutter mendekati native. Kompilasi AOT Dart ke kode mesin ARM dan x86_64 menghilangkan penundaan interpretasi. Mesin Impeller menjamin 60 FPS bahkan pada perangkat tahun 2018 (iPhone XR, Samsung Galaxy S9). Menurut Google, 99,5% bingkai di aplikasi Flutter dirender tanpa kehilangan.

Hot Reload — teknologi pembaruan kode instan. Pengembang mengubah kode sumber, menyimpan file, dan Flutter membangun ulang pohon widget dalam 300–800 ms tanpa kehilangan status aplikasi saat ini. Ini mempercepat iterasi desain UI: margin, warna dan animasi dapat diubah dalam hitungan detik tanpa menunggu pembangunan ulang penuh.

Material Design 3 dan bahasa desain khusus Cupertino (gaya iOS) disertakan dalam paket standar Flutter. Widget Material 3 mendukung warna dinamis (Material You), tata letak adaptif dan animasi transisi antar layar. CupertinoPageTransition dan CupertinoNavigationBar meniru perilaku navigator iOS native.

Kustomisasi widget tidak memerlukan pembuatan View khusus di setiap platform. Cukup dengan menimpa build() dan mengembalikan widget baru. Paket animation (AnimatedContainer, Hero, TweenAnimationBuilder) dan gesture (GestureDetector, Dismissible) mencakup 95% skenario animasi UI tanpa menulis kode platform.

Ekosistem dan paket Flutter

pub.dev — registri paket resmi untuk Dart dan Flutter. Per Juli 2024, lebih dari 45.000 paket telah dipublikasikan di registri. Instalasi paket dilakukan dengan perintah flutter pub add . Pub secara otomatis menyelesaikan dependensi, memeriksa kompatibilitas versi dan menghasilkan pubspec.lock.

Manajemen status di Flutter — salah satu tugas arsitektur utama. Selain flutter_bloc, solusi populer: Provider (direkomendasikan oleh Google, menggunakan InheritedWidget), Riverpod (versi Provider yang dirancang ulang dengan keamanan waktu kompilasi) dan GetX (semua-dalam-satu: status, routing, DI). Provider tetap yang paling sederhana untuk memulai: ChangeNotifierProvider membungkus model, dan Consumer menggambar ulang widget saat data berubah.

Pengujian di Flutter didukung di tiga tingkat. Pengujian unit (flutter test) memeriksa fungsi dan kelas tanpa UI. Pengujian widget (testWidgets) merender widget individual di lingkungan terisolasi. Pengujian integrasi (IntegrationTest) menjalankan aplikasi lengkap di perangkat atau simulator. Flutter 3.22 menambahkan dukungan untuk patch test melalui analisis patch dan laporan cakupan kode yang ditingkatkan.

Paket populer

dio — klien HTTP dengan dukungan untuk interceptor, timeout dan FormData. Digunakan di 40% proyek Flutter di GitHub. Dio mendukung penyadapan permintaan untuk logging, percobaan ulang dan penambahan token otorisasi. Pustaka paling populer kedua — retrofit, menghasilkan klien API yang diketik.

flutter_bloc — pustaka manajemen status berdasarkan pola BLoC (Business Logic Component). BlocProvider meneruskan status ke bawah pohon widget, BlocBuilder menggambar ulang UI saat status berubah, dan BlocListener menjalankan efek samping (navigasi, SnackBar). Cubet — versi sederhana BLoC tanpa event.

go_router — navigasi deklaratif untuk Flutter dari Google. Rute dijelaskan dalam konfigurasi GoRouter dengan dukungan untuk rute bersarang, pengalihan dan deep link. ShellRoute membagi navigasi ke tab BottomNavigationBar. GoRouter 14.0 mendukung jalur type-safe dan StatefulShellRoute dengan mempertahankan status tab.