BottomSheet navigation
To use the BottomSheetNavigator you should first import cafe.adriel.voyager:voyager-bottom-sheet-navigator (see Setup).
Voyager provides a specialized navigator for ModalBottomSheetLayout: the BottomSheetNavigator.
Call it and set the back layer content. The BottomSheet content (or the front layer) will be set on demand.
1
setContent {
2
BottomSheetNavigator {
3
BackContent()
4
}
5
}
Copied!
You can also use the default Navigator to navigate on your back layer content.
1
setContent {
2
BottomSheetNavigator {
3
Navigator(BackScreen())
4
}
5
}
Copied!
The BottomSheetNavigator accepts the same params as ModalBottomSheetLayout.
1
@Composable
2
public fun BottomSheetNavigator(
3
modifier: Modifier = Modifier,
4
hideOnBackPress: Boolean = true,
5
scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
6
sheetShape: Shape = MaterialTheme.shapes.large,
7
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
8
sheetBackgroundColor: Color = MaterialTheme.colors.surface,
9
sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
10
// ...
11
)
Copied!
Use the LocalBottomSheetNavigator to show and hide the BottomSheet.
1
class BackScreen : Screen {
2
3
@Composable
4
override fun Content() {
5
val bottomSheetNavigator = LocalBottomSheetNavigator.current
6
7
Button(
8
onClick = {
9
bottomSheetNavigator.show(FrontScreen())
10
}
11
) {
12
Text(text = "Show BottomSheet")
13
}
14
}
15
}
Copied!

Sample

Source code here.
Last modified 3mo ago
Copy link
Contents
Sample