[Flow layouts] Migration Guide is not accurate

[TurKurT656]

Description I'm trying to migrate appcompanist FlowRow to foundationlayout FlowRow. in the migration guide it says that instead of mainAxisSpacing and crossAxisSpacing we must use horizontalArrangement = HorizontalArrangement.spacedBy(50.dp, Alignment.Start) and verticalArrangement = VerticalArrangement.spacedBy(50.dp, Alignment.Top) like this:

FlowRow(
    modifier = Modifier,
    horizontalArrangement = HorizontalArrangement.spacedBy(50.dp, Alignment.Start),
    verticalArrangement = VerticalArrangement.spacedBy(50.dp, Alignment.Top),
    content = content
)

For horizontalArrangement parameter there isn't any provider named HorizontalArrangement so I replaced it with Arrangement.spacedBy(50.dp, Alignment.Start) and it fixed the issue but there isn't any parameter named verticalArrangement in FlowRow. FlowRow has verticalAlignment and for that parameter there isn't any provider like Alignment.spacedBy(50.dp, Alignment.Top). So have can I have crossAxisSpacing in new FlowRow?

[bentrengrove]

Thanks for filing that issue, sorry about that error in the migration guide. I will fix that up.

Cross axis spacing was added in Compose 1.5 which is currently in beta. The verticalArrangement should be there and let you achieve what you are trying to do.

Your fix of using Arrangement not HorizontalArrangement is correct and will work with vertical as well in 1.5.

[cliuff]

I am migrating from accompanist-flowlayout:0.28.0 to fundation:1.5.4, the migration guide from Accompanist website states that

For FlowRow mainAxisAlignment is now horizontalArrangement crossAxisAlignment is now verticalArrangement

The crossAxisAlignment in Accompanist FlowRow behaves like the one in Row. However fundation FlowRow only provides verticalArrangement but no verticalAlignment. According to Flow layouts docs, we need to use Modifier.align() on row items.

Thus the following code

FlowRow(crossAxisAlignment = FlowCrossAxisAlignment.Center) {
    Item()
    Item()
}

should be migrated to

FlowRow {
    Item(modifier = Modifier.align(Alignment.CenterVertically))
    Item(modifier = Modifier.align(Alignment.CenterVertically))
}