Passing Data using SharedViewModel

Question

I'm new in Android Developing and Currently Studying about passing data using SharedViewModel and I'm facing a problem where the application I make always force close and I don't know how. Can you guys help me?

@Composable
fun SetupNavGraph(navController: NavHostController){
    NavHost(navController = navController, startDestination = "Authentication", route = "root"){
        authNavGraph(navController = navController)
        homeNavGraph(navController = navController)
    }
}

@Composable
inline fun <reified T: ViewModel> NavBackStackEntry.sharedViewModel(navController: NavController): T{
    val navGraphRoute = destination.parent?.route ?: return viewModel()
    val parentEntry = remember(key1 = this) {
        navController.getBackStackEntry(navGraphRoute)
    }
    return viewModel(parentEntry)
}

fun NavGraphBuilder.authNavGraph(navController: NavController){
    navigation(startDestination = "Login",route ="Authentication"){
        composable(route = "Login"){
            val viewModel  = it.sharedViewModel<SampleViewModel>(navController = navController)
            LoginScreen(viewModel = viewModel, navController = navController)
        }
        composable(route = "Register"){
            val viewModel  = it.sharedViewModel<SampleViewModel>(navController = navController)
            RegisterScreen(viewModel = viewModel, navController = navController)
        }
    }
}

fun NavGraphBuilder.homeNavGraph(navController: NavController){
    navigation(startDestination = "Home", route = "Home"){
        composable(route = "Home/{Username}"){
            val Username = it.arguments?.getString("Username")?:" "
            HomeScreen(navController = navController, Username = Username)
        }

        composable(route = "detail"){
            val Username = it.arguments?.getString("Username")?:" "
            DetailScreen(navController = navController, Username = Username)
        }
    }
}

@Composable
fun HomeScreen(navController: NavController, Username: String){
    Box(modifier = Modifier
        .background(Color.Green)
        .fillMaxSize()){
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = Username, color = Color.White)
            
            Button(onClick = { navController.navigate("detail") }) {
                Text(text = "Detail")
            }
        }
    }
}

@Composable
fun LoginScreen(viewModel: SampleViewModel, navController: NavController){
    var Username by remember {
        mutableStateOf("")
    }
    Box(modifier = Modifier
        .background(Color.Black)
        .fillMaxSize(),
        contentAlignment = Alignment.Center){

        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "REGISTER",color = Color.White)

            TextField(value = Username, onValueChange = {Username = it},
            )
            Button(onClick = { navController.navigate("Login") }) {
                Text(text = "Login")
            }
        }
    }
}

I dont know why, I think the navigation was correct but after I build the application it always force close and I cannot understand what make it wrong

Answer 1

For a better understanding of the shared viewmodel please watch this small video that covers all the topic link