ContextualFlowRow

Composable Function
Common
Deprecated ContextualFlowLayouts are no longer maintained
@Composable
@ExperimentalLayoutApi
fun ContextualFlowRow(
    itemCount: Int,
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    itemVerticalAlignment: Alignment.Vertical = Alignment.Top,
    maxItemsInEachRow: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    overflow: ContextualFlowRowOverflow = ContextualFlowRowOverflow.Clip,
    content: @Composable ContextualFlowRowScope.(index: Int) -> Unit,
)

ContextualFlowRow is a specialized version of the FlowRow layout. It is designed to enable users to make contextual decisions during the construction of FlowRow layouts.

This component is particularly advantageous when dealing with a large collection of items, allowing for efficient management and display. Unlike traditional FlowRow that composes all items regardless of their visibility, ContextualFlowRow smartly limits composition to only those items that are visible within its constraints, such as maxLines or maxHeight. This approach ensures optimal performance and resource utilization by composing fewer items than the total number available, based on the current context and display parameters.

While maintaining the core functionality of the standard FlowRow, ContextualFlowRow operates on an index-based system and composes items sequentially, one after another. This approach provides a perfect way to make contextual decisions and can be an easier way to handle problems such as dynamic see more buttons such as (N+ buttons).

Parameters
itemCount The total number of item composable
modifier The modifier to be applied to the Row.
horizontalArrangement The horizontal arrangement of the layout's children.
verticalArrangement The vertical arrangement of the layout's virtual rows.
itemVerticalAlignment The cross axis/vertical alignment of an item in the column.
maxItemsInEachRow The maximum number of items per row
maxLines The maximum number of rows
overflow The strategy to handle overflowing items
content The indexed-based content of ContextualFlowRowScope

Code Examples

ContextualFlowRowMaxLineDynamicSeeMore

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun ContextualFlowRowMaxLineDynamicSeeMore() {
    val totalCount = 300
    var maxLines by remember { mutableStateOf(2) }
    Text(
        modifier =
            Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
        text =
            "ContextualFlowRow (based on Subcompose)" +
                " is great for Large Items & +N dynamic labels",
        fontWeight = FontWeight.Bold,
    )
    val moreOrCollapseIndicator =
        @Composable { scope: ContextualFlowRowOverflowScope ->
            val remainingItems = totalCount - scope.shownItemCount
            DynamicSeeMore(isHorizontal = true, remainingItems = remainingItems) {
                if (remainingItems == 0) {
                    maxLines = 2
                } else {
                    maxLines += 5
                }
            }
        }
    ContextualFlowRow(
        modifier =
            Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
        maxLines = maxLines,
        overflow =
            ContextualFlowRowOverflow.expandOrCollapseIndicator(
                minRowsToShowCollapse = 4,
                expandIndicator = moreOrCollapseIndicator,
                collapseIndicator = moreOrCollapseIndicator,
            ),
        itemCount = totalCount,
    ) {
        Box(
            Modifier.align(Alignment.CenterVertically)
                .width(50.dp)
                .height(50.dp)
                .background(Color.Green)
        ) {
            Text(
                text = it.toString(),
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp).align(Alignment.Center),
            )
        }
    }
}