I have a Row which has an IconButton on the left, then 16dp padding, then a Text that takes up the remaining width in the Row, then finally on the right, another Text which should take up 25% of the width of the Row. Everything works except that the second Text is actually taking up 25% of the width of the Row, excluding the width of the IconButton. This makes the second Text’s width too thin.

I need the second Text to be exactly 25% wide because I have other Rows with Texts (not shown) that need to be aligned with this one.

So how do I make the IconButton’s width actually be factored into the width of the second Text? Here’s the simplified snippet:

Row(
    modifier = Modifier
        .padding(bottom = 16.dp)
        .fillMaxWidth()
        .background( color = Color(50, 50, 50) )
) {
    IconButton(
        modifier = Modifier
            .background(Color(100, 100, 100), CircleShape),
        onClick = { /* nothing */ }
    ) {
        Icon(Icons.Filled.Star,null, tint = Color(255, 192,0))
    }

    Text(
        modifier = Modifier
            .weight(1f) // Use weight 1f to take up remaining space
            .padding(start = 16.dp) // put left padding on the text: between the icon button & the text
            .background(color = Color(100, 100, 100)),
        text = "Remaining space",
        style = MaterialTheme.typography.bodyMedium
    )

    Text(
        text = "25%",
        modifier = Modifier
            .fillMaxWidth(0.25f) // Take up exactly 25% of the width
            .background(color = Color(150, 150, 150)),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.bodyMedium
    )
}

Here’s a (cropped) screenshot of the output:

And a screenshot that proves that the second Text only takes up 25% of the Row’s width excluding the IconButton’s width (it looks like the second Text’s width * 4 overlaps the IconButton by a couple pixels, but in my code before I simplified it, there was no overlap so I don’t think it’s relevant):

Initially the IconButton was in its own function, so I extracted it out of the function. I’ve also tried setting the modifier.size() of the IconButton instead of just using the default size. Both of these had no effect.

Expected result: the second Text takes up exactly 25% of the width of the IconButton + padding + first Text + second Text
Actual result: the second Text takes up exactly 25% of only the width of the padding + first Text + second Text.