Membongkar Dekopling State Flutter: Mengapa 'Kombinasi Paradigma' Adalah Kunci Aplikasi Bebas Lag

Bagi seorang developer Flutter, diskusi mengenai state management sering kali terasa seperti medan perang ideologi. Di satu sudut, ada pemuja setia BLoC dengan disiplin stream-nya yang ketat. Di sudut lain, ada komunitas Riverpod yang mengagungkan fleksibilitas dan compile-safety. Tidak ketinggalan, Signals yang menawarkan reaktivitas super cepat mirip fine-grained reactivity di dunia web.

Namun, di tengah riuhnya debat "Library Mana yang Terbaik?", kita sering melupakan satu kebenaran fundamental: Aplikasi skala besar tidak pernah hidup dari satu paradigma tunggal.

Memaksakan seluruh state aplikasi—mulai dari animasi mikro pada tombol hingga caching data offline—ke dalam satu tool arsitektur yang kaku adalah resep instan menuju penurunan performa (jank) dan kode yang sulit dirawat. Artikel ini tidak akan membandingkan library mana yang menang, melainkan membongkar cara melakukan Dekopling State berbasis kombinasi paradigma untuk menciptakan aplikasi Flutter yang responsif dan adaptif.

---

Memahami Anatomi State: Ephemeral vs. App-Wide

Sebelum memilih alat tempur, kita harus membagi state aplikasi ke dalam dua kategori biologisnya:

1. Ephemeral State (State Lokal): State yang hanya dipedulikan oleh satu widget tunggal. Contohnya: status animasi loading, tab yang sedang aktif, atau teks yang sedang diketik di TextField.
2. App-Wide State (State Global/Shared): State yang memengaruhi banyak bagian aplikasi. Contohnya: status autentikasi pengguna, keranjang belanja, atau preferensi tema gelap/terang.

Kesalahan terbesar developer adalah membawa ephemeral state ke dalam arsitektur global. Mengapa harus memicu rebuild pada seluruh pohon komponen (widget tree) hanya untuk mengubah warna sebuah toggle switch?

---

Paradigma Hybrid: Memadukan Pendekatan Imperatif dan Deklaratif

Untuk mencapai performa maksimal, arsitektur modern Flutter harus menerapkan pendekatan hybrid. Mari kita bedah bagaimana memisahkan tanggung jawab ini menggunakan kombinasi ValueNotifier (bawaan Flutter) untuk level lokal, dan Riverpod atau BLoC untuk level arsitektur bisnis.

1. Mikro-Reaktivitas dengan ValueNotifier dan ValueListenableBuilder

Untuk state lokal yang dinamis, lupakan setState yang memaksa seluruh fungsi build dari StatefulWidget dieksekusi ulang. Gunakan ValueNotifier. Pendekatan ini memastikan hanya widget spesifik yang terbungkus saja yang digambar ulang oleh skia/impeller rendering engine.

Mari lihat contoh implementasi penyaringan (filtering) produk secara lokal tanpa mengganggu state global:

import 'package:flutter/material.dart';

class LocalFilterWidget extends StatelessWidget {
  // State lokal menggunakan ValueNotifier
  final ValueNotifier<String> _selectedCategory = ValueNotifier<String>('Semua');

  LocalFilterWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: ['Semua', 'Elektronik', 'Pakaian'].map((category) {
            return ValueListenableBuilder<String>(
              valueListenable: _selectedCategory,
              builder: (context, currentCategory, child) {
                final isSelected = currentCategory == category;
                return ChoiceChip(
                  label: Text(category),
                  selected: isSelected,
                  onSelected: (_) {
                    _selectedCategory.value = category; // Hanya memicu rebuild ValueListenableBuilder
                  },
                );
              },
            );
          }).toList(),
        ),
        // Bagian list produk yang terhubung ke App-Wide State tetap tenang di sini
      ],
    );
  }
}

2. Isolasikan Logika Bisnis Kompleks ke Enterprise State Provider

Ketika data tersebut harus diakses oleh modul lain—misalnya, kategori yang dipilih di atas harus mengubah query API di repositori utama—saat itulah kita meneruskannya ke App-Wide State Management.

Berikut adalah contoh bagaimana kita merepresentasikan State global menggunakan pola modern Notifier dari Riverpod, yang menangani status asinkronus secara elegan:

import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:my_app/models/product.dart';
import 'package:my_app/services/api_service.dart';

part 'product_provider.g.dart';

@riverpod
class AsyncProducts extends _$AsyncProducts {
  @override
  FutureOr<List<Product>> build() async {
    // Mengambil data awal saat provider diinisialisasi
    return ref.watch(apiServiceProvider).fetchProducts(category: 'Semua');
  }

  Future<void> updateCategory(String category) async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async {
      return ref.read(apiServiceProvider).fetchProducts(category: category);
    });
  }
}

---

Strategi Optimasi: Menghindari Perangkap "Over-Rendering"

Aplikasi Flutter yang terasa berat atau patah-patah (lag) biasanya disebabkan oleh satu hal: Widget Tree Rebuild yang Tidak Diperlukan. Ketika Anda mengintegrasikan state management, pastikan Anda menggunakan selektor taktis.

Gunakan .select() untuk Membatasi Konsumsi Data

Jangan pernah mendengarkan (listen) seluruh objek jika Anda hanya membutuhkan satu properti di dalamnya. Baik di Riverpod maupun BLoC/Provider, fitur selektor adalah kunci efisiensi memori.

// SALAH: Widget akan rebuild jika ADA properti dalam UserProfile yang berubah
final user = ref.watch(userProvider);
return Text(user.name);

// BENAR: Widget HANYA akan rebuild jika properti 'name' berubah
final userName = ref.watch(userProvider.select((user) => user.name));
return Text(userName);

---

Matriks Keputusan: Kapan Harus Menggunakan Apa?

Untuk mempermudah Anda dalam merancang arsitektur aplikasi berikutnya, berikut adalah panduan praktis berbasis kebutuhan skenario:

Jenis State	Cakupan (Scope)	Solusi Terbaik	Alasan
UI-Driven	Lokal (Satu Halaman)	ValueNotifier / StatefulWidget	Ringan, tanpa boilerplate, performa rendering tinggi.
Data-Driven (I/O)	Global / Multi-Halaman	Riverpod / BLoC	Memiliki penanganan lifecycle yang baik untuk request jaringan dan caching.
Kritis & Real-time	Global / Multi-Sistem	BLoC (Sistem berbasis Event)	Aliran Stream memastikan urutan data yang masuk akurat (misal: aplikasi chatting atau pelacakan GPS).

---

Kesimpulan: Jangan Terpaku pada Dogma Arsitektur

Arsitektur state management yang sempurna tidak diukur dari seberapa populer library yang Anda gunakan di GitHub. Kesempurnaan diukur dari seberapa baik Anda memisahkan tanggung jawab antara performa rendering UI dan kompleksitas pengolahan data di latar belakang.

Mulailah dengan menulis komponen lokal yang mandiri menggunakan utilitas bawaan Flutter, lalu jembatani dengan state manager eksternal yang tangguh saat aplikasi Anda mulai membutuhkan komunikasi antar-halaman. Dengan pendekatan dekopling ini, kode Anda akan lebih mudah diuji (testable), skalabel untuk tim besar, dan yang paling penting: memberikan pengalaman pengguna yang mulus tanpa interupsi lag.