Header to Sticky Text

Demo

Use

The very basic usage:

HeaderToSticky(
    headerContentBackgroundColor = MaterialTheme.colorScheme.tertiary,
    stickyText = "Sticky Text",
    headerContent = {
        Text(
            modifier = Modifier.padding(32.dp),
            text = "Header Text",
            style = MaterialTheme.typography.titleMedium,
            color = MaterialTheme.colorScheme.primary
        )
    },
    containerContent = {
        for (i in 1..50) {
            Text(text = "Content item$i")
        }
    }
)

The component is simple and straightforward to use. You need to call the HeaderToSticky method in your Composable and define the parameters to match your use case.

• headerContent: The content (@Composable) of the header that will be displayed at the top of the screen
• stickyContent: The content (@Composable) of the sticky text that will be displayed when the header is scrolled out of the screen. If you don't want anything custom defined you can just populate stickyText param instead
• containerContent: The content (@Composable) of the container that will be displayed below the header and sticky text

Additionally, scrollAction, onScrollStateChange and onScrollAction can be used to define custom actions when the user scrolls the screen. The example of this is in the third gif (left-to-right), when the user clicks the FloatingActionButton the screen scrolls to the bottom.

Other params that can influence the UI and you can override accordingly.

License

Read More

Developed By

Viktor Arsovski