I am trying to build a complex app, that has multiple different nav graphs, screens etc. I got stuck while implementing the Flow for Login.

I don’t really see which is the most perfect way of implementing the Scaffold, while keeping only one NavHost and not causing too many recompsition and too complex ui logic.

There is like a flow of three different navgraphs which we are talking about:

Login Graph -> First Login Graph (after successfully authenticating but the user needs to provide some additional data the first time the user logs in) -> The Main Screen.

            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background,
            ) {
                if (!state.isLoading) {
                    NavHost(
                        navController = navController,
                        startDestination = LoginNavigationGraph
                    ) {
                        loginNavigationGraph(
                            navHostController = navController,
                        )

                        firstLoginOwnerNavGraph(
                            navHostController = navController,
                        )

                        mainScreenOwnerNavGraph(
                            navHostController = navController,
                        )
                    }
                }

On Each composable I used a Scaffold there so each screen had a Scaffold at its root like this:

@Composable
private fun FirstLoginOwnerFirstScreen(
    isContinueButtonAvailable: Boolean,
    lodgingPropertyList: ImmutableList<PropertyTag>,
    selectedPropertyList: ImmutableList<Int>,
    isLoading: Boolean,
    onContinueButtonClicked: () -> Unit,
    onAction: (FirstLoginOwnerFirstScreenAction) -> Unit,
) {
    Scaffold(
        topBar = {
            MyAppHeader(
                showBackButton = false
            )
        }
    ) { paddingValues -> .... }

and it is being used by a similalry named composable with the end name “Root” so I can use the composable witouth the postif for Preview

@Composable
fun FirstLoginOwnerFirstScreenRoot(
    viewModel: FirstLoginOwnerFirstScreenViewModel = hiltViewModel(),
    firstLoginOwnerFlowViewModel: FirstLoginOwnerFlowViewModel,
    onNextScreenPressed: (ImmutableList<PropertyTag>) -> Unit,
) { .....

And i add them in each nav graph like this:

fun NavGraphBuilder.firstLoginOwnerNavGraph(
    navHostController: NavHostController,
) {
    navigation<OwnerGraph.FirstLogin>(
        startDestination = OwnerGraph.FirstLogin.FirstLoginScreen1
    ) {
        composable<OwnerGraph.FirstLogin.FirstLoginScreen1> { navBackStackEntry ->
            val registrationFlowViewModel =
                navBackStackEntry.sharedViewModel<FirstLoginOwnerFlowViewModel>(navController = navHostController)

            FirstLoginOwnerFirstScreenRoot(
                firstLoginOwnerFlowViewModel = registrationFlowViewModel,
                onNextScreenPressed = { propertyTags ->
                    navHostController.navigate(
                        OwnerGraph.FirstLogin.FirstLoginScreen2(
                            list = propertyTags.toPropertyTagNavigation()
                        )
                    )
                }
            )
        }

And I came to the point that after the First login is completed, I navigate the user to the First Main Screen and this time I started having doubts about how I went with it so far because now I would need my bottom nav bar and using the top app bar more extensively.

First I thouth of adding a Scaffold here and a Second NavHost so I can manage the bottom navigation at one place

fun NavGraphBuilder.mainScreenOwnerNavGraph(
    navHostController: NavHostController,
) {
    navigation<OwnerGraph.MainScreen>(
        startDestination = OwnerGraph.MainScreen.MainScreenFirstScreen()
    ) {
        composable<OwnerGraph.MainScreen.MainScreenFirstScreen> { navBackStackEntry ->
            Scaffold() {
               NavHost(...
        }
    }
}

But I read from multiple sources it is not a good idea to do so.

So I started of thinking like “elavating” one Root scaffold all the way up the hierarchy which I could use, and started removing the scaffold from each composables in a NavGraph

            Scaffold(
                topBar = {
                    ???
                }
            ) {
                if (!state.isLoading) {
                    NavHost(
                        navController = navController,
                        startDestination = LoginNavigationGraph,
                        modifier = Modifier
                            .padding(it)
                    ) {
                        loginNavigationGraph(
                            navHostController = navController,
                        )

                        firstLoginOwnerNavGraph(
                            navHostController = navController,
                        )

                        mainScreenOwnerNavGraph(
                            navHostController = navController,
                        )
                    }

                }
            }

But now I started wondering now how do I set the TopAppBar for example when the user navigates to the FirstLoginOwnerFirstScreenRoot? How do I control its visibility or its content? What if depending on the screen different top app bar needed? How do I set the function of the navigation button. Of course 99% it is just a navcontroller.popBackStack() but what if I want to do something else in some random screen down the line?

So I had the idea of creating a ScaffoldElement data class, where I would store them in a hashMap so accordingly of the current navigation destination I could get it from the list like this:

data class MyAppScaffoldElement(
    val topAppBar: @Composable (NavController) -> Unit = {
        MyAppHeader()
    },
)

val myAppList = hashMapOf(
    LoginNavigationGraph.LoginMainScreen::class.qualifiedName to MyAppScaffoldElement()
)

and in the main place:

    setContent {
        val navController = rememberNavController()
        val backStackEntry = navController.currentBackStackEntryAsState()


        val myAppScaffoldItemTopBar = remember(backStackEntry.value) {
            backStackEntry.value?.destination?.route?.let { myAppList[it] }?.topAppBar
        }

        MyAppTheme {
            Surface {
                Scaffold(
                    topBar = {
                        myAppScaffoldItemTopBar?.invoke(navController)
                    }
                ) { ...

But I feel like this is a terrible idea in general.

Maybe the top app bar is handled now but thinking of handling the bottom nav bar like this seems to be a really bad idea.

So i started of thinkin in using CompositionLocals so like I would keep the list and change its value

    val MyAppScaffold = compositionLocalOf<String?> { null }
    .....
    
     val name = remember { mutableStateOf("") }

MyAppTheme {


    Scaffold(
        topBar = {
            CompositionLocalProvider(MyAppScaffold provides name.value) {

            }
        }
    )

But this also seems to be a terrible idea.

So my question is how should I handle or build up a scalable commpose app?

I tried lookin at the nowInAndroid and other sample apps but did not really help.

Or should i just continue adding a Scaffold into each Screen?

What I am afraid is combining it with the bottom navigation this way after each recompisition it will look janky.

Or should I just add a second NavHost?