Jetpack Compose row items next line based on dynamic width

Question

I have routes in a (stop's)row, and I would like to continue showing them on the following line if they achieve the edge of the screen. Could you please help me with that?

@Composable
fun StopView(
    stop: Stop
) {
    Column {
        Text(text = stop.name)
        Row{
            stop.routes.forEach { route ->
                Row (modifier = Modifier.padding(10.dp).align(Alignment.CenterVertically)) {

                    Image(painterResource(id = **imageName**),route.type.toString(), modifier = Modifier
                        .height(25.dp)
                        .width(25.dp))
                    Spacer(modifier = Modifier.width(5.dp))
                    Text(text = route.name)
                }


            }
        }
    }
}

Answer 1

I successfully solved it with Jetpack Compose Flow Layouts from Accompanist library.

Answer 2

You can use the FlowRow composable.

https://developer.android.com/jetpack/compose/layouts/flow

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}

FlowRow and FlowColumn are composables that are similar to Row and Column, but differ in that items flow into the next line when the container runs out of space. This creates multiple rows or columns.