fillMaxSize() on Scaffold content having no impact

Issue

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

Solution

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.

Answered By - Philip Dukhov