Pass data to another destination in Jetpack Compose Navigation



Di dalam dunia Android Native sebelum mengenal Jetpack compose, kita biasa melakukan perpindahan Screen dan membawa data pada Screen berikutnya dengan putExtra pada Intent Activity ataupun argument pada Fragment.

Kali ini saya ingin menuliskan bagaimana melakukan itu jika kita menggunakan Jetpack compose dan menggunakan Jetpack Compose Navigation untuk berpindah Screen.

Sama halnya dengan yang ada di Fragment, kita akan memanfaatkan argument tetapi memang penulisan codenya bakalan berbeda.

Ada berbagai cara yang bisa kita lakukan, pertama dengan membawa data melalui route path seperti yang biasa dilakukan pada endpoint sebuah API, contohnya seperti

localhost/users/:id

dimana kita bisa membaca nilai yang ditempatkan pada path :id, misalkan saja url yang diakses seperti berikut

localhost/users/12

maka kita bisa mendapatkan id dengan nilai 12, hal ini sebenarnya bisa dibaca di dokumentasi ini.

tapi bagaimana jika data yang kita kirim itu lumayan complex seperti parcelable class data atau sebut saja sebuah object, pada intent ataupun argument pada fragment hal itu bisa dilakukan tetapi bagaimana jika di Jetpack compose navigation?

Hal yang perlu kita lakukan adalah menggunakan NavHostController dengan method navigate(@IdRes id: Int, args: Bundle?) 

Disini kita bisa mendapatkan id dari sebuah route dengan cara melakukan find node pada route yang akan kita jadikan destination seperti ini.


 val destination = navHostController.graph.findNode(Screen.Detail.route)

Kemudian mempersiapkan data yang akan dikirimkan melalui bundle, sebut saja kita punya object Person yang sudah di implement sebagai Parcelable

// find destination id
val destination = navHostController.graph.findNode(Screen.Detail.route)

if (destination != null) {
    val bundle = Bundle()
    bundle.putParcelable("person", person)
    
    // navigate to next screen
    navHostController.navigate(destination.id, bundle)
}

Jika sudah berhasil membuka detail screen, selanjutnya kita akan melakukan retrieve data untuk object person yang telah kita kirimkan ke Screen detail

// access data person yang sudah dikirim dari screen sebelumnya
val person = navHostController.currentBackStackEntry?.arguments?.getParcelable<Image>("person")

Kurang lebih seperti itu cara mengirim dan menerima data antar screen menggunakan Jetpack Compose Navigation, jika kalian punya cara lain selain cara 2 di atas, boleh tuliskan di komentar agar saya juga ikut belajar hal baru dari teman-teman terkait Jetpack Compose Navigation ini.

Komentar