https://kotlinlang.org logo
#compose
Title
# compose
d

dorche

06/06/2022, 1:18 PM
I have an app that uses Scaffold at Activity level that has a bottom bar (bottom nav). Now there is one screen on the bottom nav that needs to display a non-dismissible (non-dismissible being important here) bottom sheet. The problem is that if I put a BottomSheetScaffold at “Screen” level, that won’t be aware of the paddings/insets (e.g. bottom bar) from the Activity Scaffold. This obviously means that my bottom nav is covering some of the sheet content. Is there a good way to handle this or do I just need to hardcode (I hate it already) some bottom padding to my sheet content?
Activity:
Copy code
ModalBottomSheetLayout(
        sheetContent = {
            bottomSheetNavigator.sheetContent(this)
        },
        sheetState = sheetState,
        sheetShape = RectangleShape,
        sheetBackgroundColor = Color.Transparent,
        sheetElevation = 0.dp,
    ) {
        Scaffold(
            bottomBar = {
                AnimatedVisibility(
                    visible = showBottomNav,
                    enter = slideInVertically(initialOffsetY = { it }),
                    exit = slideOutVertically(targetOffsetY = { it }),
                ) {
                    BottomBar(destination)
                }
            },
            content = content
        )
    }
^I use Compose Destinations but I don’t think that matters in this case. The Screen level composable that goes into the scaffold is then something like:
Copy code
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)
BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetPeekHeight = 150.dp,
    sheetShape = ...,
    sheetContent = {
      // sheet content is now NOT aware of the bottom nav and bottom nav covers the bottom part of the sheet content
    }
) {
   // screen content correctly has padding/inset for bottom nav
}
a

Albert Chang

06/06/2022, 2:20 PM
I think Destinations is exactly what matters in this case. Not really familiar with it but I don’t see an easy way to pass data from the root to the individual screens with Destinations, while you can easily do that if you are using navigation-compose or Decompose.
d

dorche

06/06/2022, 2:25 PM
Passing data is pretty easy with Destinations too, would that be the best solution? To pass the PaddingValues provided by the Scaffold to the Screen Level Composable which can then pass it to the bottom sheet content to be consumed there again
a

Albert Chang

06/06/2022, 2:31 PM
Yeah that’s basically what you should do.
Or you can pass a
Modifier.padding(paddingValues)
to the screen.
9 Views