24

I'm trying to design a layout using Compose that consists of:

  1. TopAppBar
  2. Body (content)
  3. BottomAppBar
  4. A Bottom Sheet that represents a menu when clicked (Modal Bottom Sheet)

-------TopAppBar-------

------MainContent------

------BottomAppBar-----

----ModalBottomSheet---

Compose offers 3 components:

  1. Scaffold
  2. BottomSheetScaffold
  3. ModalBottomSheetLayout

Scaffold has no bottom sheet property

BottomSheetScaffold has no BottomAppBar property

ModalBottomSheetLayout has only content and sheetContent

Which of these components should I combine and in what **structure** to achieve what I want?

Scaffold(
  topBar = { TopBar() },
  content = { innerPadding -> Body(innerPadding) },
  bottomAppbar = { BottomAppBar() }
)
ModalBottomSheetLayout(
  sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden
  ),
  sheetContent = { SheetContent() },
)
BottomSheetScaffold(
  scaffoldState = ...,
  sheetContent = { SheetContent() },
  content = { ScreenContent() },
)

1 Answer 1

45

You can use something like:

val bottomState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
ModalBottomSheetLayout(
    sheetState = bottomState,
    sheetContent = {
        //. sheetContent
    }
) {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "TopAppBar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(modifier = Modifier) {
                IconButton(
                    onClick = {
                        coroutineScope.launch { bottomState.show() }  
                    }
                ) {
                    Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                }
            }
        },

        content = { innerPadding ->
            //...main content
        }
    )
}

enter image description here

1
  • 1
    We can combine bottomSheetState and drawerState with rememberBottomSheetScaffoldState. How can we do the same with rememberModalBottomSheetState, so that we have both modalBottomSheet and drawer?
    – Pitos
    Jul 18, 2022 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.