Layout with a column and three rows where the middle one should take all the remaining space

Question

I'd like to create a Jetpack Compose Desktop layout where there is:

• top row for buttons
• middle row for content taking up all the remaning space
• bottom row for status labels

I tried this, but I cannot figure out how to make the middle row not to push the last row outside the visible area. Am I even using the correct components for this? I'm not sure if this is even achievable with columns and rows or I need something else?

@Preview
@Composable
fun AppPreview() {

    Box{
        Column {
            Row(Modifier.border(width = 1.dp, color = Color.Blue).fillMaxWidth()) { Text("top") }
            Row(Modifier.border(width = 1.dp, color = Color.Magenta).fillMaxWidth().fillMaxHeight()) { Text("middle") }
            Row(Modifier.border(width = 1.dp, color = Color.Green).fillMaxSize()) { Text("bottom") }
        }
    }
}

Answer 1

Update: Based on your comment.

You can handle this by using Scaffold.

Scaffold(
    topBar = {
        // top area
    },
    bottomBar = {
        // bottom area
    }
) { paddingValues ->

    // middle area
    Box(modifier = Modifier.padding(paddingValues))
}