Jetpack Compose ModalBottomSheetLayout Sample

May 6, 2022
@Composable
fun CardScreen() {
    val scaffoldState = rememberScaffoldState()
    val modalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Button(onClick = {
                coroutineScope.launch {
                  modalBottomSheetState.show()
                }
            }) {
                Text(text = "Show")
            }
        }
    }

    ModalBottomSheetLayout(
          sheetState = modalBottomSheetState,
          sheetContent = {
              LazyColumn {
                  item {
                      TextButton(modifier = Modifier.fillMaxWidth(), onClick = {
                          // do something
                      }) {
                          Row {
                              Icon(
                                  imageVector = Icons.Filled.Add,
                                  // painterResource(id = R.drawable.ic_baseline_add_24),
                                  contentDescription = "New Album"
                              )
                              Text("New Album")
                              Spacer(modifier = Modifier.weight(1f))
                          }
                      }
                  }
              }
          }
      ) {
          // you can also opt to put screen composable / scaffold here
      }
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.