As we can see Jetpack Compose grows like crazy. Last week they announced that Jetpack Compose went to Beta! Today we will talk about how to create bottom sheets in Jetpack Compose.

To implement the bottom sheet, we need to use BottomSheetScaffold. It was annotated as an ExperimentalApi, so to use it we need to add @ExperimentalMaterialApi annotation to the method where we will use.

Let’s look at this code block closely.

First, we define bottomSheetScaffoldState which will hold the state of BottomSheetScaffold. In turn it holds drawerState, bottomSheetState, snackbarHostState. In this tutorial, we focus only on bottomSheetState

sheetContent — defines the content of our Bottom Sheet. You put any composable you want.

sheetPeekHeight — sets the peek height of the Bottom Sheet. We will use 0.dp to hide the Bottom Sheet when the app starts.

So to interact with Bottom Sheet, we just must use these methods:

bottomSheetScaffoldState.bottomSheetState.expand() — to expand

bottomSheetScaffoldState.bottomSheetState.collapse() — to collapse

But these methods are suspend functions and that’s why they must be used in CoroutineScope.

For this purpose we can use rememberCoroutineScope to create coroutineScope .

coroutineScope.launch {
if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
bottomSheetScaffoldState.bottomSheetState.expand()
} else {
bottomSheetScaffoldState.bottomSheetState.collapse()
}
}

Now run our app and see what happens: