# ContextualFlowRowScope

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.ContextualFlowRowScope) 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 ContextualFlowRowScope : RowScope
  ```

*** ** * ** ***

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

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

## 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.[fillMaxRowHeight](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#(androidx.compose.ui.Modifier).fillMaxRowHeight(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/ContextualFlowRowScope#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/ContextualFlowRowScope#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/ContextualFlowRowScope#maxHeight()` **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/ContextualFlowRowScope#maxWidthInLine()` **This property is deprecated.** ContextualFlowLayouts are no longer maintained | Cmn |

### Inherited functions

From [androidx.compose.foundation.layout.RowScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope) `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/RowScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Vertical))(alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical)`

**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/RowScope#(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/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine))(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/HorizontalAlignmentLine)`

**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.[alignByBaseline](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline())()`

**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/RowScope#(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.fillMaxRowHeight

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

```
@ExperimentalLayoutApi
fun Modifier.[fillMaxRowHeight](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#(androidx.compose.ui.Modifier).fillMaxRowHeight(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 height of the tallest item in the row it was placed in, within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(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.FlowRowOverflow,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.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
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

FlowRow(
    Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 3,
) {
    repeat(9) {
        Box(Modifier.width(100.dp).background(Color.Green).fillMaxRowHeight(1f)) {
            val text = generateRandomString(IntRange(10, 50).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 height of the tallest 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/ContextualFlowRowScope#maxWidthInLine()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#maxHeight()` 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/ContextualFlowRowScope#maxWidthInLine()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#maxHeight()` 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),
        )
    }
}
```

### maxHeight

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 maxHeight: Dp
```

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

Determines the maximum allowable height (cross-axis) for the forthcoming UI component, aligned with its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#lineIndex()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#indexInLine()`. Should this height threshold be exceeded, the component's visibility will depend on the overflow settings, potentially leading to its exclusion.

### maxWidthInLine

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 maxWidthInLine: Dp
```

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

Specifies the maximum permissible width (main-axis) for the upcoming UI component at the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#lineIndex()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope#indexInLine()`. Exceeding this width may result in the component being reallocated to the following row within the `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)` structure, subject to existing constraints.