# FlowRowOverflow

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/FlowLayoutOverflow.kt+class:androidx.compose.foundation.layout.FlowRowOverflow) 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

  ```
  @ExperimentalLayoutApi
  class FlowRowOverflow : FlowLayoutOverflow
  ```

|---|---|---|
| [kotlin.Any](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html) |||
| ↳ | [androidx.compose.foundation.layout.FlowLayoutOverflow](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowLayoutOverflow) ||
|   | ↳ | [androidx.compose.foundation.layout.FlowRowOverflow](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow) |

*** ** * ** ***

> [!CAUTION]
> **This class is deprecated.**   
> FlowLayout overflow is no longer maintained

Overflow Handling Options

This enumeration defines the available options for handling content that exceeds the boundaries of its container for `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)`.

Options:

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#Visible()`: The overflowing content remains visible outside its container. This can lead to overlapping with other elements. Use this option when it's crucial to display all content, regardless of the container's size.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#Clip()`: The overflowing content is clipped and not visible beyond the boundary of its container. Ideal for maintaining a clean and uncluttered UI, where overlapping elements are undesirable.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandIndicator(kotlin.Function1)`: Behaves similar to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#Clip()`, however shows an indicator or button indicating that more items can be loaded.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandOrCollapseIndicator(kotlin.Function1,kotlin.Function1,kotlin.Int,androidx.compose.ui.unit.Dp)`: Extends the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandIndicator(kotlin.Function1)` functionality by adding a 'Collapse' option. After expanding the content, users can choose to collapse it back to the summary view.

## Summary

| ### Public companion functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi [expandIndicator](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandIndicator(kotlin.Function1))(content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` **This function is deprecated.** FlowLayout overflow is no longer maintained | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable [expandOrCollapseIndicator](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandOrCollapseIndicator(kotlin.Function1,kotlin.Function1,kotlin.Int,androidx.compose.ui.unit.Dp))( expandIndicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, collapseIndicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, minRowsToShowCollapse: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, minHeightToShowCollapse: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` **This function is deprecated.** FlowLayout overflow is no longer maintained | Cmn |

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#Clip()` **This property is deprecated.** FlowLayout overflow is no longer maintained | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#Visible()` **This property is deprecated.** FlowLayout overflow is no longer maintained | Cmn |

## Public companion functions

### expandIndicator

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)

```
@ExperimentalLayoutApi
fun [expandIndicator](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandIndicator(kotlin.Function1))(content: @Composable FlowRowOverflowScope.() -> Unit): FlowRowOverflow
```

> [!CAUTION]
> **This function is deprecated.**   
> FlowLayout overflow is no longer maintained

Registers an "expand indicator" composable for handling overflow in a `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)`.

This function allows the creation of a custom composable that can be displayed when there are more items in 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)` than can be displayed in the available space. The "expandable indicator" composable can be tailored to show a summary, a button, or any other composable element that indicates the presence of additional items.

```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.FlowRowOverflow
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.material3.Text
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 = 20
var maxLines by remember { mutableStateOf(2) }

Text(
    modifier =
        Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
    text =
        "Flow Row with total items of 40, " +
            "with Max Lines of 2 and See More, " +
            "which when clicked, increases max lines by two",
    fontWeight = FontWeight.Bold,
)
FlowRow(
    Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxLines = maxLines,
    overflow = FlowRowOverflow.expandIndicator { Ellipsis(text = "...") { maxLines += 2 } },
) {
    repeat(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),
            )
        }
    }
}
```

| Parameters |
|---|---|
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | composable that visually indicates more items can be loaded. |

### expandOrCollapseIndicator

Cmn

```
@ExperimentalLayoutApi
@Composable
fun [expandOrCollapseIndicator](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow#expandOrCollapseIndicator(kotlin.Function1,kotlin.Function1,kotlin.Int,androidx.compose.ui.unit.Dp))(
    expandIndicator: @Composable FlowRowOverflowScope.() -> Unit,
    collapseIndicator: @Composable FlowRowOverflowScope.() -> Unit,
    minRowsToShowCollapse: Int = 1,
    minHeightToShowCollapse: Dp = 0.dp
): FlowRowOverflow
```

> [!CAUTION]
> **This function is deprecated.**   
> FlowLayout overflow is no longer maintained

Registers an "expand or collapse indicator" composable for handling overflow in a `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)`.

This function is designed to switch between two states: a "Expandable" state when there are more items to show, and a "Collapsable" state when all items are being displayed and can be collapsed.

Prior to layout, the function evaluates both composables indicators to determine their maximum intrinsic size. Depending on the space available and the number of items, either the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow.Companion#expandOrCollapseIndicator(kotlin.Function1,kotlin.Function1,kotlin.Int,androidx.compose.ui.unit.Dp)` or the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow.Companion#expandOrCollapseIndicator(kotlin.Function1,kotlin.Function1,kotlin.Int,androidx.compose.ui.unit.Dp)` is rendered.

```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.FlowRowOverflow
import androidx.compose.foundation.layout.FlowRowOverflowScope
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.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 = 40
var maxLines by remember { mutableStateOf(2) }

Text(
    modifier =
        Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
    text =
        "Flow Row with total items of 40, " +
            "with Max Lines of 2 and See More/collapse button, " +
            "which when clicked, increases max lines by two",
    fontWeight = FontWeight.Bold,
)
val moreOrLessIndicator =
    @Composable { scope: FlowRowOverflowScope ->
        DynamicSeeMoreForDrawText(
            isHorizontal = true,
            totalCount = totalCount,
            { scope.shownItemCount },
            onExpand = { maxLines += 2 },
            onShrink = { maxLines = 2 },
        )
    }
FlowRow(
    Modifier.fillMaxWidth(1f)
        .padding(20.dp)
        .wrapContentHeight()
        .padding(20.dp)
        .fillMaxWidth(1f),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxLines = maxLines,
    overflow =
        FlowRowOverflow.expandOrCollapseIndicator(
            minRowsToShowCollapse = 4,
            expandIndicator = moreOrLessIndicator,
            collapseIndicator = moreOrLessIndicator,
        ),
) {
    repeat(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),
            )
        }
    }
}
```

| Parameters |
|---|---|
| `expandIndicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | composable that visually indicates more items can be loaded. |
| `collapseIndicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | composable that visually indicates less items can be loaded. |
| `minRowsToShowCollapse: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 1` | Specifies the minimum number of rows that should be visible before showing the collapse option. This parameter is useful when the number of rows is too small to be reduced further. |
| `minHeightToShowCollapse: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | Specifies the minimum height at which the collapse option should be displayed. This parameter is useful for preventing the collapse option from appearing when the height is too narrow. |

## Public companion properties

### Clip

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)

```
@ExperimentalLayoutApi
val Clip: FlowRowOverflow
```

> [!CAUTION]
> **This property is deprecated.**   
> FlowLayout overflow is no longer maintained

Clip the overflowing content to fix its container.

### Visible

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)

```
@ExperimentalLayoutApi
val Visible: FlowRowOverflow
```

> [!CAUTION]
> **This property is deprecated.**   
> FlowLayout overflow is no longer maintained

Display all content, even if there is not enough space in the specified bounds.