Mengirim Data Antar Halaman

Membawa data dari daftar ke halaman detail lewat constructor dan onTap.

Part 17 dari 23 ± 35 menit Gratis

Detail harus tahu apa yang dipilih

Pada aplikasi daftar, mengetuk sebuah item membuka halaman detail untuk item itu. Jadi halaman tujuan perlu diberi data. Di Flutter caranya sederhana dan sudah kamu kenal: lewat constructor, sama seperti mengirim data ke widget biasa.

Langkah 1: halaman tujuan menerima data

class Detail extends StatelessWidget {
  final String judul;
  const Detail({super.key, required this.judul});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(judul)),
      body: Center(child: Text('Ini halaman untuk: $judul')),
    );
  }
}

required this.judul memaksa pemanggil mengisi judul. Di dalam build, judul langsung dipakai.

Langkah 2: mengirim data saat berpindah

ListTile(
  title: Text(tugas[index]),
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Detail(judul: tugas[index]),
      ),
    );
  },
)
  • onTap adalah event ketuk pada ListTile (versi onPressed untuk baris daftar).
  • Detail(judul: tugas[index]) membuat halaman tujuan sambil menitipkan judul item yang diketuk.
  • Item yang diketuk berbeda, data yang dibawa berbeda, tetapi kodenya sama — itulah kekuatan widget yang menerima data.

Mengembalikan data (info tambahan)

Halaman tujuan juga bisa mengirim hasil ke halaman asal: Navigator.pop(context, 'selesai'). Halaman asal menerimanya dari hasil Navigator.push dengan await (dibahas di bab Future). Untuk saat ini, cukup ingat arahnya: data maju lewat constructor, data mundur lewat argumen kedua pop.

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X