A modern programming language that makes developers happier.

kotlinlang

Screen Shot 2021-03-20 at 07.56.24.png

Tip: I am not sure it is the best way to accomplish this, but using unweighted and weighted items in a `Row` lets you define which one occupies all the space available.. For example, I wanted to display some text, and on the right side (=end) of the row, I want an icon, and I was able to achieve it like this:

```@Composable
fun TestLayout() {
    val border = Modifier.border(1.dp, color = Color.Red)
    Row(modifier = Modifier.fillMaxWidth().padding(10.dp)) {
        Text("Text", modifier = border.weight(1f)) // weighted
        Icon(Icons.Outlined.Refresh, contentDescription = "refresh", modifier = border) // unweighted
    }
}```


Yes, currently it's the best (or the only?) way. Also, it goes the other way: if you have a very long text, the Text component will push Icon out of the row or squash it unless you put `.weight(1f)` on the Text - then text will be snapped or wrapped correctly.

Yes this is wanted behavior and the Best and only official way to strech components to fill max size.
But in your case it would also work (maybe be even better) to use the horrizontal arrangement attribute of Row with a `Arrangement.SpaceBetween`to pin both children components to the sides.
Code would then look something like this:
```Row(
    modifier = Modifier.fillMaxWidth().padding(10.dp), 
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text("Text", modifier = border)
    Icon(Icons.Outlined.Refresh, contentDescription = "refresh", modifier = border)
}```


<@U01JKDF3TS4> I tried your suggestion and it did not work with a different case:

```// works
Row {
            Column(modifier = Modifier.padding(5.dp).weight(1f)) { ... }
            IconButton(onClick = {}) {
                    Icon(
                        Icons.Outlined.Delete,
                        contentDescription = null,
                    )
                }
 }

// doesn't work
Row(horizontalArrangement = Arrangement.SpaceBetween) {
            Column(modifier = Modifier.padding(5.dp)) { ... }
            IconButton(onClick = {}) {
                    Icon(
                        Icons.Outlined.Delete,
                        contentDescription = null,
                    )
                }
 }```

What's the problem?
```val border = Modifier.border(1.dp, color = Color.Red)
Row(
    modifier = Modifier.fillMaxWidth().padding(10.dp),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Column(modifier = Modifier.padding(5.dp)) {
        Text("Text 1", modifier = border)
        Text("Text 2", modifier = border)
    }
    IconButton(onClick = {}) {
        Icon(
            Icons.Outlined.Delete,
            contentDescription = null,
        )
    }
}```


the problem is that if your text is really long, with weight(1f) the text will wrap and the icon will be visible. with your solution the icon is being pushed out of the screen...