New Smart Item Composition for Better Performance — ContextualFlowRow/Column

If you have used FlowRow or FlowColumn before, then this new composable will make you even more happier! The main difference between them, is that this new solution, allows you to render only a fixed number of UI components initially, while manually revealing more items if needed. It offers additional customization option, so that you can hide some or most of those items that have been expanded in the first place.

Preview

Let me show you how it works. In this demo screen I have a list of multiple string items that we’re gonna display in that Row. Then below that, we have an integer state that will be updated dynamically. The reason why we need this state, is so that we can show or hide more rows inside ContextualFlowRow, when a user clicks the button.

Let’s get started! 🚀

const val DEFAULT_MAX_LINES = 2

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun MainScreen() {
    val languages = listOf(
        "Kotlin",
        "Java",
        "C++",
        "Python",
        "GO",
        "Javascript",
        "Dart",
        "Swift",
        "Ruby"…