Any ideas on the list with fit/wrap width on item in Jetpack compose

Question

I need to implement next UI element:

• Unknown size list of strings
• Any item should be wrap content.
• If an item is not fitted to row, he will be in the next row.
• All list/grid is centered

Answer 1

You can use FlowRow from accompanist-flowlayout to implement this. It renders its children horizontally (like Row) but also wraps them by moving to the new line if they don't fit in the existing line. It also allows to configure horizontal and vertical spacing between items.

To nicely handle very long strings (that will not fit into single line themselves) you can set overflow = TextOverflow.Ellipsis and maxLines = 1 on Text.

@Composable
fun HashTagList(hashTags: List<String>) {
    FlowRow(
        modifier = Modifier.padding(8.dp),
        mainAxisAlignment = MainAxisAlignment.Center,
        mainAxisSize = SizeMode.Expand,
        crossAxisSpacing = 12.dp,
        mainAxisSpacing = 8.dp
    ) {
        hashTags.forEach { hashTag ->
            Text(
                text = hashTag,
                modifier = Modifier
                    .background(
                        color = colorForHashTag(hashTag),
                        shape = RoundedCornerShape(4.dp)
                    )
                    .padding(8.dp),
                overflow = TextOverflow.Ellipsis,
                maxLines = 1
            )
        }
    }
}