How can I make a row take all remaining height?

Support
1

I am creating a game by using the Unscramble sample as a starting point. The app will be a single full screen with no scrolling. The screen will show an AppBar, a status bar, a canvas and a grid of buttons. Three rows have determined size. I want the canvas to occupy all of the remining height but have yet to find how to do that.

Column(modifier = Modifier
  .statusBarsPadding()
  .verticalScroll(enabled = false, state = rememberScrollState())
  .safeDrawingPadding()
  .padding(mediumPadding)
  .heightIn(max = screenHeight),
  verticalArrangement = Arrangement.SpaceBetween,
  horizontalAlignment = Alignment.CenterHorizontally
) {
    MomentumAppBar(
      modifier = Modifier,
      gameViewModel = gameViewModel,
      title = { Text(“MSR”) })

    Row(
	  modifier = Modifier
		.background(Color.LightGray)
		.fillMaxWidth()
    ) {
	  // contains read-only Text fields
    }

    Row(
	  modifier = Modifier
		.fillMaxWidth()
		.height(400.dp)
    ) {
	    Canvas(
		modifier = Modifier
			.background(Color.Cyan)
			.fillMaxSize()
	) {
		// display only
	}

    // 3 x 3 grid controls movement of game tokens
    DirectionGridLayout(
	  resetScroll = {
		scope.launch {
			scrollState.scrollToItem(0)
		}
 	  },
 	    modifier = Modifier
		  .navigationBarsPadding()
		  .imePadding(),
	    gameViewModel = gameViewModel
    )

}
2

Use modifier.weight(1). If only 1 element has weight, it takes all the remaining space. If several elements have, they take space in proportion to their weight.

3

Thanks. It’s not perfect yet but it helps.