Respect the bottom safe area with displayed bottom bar

[theHonzic]

I am currently exploring approaches to hiding bottom app bar. Came across your solution, which is really similar to mine. However the same problem persists. Editing BottomScreen2's Composable, there is content hidden underneath the bottom app bar. This means the innerPadding of scaffold does not react to change of its contentPadding.

@Composable
fun BottomScreen2(navController: NavController) {
    Column(
        modifier = Modifier
            .verticalScroll(
                enabled = true,
                state = rememberScrollState()
            )
            .fillMaxSize()
            .padding(20.dp)
            .background(MaterialTheme.colorScheme.background),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        for (i in 1..100) {
            Text("This is Screen 2, item $i")
        }
    }
}

[saurabhthesuperhero]

Correct If I am wrong so is this your content from BottomScreen2 is getting hiddent at bottom and going under bottom navigation ? The way in my current Application I have used is :

 { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            AppNavigation(navController)
        }
    }

Try this and let me know. Btw Alternate Approach would be if you want to stick to blog as i am passing modifier to Appnavigation class there you can use that modifer property to add padding to your composables , i havent done that in blog you can do that if needed or for simply you can remove modifier from app navigation wrap app navigation with inner padding.