Dialogs¶

If you need to handle a backstack of dialogs in your application, simply add DialogNavHost to the same composition layer where your regular NavHost lives. This way you may show and control the backstack of regular screen destinations, as well as a second backstack of dialogs:

@Composable
fun NavHostScreen() {
    val navController = rememberNavController<ScreenDestination>(
        startDestination = ScreenDestination.First,
    )

    val dialogController = rememberNavController<DialogDestination>(
        initialBackstack = emptyList()
    )

    NavBackHandler(navController)

    NavHost(navController) { destination ->
        when (destination) {
            ScreenDestination.First -> { /* ... */ }
            ScreenDestination.Second -> { /* ... */ }
        }
    }

    DialogNavHost(dialogController) { destination ->
        Dialog(onDismissRequest = { dialogController.pop() }) {
            when (destination) {
                DialogDestination.First -> { /* ... */ }
                DialogDestination.Second -> { /* ... */ }
            }
        }
    }
}

DialogNavHost is an alternative version of NavHost that is better suited for showing dialogs. It is based on AnimatedNavHost and provides smoother transition between dialogs without scrim flickering:

And this is how it looks in the regular NavHost:

Note

DialogNavHost doesn't wrap your composables into a Dialog. You need to use either Dialog or AlertDialog composable inside contentSelector yourself.