How can you fill a row with two buttons: First button should take the max width, but there should be...

# compose

[hfhbd]

How can you fill a row with two buttons: First button should take the max width, but there should be another minified button.

@Composable
fun InfoButton(infoTest: String, button: @Composable (Modifier) -> Unit) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Info(infoTest)
        button(Modifier.fillMaxWidth())
    }
}

This code renders the icon at the left side, I want to show them on the right side

[hfhbd]

If I simple switch the order, the Info icon is not visible anymore, because the first child takes the whole width

[Paul Woitaschek]

Probably using the weight modifier

[hfhbd]

Thanks. Do you have a good documentation about this modifier? I also tried it in another place, but it was more trial and error 😄
I only found it here https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements

[Paul Woitaschek]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)

[hfhbd]

FYI:

Row(modifier = Modifier.fillMaxWidth()) {
  button(Modifier.weight(9f))
  Info(infoTest, Modifier.weight(1f))
}

[Paul Woitaschek]

That's now 9:1. If you want the first to expand while the last one should be wrap content then you can remove the weight from the second one

[Chris Sinco [G]]

If one sibling has weight(x) and the other has no weight modifier, then it means the sibling with weight will take the remaining space. So for your use case, if you want that Info icon to be sized to content, you don’t need to establish that 9:1 ratio

[Chris Sinco [G]]

Because the float passed to weight is to help decide how to distribute the remaining for all children that are using the weight modifier

[hfhbd]

Thanks!