How to fill the whole screen in landscape mode with the sheetContent of BottomSheetScaffold (Jetpack compose)?

560 Views Asked by At

I want to fill the whole screen in landscape mode with the bottom sheet scaffold but there is always some leftover space to the right and left of it : Example result

I have removed all possible padding and used modifier.fillMaxSize everywhere but the spaces remains.

Here is the ver short code I used :

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TESTApplicationTheme {
                MyUI()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyUI() {
    val scaffoldState = rememberBottomSheetScaffoldState()
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        modifier = Modifier.fillMaxSize(),
        scaffoldState = scaffoldState,
        sheetContent = {
            Box(modifier = Modifier.fillMaxSize().background(Color.Blue))
        },
        sheetDragHandle = null,
    ) {
        // app UI
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text(text = "Rest of the app UI")

            Button(
                onClick = {
                    coroutineScope.launch {
                        scaffoldState.bottomSheetState.expand()
                    }
                },
            ) {
                Text(text = "expand")
            }
        }
    }
}
1

There are 1 best solutions below

0
Abdoulito On

It seems like the current latest version of compose and material3 limits the width of bottomSheet to 640.dp. versions: 'androidx.activity:activity-compose:1.7.2' 'androidx.compose.material3:material3:1.2.0-alpha04'

See the docs: https://m3.material.io/components/bottom-sheets/specs