CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
sandorb
sandorb

Reputation: 689

Jetpack Compose row items next line based on dynamic width

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)
                }


            }
        }
    }
}

Upvotes: 13

Views: 9102

Answers (2)

Magnus Lundberg
Magnus Lundberg

Reputation: 803

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.

Upvotes: 13

sandorb
sandorb

Reputation: 689

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

Upvotes: 16

Related Questions