Flutter dalam Pengembangan Mobile: Apa Itu, Konsep Kunci, dan Cara Kerjanya

Flutter: dasar-dasar Widget, StatelessWidget, dan StatefulWidget

Widget — deskripsi deklaratif dari bagian UI. Semua di Flutter adalah Widget: dari tombol hingga aplikasi itu sendiri. Widget adalah konfigurasi (bukan UI itu sendiri). StatelessWidget — Widget yang tidak dapat diubah. build() dipanggil sekali. Tidak memiliki status. Digunakan untuk konten statis. StatefulWidget — Widget yang dapat diubah. Memiliki objek State yang dapat berubah. setState() — memicu pembangunan ulang. State — objek yang dapat diubah yang terikat pada StatefulWidget. Berisi data yang dapat berubah.

StatelessWidget vs StatefulWidget

StatelessWidget — build() dipanggil sekali. Cocok untuk judul, ikon, teks statis. StatefulWidget — build() dipanggil setiap kali setState() dipanggil. Cocok untuk formulir, daftar dengan perubahan, pengatur waktu. InheritedWidget — meneruskan data ke bawah tanpa pengiriman eksplisit melalui konstruktor. Theme, MediaQuery, Navigator — InheritedWidget. BuildContext — posisi Widget di pohon. context.of<T>, context.watch<T>, context.select<T,R> — akses ke InheritedWidget.

// Contoh Flutter Widget: StatefulWidget dengan setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — konfigurasi. StatelessWidget — tidak dapat diubah. StatefulWidget — dapat diubah dengan setState(). IT Sectr merekomendasikan memulai dengan StatelessWidget dan beralih ke StatefulWidget hanya saat membutuhkan status.

Pohon (Widget Tree, Element Tree, RenderObject Tree)

Flutter menggunakan tiga pohon untuk rendering yang efisien. Widget Tree — pohon konfigurasi. Widget sering dibuat (setiap build), ringan. Element Tree — pohon elemen. Satu elemen per Widget (jika tipe tidak berubah). Element — jembatan antara Widget dan RenderObject. RenderObject Tree — pohon rendering. Menangani ukuran, posisi, menggambar. RenderObject — berat, jarang dibuat. Flutter membandingkan Widget Tree dan memperbarui Element Tree, yang memicu pembaruan RenderObject Tree.

Keys dan Element Tree

Key — pengidentifikasi Widget di Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key memungkinkan Flutter mencocokkan Widget lama dan baru selama pembangunan ulang. Tanpa Key, Flutter mencocokkan berdasarkan tipe dan posisi Widget. GlobalKey — akses ke State dari Widget lain. Digunakan untuk: formulir kompleks, animasi, akses ke State dalam pengujian. IT Sectr merekomendasikan penggunaan Key untuk daftar (List.generate) dan menghindari GlobalKey kecuali diperlukan.

Expanded — Widget yang mengisi ruang yang tersedia di Row/Column/Flex. Flexible — tidak memaksa pengisian (bisa lebih kecil). MediaQuery — InheritedWidget dengan informasi perangkat: ukuran layar, orientasi, platform, faktor skala teks. Theme/ThemeData — tema terpusat. Theme.of(context) — akses. MaterialApp — Widget root untuk konfigurasi routing, tema, lokal. Scaffold — tata letak dasar dengan AppBar, Drawer, BottomNavigationBar. AppBar — panel atas.

Navigasi (Navigator, Route)

Navigator — tumpukan rute (Routes). Navigator.push — buka layar (mengembalikan Future). Navigator.pop — tutup (dengan hasil). MaterialPageRoute — transisi animasi (geser dari kanan). Named Routes — pengidentifikasi string. onGenerateRoute — penangan terpusat. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — navigasi deklaratif untuk web, deep linking, dan skenario kompleks.

Navigator 2.0

Navigator 2.0 — navigasi deklaratif. Router — Widget pusat. RouteInformationParser — penguraian URL. RouterDelegate — manajemen tumpukan. GoRouter (paket) — pembungkus sederhana di atas Navigator 2.0. Mendukung: rute bernama, parameter, pengalihan, deep linking. IT Sectr merekomendasikan GoRouter untuk sebagian besar proyek dan Navigator 2.0 hanya untuk skenario kompleks (web, desktop).

Async (FutureBuilder, StreamBuilder)

FutureBuilder — Widget yang membangun UI berdasarkan Future. connectionState: none, waiting, active, done. Digunakan untuk: permintaan HTTP, pembacaan DB, pengatur waktu. StreamBuilder — Widget untuk Stream (aliran data tak terbatas). snapshot.data, snapshot.hasError, snapshot.hasData. Digunakan untuk: WebSocket, Firebase, pembaruan lokasi. Kedua Widget membangun ulang saat menerima data baru.

Manajemen Status

Provider — DI sederhana + manajemen status. ChangeNotifierProvider, MultiProvider. Riverpod — pengganti modern Provider: aman saat kompilasi, tidak bergantung pada BuildContext. Bloc — arsitektur Event-Driven: Cubit (acara sederhana) vs Bloc (kompleks). GetX — manajemen status ringan + DI + routing. setState — paling sederhana, untuk status lokal. IT Sectr merekomendasikan Riverpod untuk proyek baru dan Provider untuk proyek yang sudah ada.

Tema dan Adaptasi (MediaQuery, ThemeData)

MediaQuery — ukuran layar, orientasi, platform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — tema aplikasi: warna, font, bentuk. Theme.of(context).textTheme.bodyLarge. Hot Reload — penyuntikan kode ke dalam aplikasi yang berjalan. Mempertahankan status. Tidak mendukung: mengubah main(), variabel global, bidang statis. Hot Restart — mulai ulang aplikasi penuh (kehilangan status). Hot Reload — keunggulan utama Flutter bagi pengembang.

StatelessWidget — untuk konten statis. StatefulWidget — untuk konten dinamis. InheritedWidget — untuk DI. IT Sectr merekomendasikan StatelessWidget secara default dan StatefulWidget hanya saat diperlukan.

Tata Letak Responsif

LayoutBuilder — beradaptasi dengan dimensi induk. OrientationBuilder — beradaptasi dengan orientasi. Expanded vs Flexible — distribusi ruang di Row/Column. MediaQuery — titik putus untuk tablet dan desktop. SafeArea — margin dari elemen sistem (notch, bilah status). AspectRatio — mempertahankan proporsi. IT Sectr merekomendasikan LayoutBuilder untuk tata letak adaptif dan OrientationBuilder untuk orientasi lanskap.

Pengujian (Widget, Integration, Unit)

Pengujian unit — menguji logika bisnis, repositori, model. dart test — menjalankan. Pengujian Widget — menguji widget secara terisolasi. WidgetTester — pumpWidget, tap, enterText. Pengujian integrasi — skenario lengkap pada perangkat/emulator nyata. Mockito — mocking dependensi. Pengujian Golden — perbandingan tangkapan layar (file golden). IT Sectr merekomendasikan pengujian Widget untuk setiap layar dan pengujian unit untuk logika bisnis.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animasi (Implisit, Eksplisit, Hero)

Animasi implisit — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Perubahan properti dianimasikan secara otomatis. Animasi eksplisit — AnimationController dengan Tween. forward() / reverse(). Animasi Hero — Hero Widget dengan tag — animasi transisi antar layar. Animasi bertahap — rantai animasi dengan Interval. Lottie — integrasi animasi After Effects. Rive — animasi interaktif (state machine). IT Sectr merekomendasikan AnimatedContainer untuk 80% kasus dan AnimationController untuk skenario kompleks.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Jaringan (http, dio, graphql)

http — klien HTTP sederhana (get, post, put, delete). dio — klien canggih dengan pencegat, batas waktu, percobaan ulang, pencatatan. graphql_flutter — klien GraphQL untuk Flutter. json_serializable — pembuatan fromJson/toJson melalui anotasi. Retrofit Dart — klien HTTP type-safe seperti Retrofit. WebSocket — melalui web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr merekomendasikan dio untuk REST API dan graphql_flutter untuk GraphQL.

Flutter DevTools — seperangkat alat: Inspector (pohon widget), Timeline (kinerja), Memory, Network, Logging. Profile mode — pembuatan profil tanpa debug. Performance overlay — FPS, waktu build. Flame chart — pelacakan diagram api. DevTools — alat penting untuk mengoptimalkan aplikasi Flutter dalam produksi.

Flutter Web — kompilasi Flutter ke WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — piksel sempurna, tetapi lebih berat. HTML renderer — ringan, tetapi dengan keterbatasan. WASM (Flutter 3.22+) — kinerja native. Adaptasi responsif melalui LayoutBuilder dan MediaQuery. IT Sectr merekomendasikan CanvasKit untuk aplikasi web desktop dan HTML renderer untuk situs konten.