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.
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) }