Belajar Dart - Flutter & Cross-platform Development

#Pendahuluan

Flutter adalah alasan utama banyak orang belajar Dart. Dengan satu codebase, Flutter menghasilkan aplikasi native untuk Android, iOS, web, dan desktop — dan bahasa yang dipakainya adalah Dart. Episode 12 membedah arsitektur Flutter, cara membuat aplikasi, serta bagaimana Dart menghubungkan seluruh lapisan.

Kalian akan memahami bagaimana Flutter engine bekerja, membangun widget tree, memakai state management, memanfaatkan hot reload, dan berbagi logika bisnis Dart dengan server.

Di akhir episode, kalian akan melihat mengapa kombinasi Dart dan Flutter adalah jawaban efisien untuk pengembangan multiplatform.

#Arsitektur Flutter dan Integrasi Dart

#Lapisan Flutter Engine

Flutter terdiri dari beberapa lapisan:

• Framework: widget, rendering, dan API yang ditulis dalam Dart — kode yang kalian tulis.
• Engine: ditulis dalam C++, bertanggung jawab merender grafis (Impeller/Skia) dan mengatur input.
• Embedder: menghubungkan engine dengan platform spesifik seperti Android dan iOS.

Kode Dart kalian dikompilasi AOT menjadi kode mesin saat release, sehingga performa aplikasi Flutter setara native.

#Integrasi Dart dengan Platform

Meski UI berada di Flutter, aplikasi tetap membutuhkan platform channel untuk fitur native seperti kamera dan sensor:

import 'package:flutter/services.dart';
 
Future<String> ambilVersi() async {
  const channel = MethodChannel('com.example/versi');
  return await channel.invokeMethod('getVersi');
}

MethodChannel('com.example/versi') membuka jalur komunikasi antara kode Dart dan kode native. Plugin Flutter memakai pola ini secara luas.

#Membuat Aplikasi Flutter Sederhana

#Scaffold Project

Buat project dan lihat aplikasi pertama:

flutter create belajar_flutter
cd belajar_flutter
flutter run

flutter create belajar_flutter menghasilkan project dengan file lib/main.dart. Jalankan flutter run untuk memilih device — emulator, browser, atau perangkat fisik — dan aplikasi langsung tampil.

#Widget Pertama

Ganti isi lib/main.dart dengan widget sederhana:

import 'package:flutter/material.dart';
 
void main() => runApp(const AplikasiSaya());
 
class AplikasiSaya extends StatelessWidget {
  const AplikasiSaya({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Belajar Flutter')),
        body: const Center(child: Text('Halo, Dart!')),
      ),
    );
  }
}

MaterialApp dan Scaffold menyediakan struktur halaman standar Material. Center(child: Text('Halo, Dart!')) menampilkan teks di tengah layar.

#Widget Tree, State Management, dan Hot Reload

#Widget Tree

Semua UI Flutter adalah pohon widget. Widget stateless tidak berubah, sedangkan stateful widget menyimpan state yang bisa berubah saat interaksi pengguna. Struktur ini membuat UI deklaratif: UI adalah fungsi dari state.

#Hot Reload

Kekuatan utama pengembangan Flutter adalah hot reload: ubah kode, simpan, dan perubahan langsung tampil dalam hitungan detik tanpa kehilangan state aplikasi. flutter run dalam mode debug mendukung ini secara default, dan hot restart mengulang dari awal jika perubahan struktur lebih dalam.

#State Management dengan setState

Untuk state sederhana, gunakan setState:

import 'package:flutter/material.dart';
 
class Penghitung extends StatefulWidget {
  @override
  State<Penghitung> createState() => _PenghitungState();
}
 
class _PenghitungState extends State<Penghitung> {
  int _angka = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('$_angka'),
            ElevatedButton(
              onPressed: () => setState(() => _angka++),
              child: const Text('Tambah'),
            ),
          ],
        ),
      ),
    );
  }
}

setState(() => _angka++) memberi tahu Flutter bahwa state berubah sehingga widget di-rebuild. Untuk aplikasi besar, state management diganti dengan provider atau Riverpod (episode 18).

#Berbagi Kode Dart antara Flutter dan Server

Salah satu keunggulan tersembunyi Dart: logika bisnis bisa dipakai di Flutter dan server sekaligus. Pisahkan logika ke pure Dart package tanpa dependency Flutter:

dart create -t package domain_core
cd domain_core

dart create -t package domain_core membuat package library murni. Package ini lalu bisa ditambahkan sebagai dependency Flutter (flutter pub add) maupun aplikasi server (dart pub add) — validasi, perhitungan harga, dan aturan bisnis ditulis sekali dan dipakai di mana-mana.

#Penutup

Inti yang harus dibawa pulang:

• Flutter terdiri dari framework Dart, engine C++, dan embedder platform.
• flutter create menghasilkan project; flutter run menjalankan aplikasi di device.
• UI Flutter adalah widget tree; stateful widget menangani state yang berubah.
• Hot reload menampilkan perubahan kode dalam hitungan detik tanpa reset state.
• setState cukup untuk state sederhana; framework lebih besar untuk skala besar.
• Pure Dart package memungkinkan logika dibagi antara Flutter dan server.

Di episode 13 selanjutnya kita akan membahas security dan data handling — validasi input yang aman, enkripsi dan secure storage, penanganan secrets, panggilan jaringan dengan HTTPS dan sertifikat, serta praktik secure coding di Dart.