How do I make Bottom Sheet cover whole screen in Jetpack Compose

Question

I am using Jetpack Compose and trying to make a Login Screen cover the whole screen when the user clicks the login button in the TopAppBar.

I am using a combination of ModalBottomSheetLayout and a Scaffold so I can have a TopAppBar and a BottomAppBar.

Currently when the login screen is displayed it only covers half of the screen.

                       val coroutineScope = rememberCoroutineScope()
                        val bottomState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
                        ModalBottomSheetLayout(
                            sheetState = bottomState,
                            sheetShape = MaterialTheme.shapes.large,
                            sheetContent = {
                                FullScreen()
                            }
                        ) {

                            Scaffold(
                                topBar = {
                                    TopAppBar(
...
                                content = {

                                    NavHost(navController = navController,
                                        startDestination = "journey") {
                                        composable("journey") { JourneyScreen() }
...
                               bottomBar = {
                                    BottomAppBar(
                                        content = {
                                            BottomNavigation() {

                                                val navBackStackEntry by navController.currentBackStackEntryAsState()
...

@Composable
fun FullScreen() {
    Box(modifier = Modifier
        .fillMaxSize()
    ) {
        Text("Full Screen")
    }
}

Have been stuck on this for way too long and any help is appreciated.

Answer 1

The animateTo is now internal.

With M3 (1.1.0) you can use the expand method

scope.launch { state.expand() }

With M2 (1.4.0) and M3 (1.1.0) you can set the attribute skipHalfExpanded to true

val state = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = true
)

and then use the show method:

scope.launch { state.show() }

---

Before M2 (1.4.0) to have a fullscreen ModalBottomSheetLayout, instead of state.show() you can use:

scope.launch { state.animateTo(ModalBottomSheetValue.Expanded) }