Blog top image

Navigation on Jetpack Compose


  • ন্যাভিগেশন বলতে বুঝায় একটা স্ক্রিন থেকে অন্য স্ক্রিন এ যাওয়া 
  • অনেক সময় অন্য স্ক্রিন এ যাওয়ার সময় সাথে করে প্যারামিটার নিয়ে যেতে হয় 
  • Jetpack Compose এ ন্যাভিগেশন করার জন্য তাদের নিজস্ব লাইব্রেরি আছে 


How to implement?

১। মডিউল build.gradle.kts ফাইলে নিচের ডিপেন্ডেন্সি যুক্ত করতে হবে 

implementation(libs.androidx.navigation.compose)


২। আলাদা একটা রাউটার ফাংশন তৈরি করা যেতে নিচের মতো করে 

@Composable
fun MemoryRouter(
    navController: NavHostController,
    loginViewModel: LoginViewModel = hiltViewModel<LoginViewModel>(),
) {

    NavHost(navController = navController, startDestination = MemoryRoute.HOME) {

        composable(MemoryRoute.HOME) {
            HomeScreen(navController = navController)
        }

        // Reminder
        composable(MemoryRoute.REMINDER) {
            ReminderScreen(navController = navController)
        }
        composable(MemoryRoute.REMINDER_ADD) {
            ReminderSingleScreen(navController = navController)
        }
        composable(
            "${MemoryRoute.REMINDER_EDIT}/{id}",
            arguments = listOf(navArgument("id") { type = NavType.StringType} ) ) {
            ReminderSingleScreen(navController = navController, id = it.arguments?.getString("id"))
        }

    }
}

object MemoryRoute {
   
    const val REMINDER = "reminder"
    const val REMINDER_ADD = "reminder_add"
    const val REMINDER_EDIT = "reminder_edit"
   
}


৩। যেকোন জায়গা থেকে নিচের মতো করে নেভিগেশন কল করা যেতে পারে 

    val onEdit: (Reminder) -> Unit = {
        navController.navigate(MemoryRoute.REMINDER_EDIT + "/${it.id}")
    }