Revamp Your Layouts: Introducing FlowRow and FlowColumn for Effortless Content Arrangement

type

Post

status

Published

date

Apr 7, 2023

slug

jetpack-compose-new-flowrow-flowcolumn

summary

Efficiently arrange items with FlowRow and FlowColumn layouts in Jetpack Compose. Achieve dynamic sizing and item flow through weight distribution.

Effortlessly Organize Your Content with FlowRow and FlowColumn Layouts

Are you struggling with arranging your content within a container with varying sizes? Do you find it challenging to fit all your items into a confined space without sacrificing the overall design?

Use case of FlowRow and FlowColumn in Jetpack Compose

FlowRow and FlowColumn layouts efficiently arrange items in containers with unknown or variable sizes.

The containers enable items to flow to the next row or column when there is insufficient space, and dynamic sizing can be achieved through weight distribution.

Code Demo of FlowRow


@Composable
fun Filters() {
  val filters = listOf(
    "Washer/Dryer", "Ramp access", "Garden", "Cats OK", "Dogs OK", "Smoke-free"
  )
  FlowRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp)
  ) {
    filters.forEach { title ->
      var selected by remember { mutableStateOf(false) }
      val leadingIcon: @Composable () -> Unit = { Icon(Icons.Default.Check, null) }
      FilterChip(
        selected,
        onClick = { selected = !selected },
        label = { Text(title) },
        leadingIcon = if (selected) leadingIcon else null
      )
    }
  }
}

This code defines a composable function called Filters that creates a list of filters and displays them using FlowRow. Each filter has a selectable FilterChip component that allows users to filter the displayed content.

Learn More

Check out more at What’s new in the Jetpack Compose March ’23 release