androidandroid-jetpack-composeandroid-jetpack-compose-scaffold

Jetpack Compose Scaffold + Modal Bottom Sheet


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() },
)

Solution

  • 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