---
title: "firstVisibleItemLayoutItemInfo"
description: "Returns the TransformingLazyColumnFirstLayoutItemProvider.ItemInfo for the first visible item aligned to its TransformingLazyColumnFirstLayoutItemProvider.ItemEdge.Start edge, or null if there are no visible items."
type: "property"
lastmod: "2026-07-02T02:32:50.043838Z"
---
## API Reference

> Source set: Android

```kotlin
public val TransformingLazyColumnState.firstVisibleItemLayoutItemInfo:
TransformingLazyColumnFirstLayoutItemProvider.ItemInfo?
```

Returns the [TransformingLazyColumnFirstLayoutItemProvider.ItemInfo](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnFirstLayoutItemProvider.ItemInfo) for the first visible item
aligned to its `TransformingLazyColumnFirstLayoutItemProvider.ItemEdge.Start` edge, or null if
there are no visible items.

This extension is useful when building a custom [TransformingLazyColumnFirstLayoutItemProvider](/jetpack-compose/androidx.wear.compose/compose-foundation/interfaces/TransformingLazyColumnFirstLayoutItemProvider)
that needs to ensure the first visible item maintains a static start edge during dynamic content
updates (such as item additions, removals, or size changes), avoiding visual jumps in the
viewport.

Since the first visible item changes rapidly during an active scroll, tracking it continuously
does not provide a stable visual reference. When using this property with
[rememberTransformingLazyColumnFirstLayoutItemProvider](/jetpack-compose/androidx.wear.compose/compose-material3/composable-functions/rememberTransformingLazyColumnFirstLayoutItemProvider), it is highly recommended to yield to the
default layout behavior by returning null when [TransformingLazyColumnState.isScrollInProgress](/jetpack-compose/androidx.wear.compose/compose-foundation/classes/TransformingLazyColumnState)
is true. This allows the list to fall back to its default layout behavior, which accurately
tracks the scroll gesture, while also avoiding unnecessary computational overhead.

## Code Examples

### TransformingLazyColumnFirstVisibleItemLayoutItemProviderSample
```kotlin
@Preview
@Composable
fun TransformingLazyColumnFirstVisibleItemLayoutItemProviderSample() {
    val transformationSpec = rememberTransformationSpec()
    val state = rememberTransformingLazyColumnState()
    var elements by remember { mutableStateOf(listOf(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)) }
    var nextElement by remember { mutableIntStateOf(10) }
    fun addCardAfter(index: Int) {
        elements =
            elements.subList(0, index + 1) +
                listOf(nextElement++) +
                elements.subList(index + 1, elements.count())
    }
    fun removeCardAt(index: Int) {
        elements = elements.subList(0, index) + elements.subList(index + 1, elements.count())
    }
    // This sample demonstrates how to use rememberTransformingLazyColumnFirstVisibleItemProvider
    // to maintain a stable viewport top when items are added or removed dynamically.
    // It achieves this by using the first visible item as the layout reference.
    AppScaffold {
        ScreenScaffold(state) { contentPadding ->
            TransformingLazyColumn(
                state = state,
                contentPadding = contentPadding,
                firstLayoutItemProvider =
                    rememberTransformingLazyColumnFirstLayoutItemProvider {
                        if (state.isScrollInProgress) null else state.firstVisibleItemLayoutItemInfo
                    },
            ) {
                itemsIndexed(elements, key = { _, key -> key }) { index, cardKey ->
                    Card(
                        onClick = {},
                        modifier =
                            Modifier.minimumVerticalContentPadding(
                                    CardDefaults.minimumVerticalListContentPadding
                                )
                                .transformedHeight(this, transformationSpec)
                                .animateItem(),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Card $cardKey")
                        Row {
                            Spacer(modifier = Modifier.weight(1f))
                            CompactButton(
                                onClick = { removeCardAt(index) },
                                enabled = elements.count() > 1,
                            ) {
                                Text("-")
                            }
                            CompactButton(onClick = { addCardAfter(index) }) { Text("+") }
                        }
                    }
                }
            }
        }
    }
}
```