How to determine which chips are actually visible in a Jetpack Compose FlowRow with overflow?
00:40 05 Jul 2025

I'm building a UI in Jetpack Compose using FlowRow (from accompanist/compose foundation), with a chip list that can overflow (e.g., maxLines = 3 with FlowRowOverflow.expandIndicator). When the chip count exceeds the visible space, some chips will be hidden and replaced by an "expand" or "more" button.

My question: How can I accurately determine, at runtime, which chips are actually being displayed (visible in the FlowRow)—i.e., those not hidden due to overflow—before the "more" button appears?

What I've tried: Collecting chip widths via onTextLayout during composition, and using the measured widths to estimate which chips fit.

Using a state list to track which chips trigger onTextLayout.

However, when overflow occurs, chips that are not visible no longer trigger onTextLayout, and state can become stale.

The official FlowRow API does not seem to provide a callback or index list of actually visible items.

What I need: A reliable way to know which chips are currently shown to the user in the FlowRow, even if there are overflows or the data changes.

Ideally, a Compose idiomatic solution, or a workaround that's robust even when the list or layout changes dynamically.

FlowRow(
    maxLines = 3,
    overflow = FlowRowOverflow.expandIndicator { /* ... */ }
) {
    chipList.forEach { chip ->
        Chip(
            text = chip,
            onTextLayout = { /* collect width for estimation */ }
        )
    }
}

I want to determine the actual visible chips before the overflow indicator is shown.

android-jetpack-compose android-jetpack-compose-layout