CODEWITHSUNDEEP
androidandroid-jetpack-composeflowlayoutjetpack-compose-accompanist
Rulogarcillan
Rulogarcillan

Reputation: 1232

how to add spacing between row and columns in FlowLayout?

I'm migrating FlowLayout from the accompanist library with the native compose v1.4.0. To give spacing between columns and rows we had FlowCrossAxisAlignment and FlowMainAxisAlignment, however now this approach is not available, on the vertical axis in the new api of FlowRow we can use Arrangement.spacedBy(16.dp) but there is nothing similar for the other axis, the solution they give is to put bottom padding on each element but that is also applied for the last row. Is there a solution for this?

Issue: https://issuetracker.google.com/issues/268365538

This is my code and the result:

FlowRow(modifier = modifier.background(color =Color.Blue), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
            chips.forEach { chip ->
                Chip(
                    modifier = Modifier.background(color = Color.Cyan).padding(bottom = 16.dp),
                    label = chip.label
                )
            }
        }

enter image description here

As you can see in the bottom a cyan padding is generated and that is what I want to avoid

EDIT: it seems that the proposal in the issue report has been accepted and they will add the functionality in the next versions.

Upvotes: 3

Views: 3883

Answers (3)

Randy
Randy

Reputation: 1146

Looks like support for this was recently added: https://issuetracker.google.com/issues/268365538

https://android-review.googlesource.com/c/platform/frameworks/support/+/2478295

However, I don't think it's actually in a released version yet. It looks like it was merged a few days after the March '23 Jetpack Compose update, and I don't think there has been a new version released since then. Good news is, this functionality should be available in the next release.

EDIT: As another answer states, this functionality is available in androidx.compose.foundation:foundation-layout. Which, as of the time of this comment, is in version beta02. so adding implementation "androidx.compose.foundation:foundation-layout:1.5.0-beta02" to your build.gradle will make verticalArrangement available for a FlowRow. I tested this, and it does work.

Upvotes: 5

Abdullqadir
Abdullqadir

Reputation: 91

I have solved this issue like below as I'm watting for stable release of androidx.compose.foundation:foundation-layout:1.5.0 currently it's in androidx.compose.foundation:foundation-layout:1.5.0-alpha02

Note: This is a temporary solution Google has already solved this issue in androidx.compose.foundation:foundation-layout:1.5.0-alpha02 You can use it if you don't mind using an alpha versions in your project.

@Composable
fun FilterChips(data: String) = Box(modifier = Modifier.padding(2.dp)) {
      Text(
          text = data,
          style = MaterialTheme.typography.caption,
          color = Color.Black,
          modifier = Modifier
              .background(Color.LightGray, RoundedCornerShape(4.dp))
              .padding(horizontal = 12.dp, vertical = 4.dp)
      )
}



@OptIn(ExperimentalLayoutApi::class)
@Preview(showBackground = true)
@Composable
private fun Preview() {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            val list = listOf(
                "2/2/2022",
                "1/1/2023",
            )
            FlowRow(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 24.dp)
            ) {
                list.forEach {
                    FilterChips(it)
                }
            }
        }
}

Upvotes: 0

Dhananjaya Wicramasinghe
Dhananjaya Wicramasinghe

Reputation: 9

Yes, there is a solution to this issue. You can use the Spacer composable to add space between rows in the FlowRow. Here's how you can modify your code to achieve this:

Upvotes: -1

Related Questions