26

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() },
)
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Arrowsome
  • 2,649
  • 3
  • 10
  • 35

1 Answers1

48

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • 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 '22 at 14:51