flutternavigasidataMenengah3 mnt baca

Mengirim Data Antar Halaman

Teruskan objek antar halaman lewat constructor, RouteSettings, dan callback dengan aman null-safe.

Cara 1: lewat constructor (paling disarankan)

Cara paling bersih dan type-safe adalah meneruskan data lewat constructor halaman tujuan. Compiler menjamin tipenya benar.

dart

class Produk {
  final String id;
  final String nama;
  final int harga;

  const Produk({required this.id, required this.nama, required this.harga});
}

// Mengirim
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => HalamanDetail(produk: produkTerpilih),
  ),
);

// Menerima
class HalamanDetail extends StatelessWidget {
  final Produk produk;

  const HalamanDetail({super.key, required this.produk});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(produk.nama)),
      body: Center(child: Text('Harga: Rp${produk.harga}')),
    );
  }
}

Tidak ada cast, tidak ada null assertion, dan IDE bisa refactor dengan aman.

Cara 2: lewat arguments

Untuk named route, data dikirim lewat arguments seperti dibahas di modul sebelumnya. Kelemahannya adalah kehilangan type safety karena harus cast manual. Akali dengan membuat class arguments khusus:

dart

class DetailProdukArgs {
  final String produkId;
  final bool dariPromo;

  const DetailProdukArgs({required this.produkId, this.dariPromo = false});
}

// Mengirim
Navigator.pushNamed(
  context,
  '/produk/detail',
  arguments: const DetailProdukArgs(produkId: 'p1', dariPromo: true),
);

// Menerima dengan aman
final args = ModalRoute.of(context)?.settings.arguments as DetailProdukArgs?;
if (args == null) {
  return const Scaffold(body: Center(child: Text('Data tidak ditemukan')));
}

Cara 3: callback untuk aksi balik

Kadang halaman detail perlu memberi tahu halaman daftar bahwa sesuatu berubah, misalnya produk dihapus. Selain await hasil pop, kamu bisa meneruskan callback:

dart

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => HalamanEditProduk(
      produk: produk,
      onHapus: () {
        setState(() => daftar.remove(produk));
      },
    ),
  ),
);

Di halaman edit, panggil widget.onHapus() sebelum pop. Pola ini sederhana dan cukup untuk kasus satu level.

Catatan teknis: Meneruskan data besar (misalnya list ribuan item atau gambar dalam memori) lewat constructor antar halaman itu boleh saja karena Dart meneruskan reference, bukan copy. Tapi jangan meneruskan BuildContext antar halaman atau menyimpannya di field, karena context terikat pada posisi widget di tree dan bisa basi. Kalau butuh state yang dipakai banyak halaman, itu tanda kamu butuh state management (Riverpod/BLoC), bukan passing data manual.