# ContextualFlowColumnScope

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+class:androidx.compose.foundation.layout.ContextualFlowColumnScope) Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.7.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0) Common/AllAndroid/JVM
- Cmn

  ```
  @LayoutScopeMarker
  @ExperimentalLayoutApi
  interface ContextualFlowColumnScope : ColumnScope
  ```

*** ** * ** ***

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

Provides a scope for items within a `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)`.

## Summary

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[fillMaxColumnWidth](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#(androidx.compose.ui.Modifier).fillMaxColumnWidth(kotlin.Float))( fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` **This function is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#indexInLine()` **This property is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#lineIndex()` **This property is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#maxHeightInLine()` **This property is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#maxWidth()` **This property is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |

### Inherited functions

From [androidx.compose.foundation.layout.ColumnScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope) `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[align](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Horizontal))(alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal)`

**This function is deprecated.** ContextualFlowLayouts are no longer maintained
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[alignBy](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1))(alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)`

**This function is deprecated.** ContextualFlowLayouts are no longer maintained
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[alignBy](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.VerticalAlignmentLine))(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/VerticalAlignmentLine)`

**This function is deprecated.** ContextualFlowLayouts are no longer maintained
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[weight](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean))(
weight: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, fromInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html,
fill: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html
)`

**This function is deprecated.** ContextualFlowLayouts are no longer maintained
Cmn

## Public functions

### Modifier.fillMaxColumnWidth

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:fillMaxColumnWidth)

```
@ExperimentalLayoutApi
fun Modifier.[fillMaxColumnWidth](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#(androidx.compose.ui.Modifier).fillMaxColumnWidth(kotlin.Float))(
    fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
): Modifier
```

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

Have the item fill (possibly only partially) the max width of the widest item in the column it was placed in, within 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)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowColumn
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlowColumn(
    Modifier.padding(20.dp)
        .wrapContentHeight(align = Alignment.Top)
        .wrapContentWidth(align = Alignment.Start),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachColumn = 3,
) {
    repeat(9) {
        Box(Modifier.height(100.dp).fillMaxColumnWidth(1f).background(Color.Green)) {
            val text = generateRandomString(IntRange(1, 5).random())
            Text(text = text, fontSize = 18.sp, modifier = Modifier.padding(3.dp))
        }
    }
}
```

| Parameters |
|---|---|
| `fraction: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = 1.0f` | The fraction of the max width of the widest item between `0` and `1`, inclusive. Example usage: |

## Public properties

### indexInLine

Cmn Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.7.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
val indexInLine: Int
```

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

Marks the index within the current row/column where the next component is to be inserted, assuming it conforms to the row's or column's `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#maxWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#maxHeightInLine()` limitations.

In scenarios where multiple UI components are returned in one index call, this parameter is relevant solely to the first returned UI component, presuming it complies with the row's or column's defined constraints.

Example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowRow
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.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowRow(
    modifier = Modifier.fillMaxWidth(1f).height(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 4,
    itemCount = 12,
) {
    val width = Random.nextInt(80, 100).dp.coerceAtMost(maxWidthInLine)
    val height = 50.dp.coerceAtMost(maxHeight)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowRow.lineIndex}" +
                    "\nPs: ${this@ContextualFlowRow.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp),
        )
    }
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowColumn
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowColumn(
    modifier = Modifier.fillMaxHeight(1f).width(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachColumn = 4,
    itemCount = 12,
) {
    val width = 50.dp.coerceAtMost(maxWidth)
    val height = Random.nextInt(80, 100).dp.coerceAtMost(maxHeightInLine)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowColumn.lineIndex}" +
                    "\nPs: ${this@ContextualFlowColumn.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp),
        )
    }
}
```

### lineIndex

Cmn Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.7.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
val lineIndex: Int
```

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

Identifies the row or column index where the UI component(s) are to be placed, provided they do not exceed the specified `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#maxWidth()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#maxHeightInLine()` for that row or column.

Should the component(s) surpass these dimensions, their placement may shift to the subsequent row/column or they may be omitted from display, contingent upon the defined constraints.

Example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowRow
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.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowRow(
    modifier = Modifier.fillMaxWidth(1f).height(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 4,
    itemCount = 12,
) {
    val width = Random.nextInt(80, 100).dp.coerceAtMost(maxWidthInLine)
    val height = 50.dp.coerceAtMost(maxHeight)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowRow.lineIndex}" +
                    "\nPs: ${this@ContextualFlowRow.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp),
        )
    }
}
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ContextualFlowColumn
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp))
ContextualFlowColumn(
    modifier = Modifier.fillMaxHeight(1f).width(210.dp).padding(20.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachColumn = 4,
    itemCount = 12,
) {
    val width = 50.dp.coerceAtMost(maxWidth)
    val height = Random.nextInt(80, 100).dp.coerceAtMost(maxHeightInLine)
    Box(
        Modifier.width(width)
            .height(height)
            .background(MatchingColors.getByIndex(indexInLine)!!.color)
    ) {
        Text(
            text =
                "Ln: ${this@ContextualFlowColumn.lineIndex}" +
                    "\nPs: ${this@ContextualFlowColumn.indexInLine}",
            fontSize = 18.sp,
            modifier = Modifier.padding(3.dp),
        )
    }
}
```

### maxHeightInLine

Cmn Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.7.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
val maxHeightInLine: Dp
```

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

Establishes the maximum height (main-axis dimension) permissible for the next UI component, aligned with its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#lineIndex()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#indexInLine()`. Should the component's height exceed this limit, it may be shifted to the subsequent column in `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)`, subject to the predefined constraints.

### maxWidth

Cmn Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.7.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
val maxWidth: Dp
```

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

Sets the maximum width (cross-axis dimension) that the upcoming UI component can occupy, based on its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#lineIndex()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnScope#indexInLine()`. Exceeding this width might result in the component not being displayed, depending on the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowColumnOverflow#Visible()` overflow configuration.