fillMaxSize() on Scaffold content having no impact

Viewed 256

I am trying to make a short content center-aligned on the screen inside a Scaffold content. Using fillMaxSize() on the scaffold contents seems like having no impact at all. How can I make this content full size?

Scaffold(
    topBar = { },
    floatingActionButtonPosition = FabPosition.End,
    floatingActionButton = { },
    bottomBar = { }
) { paddingValues ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(paddingValues)
    ) {
        NavHost(
            navController = navController,
            startDestination = Screen.Running.route
        ) {
            composable(Screen.Business.route) {
                BusinessScreen(onSetAppTitle = { appTitle = it })
            }
            ...
        }
@Composable
fun BusinessScreen(onSetAppTitle: (String) -> Unit) {
    LaunchedEffect(Unit) {
        onSetAppTitle("Business Dashboard")
    }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(16.dp)
    ) {
        Text("Business Dashboard")
    }
}
1 Answers

verticalScroll wraps content, and can be stretched to very long. That's why .fillMaxHeight (which is a part of fillMaxSize) doesn't work inside verticalScroll: it's ambiguous.

You need to set height explicitly. This is the case when you can pass it from onSizeChanged modifier added on the top Column.

But I believe that your composition is generally not really good: applying verticalScroll to a view on top of the layout tree is not the best solution.

Try adding verticalScroll inside each route only to those views that are really bigger than the screen.

Related