Putting something below a LazyColumn in Jetpack Compose

Question

I would like my screen to show a scrolling list and a button below it. The button should always be visible. I tried the following, but it did does not work. The LazyColumn takes the entire screen. I want the Button to take it's space at the bottom, and then the LazyColumn has the rest of the screen.

Column(Modifier.fillMaxSize()) {
    LazyColumn {
        items(50) { i ->
            Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
        }
    }
    Button(onClick = { println("hi") }) {
        Text("Hello")
    }
}

Answer 1

You can apply the weight modifier to the lazyColumn:

Column(Modifier.fillMaxSize()) {
    LazyColumn(Modifier.weight(1f)) {
        items(50) { i ->
            Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
        }
    }
    Button(onClick = { println("hi") }) {
        Text("Hello")
    }
}

This is also explained in the Jetpack Compose basics codelab