'Hidden bottom item in LazyColumn - Jetpack Compose

I am trying to create a list of items with a hidden button at the bottom. By default the button is not visible on the screen.

If a user scrolls to the bottom of the list the button should appear like it is the last item of the list.

I created illustrations to better visualize the desired behaviour:

Sketch 1: List with a few items

enter image description here

Sketch 2: List with a lot of items

enter image description here

I already tried the solution for a similar problem (https://stackoverflow.com/a/69196765/11720296) and added extra offset but unfortunately it didn't work.

Does somebody have an idea how to create this behaviour?



Solution 1:[1]

itemsIndexed will help in this case in following example I have used itemsIndexed in Lazycolumn it gives index which is visible to the user. In this example I was trying to show some specific text only when first message is visible.

 LazyColumn() {
                itemsIndexed(tempListOfMessages) { index, localMessage ->
                    if (localMessage != null) {
                        SingleMessageView(
                            localMessageInfo = localMessage,
                            (index == 0)
                      )
                    }
                }  
            }

enter image description here

when scroll that text scroll with first item.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gaurav Pawar