# ContextualFlowColumn

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi [ContextualFlowColumn](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumn.composable#ContextualFlowColumn(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.ContextualFlowColumnOverflow,kotlin.Function2))( itemCount: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, itemHorizontalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal, maxItemsInEachColumn: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, overflow: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnOverflow, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope.(index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |

## Functions

### ContextualFlowColumn

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/ContextualFlowLayout.kt+function:ContextualFlowColumn) Added in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
@Composable
@ExperimentalLayoutApi
fun [ContextualFlowColumn](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumn.composable#ContextualFlowColumn(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.ContextualFlowColumnOverflow,kotlin.Function2))(
    itemCount: Int,
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    itemHorizontalAlignment: Alignment.Horizontal = Alignment.Start,
    maxItemsInEachColumn: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    overflow: ContextualFlowColumnOverflow = ContextualFlowColumnOverflow.Clip,
    content: @Composable ContextualFlowColumnScope.(index: Int) -> Unit
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> ContextualFlowLayouts are no longer maintained

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumn.composable#ContextualFlowColumn(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.ContextualFlowColumnOverflow,kotlin.Function2)` is a specialized version of the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)` layout. It is designed to enable users to make contextual decisions during the construction of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)` layouts.

This component is particularly advantageous when dealing with a large collection of items, allowing for efficient management and display. Unlike traditional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)` that composes all items regardless of their visibility, ContextualFlowColumn smartly limits composition to only those items that are visible within its constraints, such as `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#ContextualFlowColumn(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.ContextualFlowColumnOverflow,kotlin.Function2)` or `maxWidth`. 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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumn.composable#ContextualFlowColumn(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.ContextualFlowColumnOverflow,kotlin.Function2)` 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).

Example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowColumn
import androidx.compose.foundation.layout.ContextualFlowColumnOverflow
import androidx.compose.foundation.layout.ContextualFlowColumnOverflowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val totalCount = 300
var maxLines by remember { mutableStateOf(2) }

Text(
    modifier = Modifier.fillMaxWidth(1f).padding(20.dp),
    text =
        "ContextualFlowColumn (based on Subcompose)" +
            " is great for Large Items & +N dynamic labels",
    fontWeight = FontWeight.Bold,
)

val moreOrCollapseIndicator =
    @Composable { scope: ContextualFlowColumnOverflowScope ->
        val remainingItems = totalCount - scope.shownItemCount
        DynamicSeeMore(isHorizontal = true, remainingItems = remainingItems) {
            if (remainingItems == 0) {
                maxLines = 2
            } else {
                maxLines += 2
            }
        }
    }
ContextualFlowColumn(
    modifier =
        Modifier.fillMaxWidth(1f)
            .horizontalScroll(rememberScrollState())
            .padding(20.dp)
            .height(200.dp)
            .wrapContentHeight(align = Alignment.Top),
    verticalArrangement = Arrangement.spacedBy(10.dp),
    horizontalArrangement = Arrangement.spacedBy(20.dp),
    maxLines = maxLines,
    overflow =
        ContextualFlowColumnOverflow.expandOrCollapseIndicator(
            minColumnsToShowCollapse = 4,
            expandIndicator = moreOrCollapseIndicator,
            collapseIndicator = moreOrCollapseIndicator,
        ),
    itemCount = totalCount,
) { index ->
    Box(
        modifier =
            Modifier.align(Alignment.CenterHorizontally)
                .height(50.dp)
                .width(50.dp)
                .background(Color.Green)
    ) {
        Text(
            text = index.toString(),
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp).align(Alignment.Center),
        )
    }
}
```

| Parameters |
|---|---|
| `itemCount: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The total number of item composable |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the Row. |
| `verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical = Arrangement.Top` | The vertical arrangement of the layout's virtual column. |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = Arrangement.Start` | The horizontal arrangement of the layout's children. |
| `itemHorizontalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal = Alignment.Start` | The cross axis/horizontal alignment of an item in the column. |
| `maxItemsInEachColumn: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | The maximum number of items per column |
| `maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | The maximum number of columns |
| `overflow: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnOverflow = ContextualFlowColumnOverflow.Clip` | The straoadtegy to handle overflowing items |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope.(index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The indexed-based content of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRow.composable#ContextualFlowRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.ContextualFlowRowOverflow,kotlin.Function2)` |   |