how to remove the a composable from the back stack in Compose-Navigation

Question

I there is a a screen in my application that allows the user to Edit an Item in the database and after the user finishes editing the item they click on "Done" Button that will take them to the previous Screen. But when the user click on the back button they will go to the edit Screen again.

What I want is when the user Clicks on the back button is to go to another Screen Like they never went to the Edit Screen.

here is my navigation graph:

@Composable
fun AppNavigator(
    textFieldsViewModel: TextFieldsViewModel,
    shoppingListsViewModel: ShoppingListsViewModel,
    addNewShoppingListViewModel: AddNewShoppingListViewModel
) {

    val navController = rememberNavController()

    NavHost(navController, startDestination = "SplashScreen") {
        composable("SplashScreen") {
            SplashScreen(navController = navController)
        }
        composable("shoppingLists") {
            ShoppingListsScreen(
                navController = navController,
                shoppingListsViewModel = shoppingListsViewModel,
                textFieldsViewModel = textFieldsViewModel
            )
        }
        composable(
            "ItemsList/{listID}",
            arguments = listOf(navArgument("listID") { type = NavType.IntType })
        ) {
            ShoppingListItemsScreen(
                it.arguments?.getInt("listID")!!,
                shoppingListsViewModel = shoppingListsViewModel,
                textFieldsViewModel = textFieldsViewModel,
                navController = navController
            )
        }
        composable(
            "EditItem/{itemId},{itemName},{itemQuantity},{itemParentListId}",
            arguments = listOf(
                navArgument("itemId") { type = NavType.IntType },
                navArgument("itemName") { type = NavType.StringType },
                navArgument("itemQuantity") { type = NavType.IntType },
                navArgument("itemParentListId") { type = NavType.IntType })
        ) {
            EditItemScreen(
                navController = navController,
                textFieldsViewModel = textFieldsViewModel,
                shoppingListsViewModel = shoppingListsViewModel,
                itemId = it.arguments?.getInt("itemId")!!,
                itemName = it.arguments?.getString("itemName")!!,
                itemQuantity = it.arguments?.getInt("itemQuantity")!!,
                itemParentListId = it.arguments?.getInt("itemParentListId")!!
            )
        }
        composable("AddNewShoppingList") {
            AddNewShoppingListScreen(
                navController = navController,
                textFieldsViewModel = textFieldsViewModel,
                addNewShoppingListViewModel = addNewShoppingListViewModel,
                shoppingListsViewModel = shoppingListsViewModel
            )
        }

    }
}

And here is the code of the button that is responsible of navigat to the previous composable:

 IconButton(
                onClick = {
                    shoppingListsViewModel.addNewItemToShoppingList(item)
                    navController.navigate("ItemsList/${changeableParentListId.value}")
                }) {
                Icon(Icons.Rounded.Done, "Save or Edit the Shopping Item")
            }

here is a Screenshot of the Edit screen: enter image description here

Answer 1

From the edit/details screen you should call navController.popBackStack().