I am trying to build a screen for a simple Calculator app using Compose. My idea was to start at the bottom and then build my way to the top, which means, all the space that is left in the upper part of the screen (after laying out the buttons) should be occupied by a textfield. I’ve gotten this far:

This is the code I wrote to achieve the above:

@Composable
fun Screen(
    modifier: Modifier = Modifier,
    keys: List<AppButtonProperties>
) {
    Box(
        modifier = modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomEnd
    ) {
        Column {
            TextField(
                value = "",
                onValueChange = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.35f)
                    .padding(bottom = 5.dp),
                colors = TextFieldDefaults.colors(unfocusedContainerColor = Color.Red) //colored for demonstration purpose
            )
            Box {
                LazyVerticalGrid(
                    columns = GridCells.Fixed(4),
                ) {
                    items(keys) { key ->
                        AppButton(modifier = Modifier.padding(2.dp), key)
                    }
                }

            }
        }
    }
}

As is evident in the code, I made a very lousy attempt of fillMaxHeight(0.35f) to make the textfield fill up most of the available space, but surely, there’s a better of doing it. Please help.