Memahami FPS pada Flutter: Kunci Utama Aplikasi Android & iOS yang Super Mulus

Pernahkah Anda menggunakan aplikasi yang terasa sangat mulus saat di-scroll, tetapi aplikasi lain terasa patah-patah (lagging)? Di dunia pengembangan aplikasi seluler, kenyamanan visual tersebut sangat ditentukan oleh satu variabel kunci: FPS (Frames Per Second).

Bagi developer Flutter, memahami FPS bukan sekadar persoalan angka, melainkan kunci untuk menciptakan User Experience (UX) kelas atas. Artikel ini membahas secara mendalam apa itu FPS, standar performa yang bagus, hingga faktor teknis yang membuatnya tinggi dan stabil.




Apa Itu FPS pada Flutter?

FPS (Frames Per Second) adalah jumlah bingkai atau gambar yang digambar (rendered) oleh mesin aplikasi ke layar perangkat dalam waktu satu detik.

Di Flutter, setiap tampilan UI dibuat melalui alur kerja dua proses (thread) utama:
1. UI Thread (Dart VM): Menjalankan logika aplikasi, mengeksekusi metode

build()

, menghitung layout, dan positioning.
2. Raster Thread (GPU): Mengambil instruksi dari UI Thread dan mengubahnya menjadi piksel nyata di layar.

---

Benchmark & Standar Kategori FPS

Untuk menentukan apakah performa aplikasi Flutter Anda sudah ideal atau belum, berikut adalah tolok ukurnya:

**High Refresh Rate**
• Nilai FPS: 90 – 120 FPS
• Status Performa: Ultra Smooth
• Pengalaman Pengguna (UX): Sangat mulus pada layar HP modern (90Hz/120Hz).

**Ideal / Standard**
• Nilai FPS: 60 FPS
• Status Performa: Sangat Baik (Target)
• Pengalaman Pengguna (UX): Standar emas aplikasi mobile. Bebas dari stuttering.

**Acceptable**
• Nilai FPS: 50 – 59 FPS
• Status Performa: Cukup Baik
• Pengalaman Pengguna (UX): Masih nyaman, hanya ada sesekali penurunan kecil (minor drop).

**Stuttering / Jank**
• Nilai FPS: 30 – 49 FPS
• Status Performa: Buruk
• Pengalaman Pengguna (UX): Mulai terasa patah-patah saat animasi atau scroll cepat.

**Severe Lag**
• Nilai FPS: < 30 FPS
• Status Performa: Sangat Buruk
• Pengalaman Pengguna (UX): Sangat berat, lagging, dan merusak pengalaman pengguna.

---

Rahasia 16.6 Milidetik (*Frame Budget*)

Agar aplikasi dapat berjalan di 60 FPS, Flutter hanya memiliki batas waktu 16,6 milidetik (ms) untuk menyelesaikan 1 frame (1000 ms ÷ 60 frame = 16.6 ms/frame).

Catatan: Jika Anda mengincar layar 120 Hz, batas waktu per frame makin ketat, yaitu 8.3 ms.

Jika pengolahan di UI Thread dan Raster Thread memakan waktu lebih dari 16.6 ms, frame tersebut akan terlambat ditampilkan. Fenomena keterlambatan frame ini dalam istilah Flutter disebut sebagai Jank (patah-patah).

---

Faktor Penyebab FPS Tinggi & Stabil di Flutter

Mencapai 60 FPS yang konsisten memerlukan kombinasi antara efisiensi kode Dart dan pengolahan grafis yang optimal. Berikut faktor-faktor utamanya:

1. Optimalisasi Rebuild Widget (UI Thread)
Konstruktor

const

: Menggunakan keyword

const

pada widget statis mendaftarkan widget ke compile-time memory, sehingga Flutter tidak perlu membuat ulang widget tersebut saat rebuild*.
Scoping State yang Presisi: Menggunakan state management (seperti Riverpod, Bloc, atau Provider) untuk memperbarui widget yang membutuhkan pembaruan saja, bukan rebuild seluruh pohon widget (widget tree*).
* Metode

build()

yang Ringan: Hindari menjalankan fungsi berat, iterasi besar, atau panggilan API/I/O di dalam metode

build()

.

2. Pengolahan Grafis & Efisiensi GPU (Raster Thread)
Membatasi Widget Berat GPU: Penggunaan

Opacity

transparan,

BackdropFilter

(blur), dan

ClipRRect

secara berlebihan memaksa GPU bekerja ekstra keras (offscreen rendering*). (1/2)