Belajar Mobile Developer - Cross-Platform Flutter

#Pendahuluan

Setelah melihat React Native di episode 5, kini kita hadapi pesaing utamanya: Flutter. Kalau RN memetakan komponen ke native view, Flutter mengambil jalan berbeda — ia menggambar seluruh UI sendiri memakai widget tree dan renderer kustom. Hasilnya: konsistensi visual yang sempurna di semua platform, dan performa yang mendekati native.

Mengapa Flutter populer? Karena pendekatan "semua adalah widget" sangat konsisten dan tooling-nya (hot reload) sangat nyaman. Banyak tim yang menginginkan UI pixel-perfect di dua platform memilih Flutter.

#Bahasa Dart

Flutter memakai Dart — bahasa yang dikompilasi ahead-of-time (AOT) untuk performa rilis dan just-in-time (JIT) untuk hot reload saat development. Sintaksnya mudah dipelajari bagi yang sudah kenal Java/C#/TypeScript:

class Workout {
  final String name;
  final int durationMinutes;
 
  Workout(this.name, this.durationMinutes);
 
  int get caloriesBurned => durationMinutes * 7;
}
 
void main() {
  final run = Workout("Lari pagi", 30);
  print("Bakar ${run.caloriesBurned} kalori");
}

Dart memakai null safety sejak 3.0: semua tipe secara default non-nullable. Ini mencegah kelas error null reference yang menghantui bahasa lain.

#Widget Tree

Di Flutter, semua adalah widget — layar, teks, layout, bahkan spacing. UI dibangun sebagai pohon widget (widget tree):

import 'package:flutter/material.dart';
 
void main() => runApp(const FitkuApp());
 
class FitkuApp extends StatelessWidget {
  const FitkuApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

Ada dua jenis widget: StatelessWidget (statis) dan StatefulWidget (menyimpan state dengan setState). Kalian juga memakai StatelessWidget untuk komponen kecil yang reusable:

class StepCounter extends StatefulWidget {
  const StepCounter({super.key});
 
  @override
  State<StepCounter> createState() => _StepCounterState();
}
 
class _StepCounterState extends State<StepCounter> {
  int _steps = 0;
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Langkah: $_steps', style: Theme.of(context).textTheme.titleLarge),
        FilledButton(
          onPressed: () => setState(() => _steps++),
          child: const Text('Tambah langkah'),
        ),
      ],
    );
  }
}

setState memberi tahu framework bahwa state berubah → widget di-rebuild. Ini pola deklaratif yang sama dengan Compose/SwiftUI.

#Renderer Impeller

Flutter lama men-render memakai Skia; sejak Flutter 3.10+ di iOS dan selanjutnya di Android, renderer baru Impeller menggantikannya:

• Prewarm shader: menghilangkan jank di frame awal yang dulu muncul karena kompilasi shader saat runtime.
• Rendering prediktif: memakai API grafis modern (Metal di iOS, Vulkan di Android) untuk performa konsisten.
• Deterministik: tidak ada warm-up jank di scroll pertama — salah satu keluhan klasik Flutter.

Hasilnya: scrolling 60/120fps yang halus bahkan di hardware kelas menengah.

#Praktik: Halaman Utama Fitku (Flutter)

import 'package:flutter/material.dart';
 
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
 
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
  int _steps = 0;
 
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text('Halo, Fitku!', style: theme.textTheme.headlineMedium),
              const SizedBox(height: 16),
              Card(
                color: theme.colorScheme.primaryContainer,
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Langkah hari ini',
                          style: theme.textTheme.labelLarge),
                      Text('$_steps', style: theme.textTheme.displayMedium),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 16),
              FilledButton(
                onPressed: () => setState(() => _steps++),
                child: const Text('Tambah langkah'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Perhatikan penggunaan SafeArea (menghindari notches) dan Card material — Flutter membawa Material Design secara bawaan, dan kalian bisa beralih ke desain kustom kapan pun.

#Common Pitfalls Flutter

• Menumpuk widget terlalu dalam: widget tree yang dalam membuat build lambat. Pisahkan ke komponen kecil.
• Memakai setState untuk state global: buntu saat fitur kompleks — segera pindah ke Riverpod/Bloc (episode 9).
• Mengabaikan const constructor: banyak rebuild tidak perlu. Selalu tandai widget dengan const bila memungkinkan.
• Build dengan MediaQuery berlebihan: baca ukuran layar sekali di layout utama, bukan di tiap widget.

#Penutup

Pada episode 6 ini, kalian telah menguasai fondasi Flutter:

• Flutter men-render UI sendiri via widget tree — konsisten di semua platform.
• Dart memberi null safety dan kompilasi AOT untuk performa rilis.
• Renderer Impeller menghilangkan shader jank untuk scrolling halus.
• Halaman utama Fitku berjalan dari satu codebase Dart di Android & iOS.

Di episode 7 selanjutnya kita bahas tren yang naik 2x lipat di 2026: Kotlin Multiplatform & Compose Multiplatform — berbagi business logic antar platform lewat KMP, dan berbagi UI lewat Compose Multiplatform. Sampai jumpa!