androidandroid-jetpack-composeandroid-jetpack-compose-layout

Jetpack Compose Fill remaining space in Row


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?


Solution

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

    enter image description here