Jetpack Compose Fill remaining space in Row

Question

I have a Row with max width, I want to place a Icon at start then a text and then another Icon at end. I have specific sizes of icon and I want the Text to fill up the remaining space.

Row(
   Modifier
   .fillMaxWidth()
   .height(30.dp)
){
  Icon(Modifier.size(20.dp))

  Text() // Fill this with remaining space available

  Icon(Modifier.size(20.dp))
}

If I do fillMaxWidth in text then Icons goes out of the view.

How to do that?

Answer 1

You can apply Modifier.weight(1f) to the Text composable.

Something like:

Row(
    Modifier
        .fillMaxWidth()
        .height(30.dp)
){
    Icon(Icons.Filled.Add,"", Modifier.size(20.dp))

    Text("Text",Modifier.weight(1f)) // Fill this with remaining space available

    Icon(Icons.Filled.Add,"", Modifier.size(20.dp))
}