[Flow layout] Add RTL support to Flow Layouts

[brudaswen]

Fixes #1073

📸 Screenshots (Previews)

	LTR	RTL
FlowRow Start/Center/End (no overflow)
FlowRow Start/Center/End (overflow)
FlowColumn Start/Center/End (no overflow)
FlowColumn Start/Center/End (overflow)

Preview Code

The following code was used to generate the preview screenshots:

/*
 * Copyright 2022 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.google.accompanist.sample.flowlayout

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import com.google.accompanist.flowlayout.FlowColumn
import com.google.accompanist.flowlayout.FlowCrossAxisAlignment
import com.google.accompanist.flowlayout.FlowMainAxisAlignment
import com.google.accompanist.flowlayout.FlowRow

@Preview(backgroundColor = 0xFFFFFF)
@Composable
internal fun FlowRowNoOverflowPreview(
    @PreviewParameter(LayoutDirectionPreviewProvider::class) layoutDirection: LayoutDirection,
) {
    CompositionLocalProvider(
        LocalLayoutDirection provides layoutDirection,
    ) {
        FlowRowPreview()
    }
}

@Preview(backgroundColor = 0xFFFFFF, widthDp = 70)
@Composable
internal fun FlowRowOverflowPreview(
    @PreviewParameter(LayoutDirectionPreviewProvider::class) layoutDirection: LayoutDirection,
) {
    CompositionLocalProvider(
        LocalLayoutDirection provides layoutDirection,
    ) {
        FlowRowPreview()
    }
}

@Preview(backgroundColor = 0xFFFFFF, heightDp = 150)
@Composable
internal fun FlowColumnNoOverflowPreview(
    @PreviewParameter(LayoutDirectionPreviewProvider::class) layoutDirection: LayoutDirection,
) {
    CompositionLocalProvider(
        LocalLayoutDirection provides layoutDirection,
    ) {
        FlowColumnPreview()
    }
}

@Preview(backgroundColor = 0xFFFFFF, widthDp = 337, heightDp = 60)
@Composable
internal fun FlowColumnOverflowPreview(
    @PreviewParameter(LayoutDirectionPreviewProvider::class) layoutDirection: LayoutDirection,
) {
    CompositionLocalProvider(
        LocalLayoutDirection provides layoutDirection,
    ) {
        FlowColumnPreview()
    }
}

@Composable
private fun FlowRowPreview() {
    Column {
        sequenceOf(
            FlowMainAxisAlignment.Start,
            FlowMainAxisAlignment.Center,
            FlowMainAxisAlignment.End,
        ).forEach {
            FlowRow(
                modifier = Modifier.fillMaxWidth(),
                mainAxisAlignment = it,
                crossAxisAlignment = FlowCrossAxisAlignment.Center,
            ) {
                PreviewBoxes()
            }
        }
    }
}

@Composable
private fun FlowColumnPreview() {
    Row {
        sequenceOf(
            FlowMainAxisAlignment.Start,
            FlowMainAxisAlignment.Center,
            FlowMainAxisAlignment.End,
        ).forEach {
            FlowColumn(
                modifier = Modifier.fillMaxHeight(),
                mainAxisAlignment = it,
                crossAxisAlignment = FlowCrossAxisAlignment.Center,
            ) {
                PreviewBoxes()
            }
        }
    }
}

@Composable
private fun PreviewBoxes() {
    Text(
        modifier = Modifier
            .size(25.dp, 25.dp)
            .background(Color.Red),
        text = "1",
    )
    Text(
        modifier = Modifier
            .size(50.dp, 50.dp)
            .background(Color.Green),
        text = "2",
    )
    Text(
        modifier = Modifier
            .size(25.dp, 25.dp)
            .background(Color.Blue),
        text = "3",
    )
}

internal class LayoutDirectionPreviewProvider : PreviewParameterProvider<LayoutDirection> {
    override val values = sequenceOf(
        LayoutDirection.Ltr,
        LayoutDirection.Rtl,
    )
}

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

For more information, open the CLA check for this pull request.

[kihaki]

This is exactly what we need actually. Seems like a great change for feature completeness! Please add this soon! :)

[brudaswen]

@googlebot I signed it!

[beigirad]

This is what we need too. Please check :(

[bentrengrove]

Thank you so much for this contribution. Sorry this has taken so long to get back to you. We have been working behind the scenes to start upstreaming this to Compose main as can now be seen on goo.gle/compose-roadmap. As such we are no longer accepting PRs to FlowLayout.

Sorry again we couldn't get this in.

[rashedswen]

I think this need to merge