Belajar Flutter - Performance Optimization

#Pendahuluan

Aplikasi yang lambat mengusir pengguna secepat fitur yang rusak. Episode 15 mengajarkan cara mengukur terlebih dahulu, baru mengoptimalkan: rendering performance dan jank reduction, profiling dengan DevTools dan widget inspector, teknik mengurangi rebuild dan mengoptimalkan gambar, serta memory usage dan startup time.

Aturan emas sebelum membaca episode ini: optimasi tanpa pengukuran adalah tebakan. Selalu profil dulu, baru ubah kode.

#Rendering Performance dan Jank Reduction

#Target 60 FPS

Flutter menargetkan 60 frame per detik (atau 120 pada device berkemampuan tinggi). Setiap frame hanya punya sekitar 16 milidetik untuk layout, paint, dan compositing. Ketika frame melewati batas itu, muncul jank — stutter yang terasa saat scroll.

#Penyebab Jank Umum

• Build yang berat di dalam build method (file I/O, network, parsing).
• Operasi mahal saat scroll (menyusun daftar panjang secara berlebihan).
• Repaint area luas yang tidak perlu di-repaint.

class ItemList extends StatelessWidget {
  const ItemList({super.key});
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 1000,
      itemBuilder: (context, index) {
        return const ItemTile(index: index);
      },
    );
  }
}

Perhatikan const pada ListView.builder dan ItemTile. const memberitahu Flutter bahwa widget immutable — framework bisa melewati rebuild yang tidak perlu, salah satu penghematan performa paling mudah.

#RepaintBoundary untuk Isolasi Repaint

Bungkus area yang jarang berubah dengan RepaintBoundary agar tidak ikut di-repaint saat area lain berubah:

RepaintBoundary(
  child: CustomPaint(painter: PetaPainter()),
)

RepaintBoundary membuat CustomPaint dirender ke layer terpisah. Saat widget di sekitarnya berubah, peta tidak perlu digambar ulang — efektif untuk elemen seperti peta, background animasi, dan preview.

#Profiling dengan DevTools

#Mode Profile dan DevTools

Jalankan aplikasi dalam mode profile untuk pengukuran realistis:

flutter run --profile

flutter run --profile mengaktifkan AOT namun tetap mengaktifkan DevTools — profil ini yang dipakai untuk mengukur, bukan debug mode. Klik ikon Open DevTools di terminal untuk membuka suite tool-nya.

#Widget Inspector dan Timeline

• Widget inspector: melihat pohon widget dan identifikasi rebuild yang tidak perlu.
• Performance / Timeline: mengukur frame time, melihat frame yang melampaui batas 16ms.
• Memory: memantau penggunaan heap dan mendeteksi kebocoran.

flutter run --profile --devtools

flutter run --profile --devtools langsung membuka browser DevTools. Filter timeline pada frame lambat, periksa widget mana yang paling sering di-build, lalu optimalkan titik itu — bukan sembarang tempat.

#Mengurangi Rebuild, Widget Caching, dan Image Optimization

#const dan Widget Reusable

Sumber pemborosan terbesar biasanya rebuild yang tidak perlu. Tiga perbaikan paling berdampak:

1. Gunakan const untuk widget yang immutable.
2. Pindahkan sub-tree yang berat ke widget const terpisah.
3. Pakai itemExtent pada list panjang agar layout lebih murah.

#Optimasi Gambar

Gambar adalah sumber memory dan bandwidth terbesar. Pakai cached_network_image untuk cache dan resolusi yang tepat:

flutter pub add cached_network_image

CachedNetworkImage(
  imageUrl: 'https://example.com/logo.png',
  placeholder: (context, url) => const SizedBox(
    width: 48,
    height: 48,
    child: CircularProgressIndicator(strokeWidth: 2),
  ),
  errorWidget: (context, url, error) => const Icon(Icons.broken_image),
)

CachedNetworkImage menyimpan gambar di disk sehingga request berulang tidak terjadi, dan placeholder mencegah layout jump saat loading. Atur ukuran gambar di sisi server saat mungkin — mengunduh gambar 4K untuk thumbnail 48px adalah pemborosan.

#Memory Usage dan App Startup Time

#Memantau Memory

Gunakan tab Memory DevTools dan perhatikan pola:

• Heap yang terus naik tanpa turun mengindikasikan kebocoran.
• Listener dan controller yang tidak di-dispose adalah penyebab umum.

class SearchScreen extends StatefulWidget {
  const SearchScreen({super.key});
 
  @override
  State<SearchScreen> createState() => _SearchScreenState();
}
 
class _SearchScreenState extends State<SearchScreen> {
  final TextEditingController _controller = TextEditingController();
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return TextField(controller: _controller);
  }
}

_controller.dispose() di dispose mencegah kebocoran. Aturan: setiap resource yang dibuka di initState wajib ditutup di dispose.

#App Startup Time

Startup lambat biasanya karena kerja berat di main() dan build awal. Perbaikan umum:

• Hindari pekerjaan mahal di main() sebelum runApp.
• Muat data besar secara asinkron, bukan blokir frame pertama.
• Gunakan flutter build apk --release --obfuscate untuk memperkecil ukuran binary di rilis.

#Penutup

Inti yang harus dibawa pulang:

• Target 60 FPS; jank muncul saat frame melewati 16 milidetik.
• Profil dulu dengan DevTools, baru optimalkan — jangan menebak.
• Gunakan const pada widget immutable untuk melewati rebuild.
• RepaintBoundary mengisolasi area yang jarang berubah.
• Optimalkan gambar dengan cached_network_image dan ukuran yang tepat.
• Dispose semua controller dan listener untuk mencegah kebocoran memory.

Di episode 16 selanjutnya kita membahas animations dan UI polish — perbedaan implicit dan explicit animations, AnimationController, Tween, dan AnimatedBuilder, Hero animations dan transitions untuk motion design, serta CustomPaint dan advanced UI effects. Aplikasi kalian mulai terasa hidup dan premium.