Equal width elements in Jetpack Compose Row

Issue

What is the easiest way to make the width the same for all the children of a Row in Jetpack Compose? For example, if there are 4 Box elements within a Row, I want each Box to have 1/4 the width (minus the padding) of the entire row.

Solution

You can use modifier. Row which contains max width and add weight to the box like

Modifier.fillMaxWidth().weight(1f)

For example,

Row(
        modifier = Modifier.fillMaxWidth().padding(5.dp)
    ) {
        for (i in 0..3){
            Box(modifier = Modifier.fillMaxWidth().height(100.dp).weight(1f).padding(horizontal = 5.dp).background(Color.Blue))
        }
    }

Answered By - Shruti Patel