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

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?

fun AppPreview() {

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


  • Update: Based on your comment.

    You can handle this by using Scaffold.

        topBar = {
            // top area
        bottomBar = {
            // bottom area
    ) { paddingValues ->
        // middle area
        Box(modifier = Modifier.padding(paddingValues))