How can I make the check left-aligned? Code in :thread:. (If the image is blank, clicking on it seem...

# compose

[adjpd]

How can I make the check left-aligned? Code in 🧵. (If the image is blank, clicking on it seems to help)

[adjpd]

Row(Modifier
    .fillMaxWidth()
    .height(IntrinsicSize.Min)
) {
  Text("Hello", fontSize = 34.sp)
  Icon(Icons.Default.Check, null,
    Modifier.fillMaxHeight()
    .weight(1f)
    .background(Color.Red)
  )
}

[adjpd]

I can put the icon in a row, but the the size of the icon is smaller than the above.

[Nicolas Chaduc]

Why just not use sapce with same background than icon use weight 1 and icon with wrap width ? It’s to has more click cpace on icon ?

[Chris Sinco [G]]

I'd put the icon in a row and remove the outer height modifier (IntrinisicSize.Min). Not sure why you need to set the size explicitly versus the default fit to content?

[adjpd]

If I use a row, then the icon is smaller. And I want the height of the icon to match the height of the text, hence the intrinsic. Thanks for the suggestions. I'll try them later.

[Chris Sinco [G]]

Ah yes that is tricky. You may have to go with a custom layout, though when I ran your code in Studio, it seems you can pull off the same effect by setting the outer Row container background to Red, setting the background of Text to Green, then setting Modifier.aspectRatio(1f) and removing weight on the Icon to maintain the size and height equal to the text

Row(
    Modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Min)
        .background(Color.Red)
) {
    Text(
        "Hello",
        fontSize = 34.sp,
        modifier = Modifier.background(Color.Green)
    )
    Icon(
        Icons.Default.Check,
        null,
        Modifier
            .fillMaxHeight()
            .aspectRatio(1f)
    )
}

[Chris Sinco [G]]

Preview screenshot (1f and 2f fontScale)

[adjpd]

Great Chris! I hadn't been using aspectRatio before. Only weights. Nice to know I have aspectRatio in my toolkit. Cheers.