The following code has some problem that causes th...

# compose

[Mehdi Haghgoo]

The following code has some problem that causes the FAB to be located at the bottom-left of screen when app runs and once a new item is added to the lazy list, it jumps to the bottom-center.

@Composable
fun TodoScreen(
    items: List<TodoItem>,
    onAddItem: (TodoItem) -> Unit,
    onRemoveItem: (TodoItem) -> Unit
) {
    Column {
        LazyColumnFor(
            items = items,
            modifier = Modifier.weight(1f),
            contentPadding = InnerPadding(top = 8.dp)
        ) { todo ->
            TodoRow(
                todo = todo,
                onItemClicked = { onRemoveItem(it) },
                modifier = Modifier.fillParentMaxWidth()
            )
        }

        // For quick testing, a random item generator button
        FloatingActionButton(
                shape = CircleShape,
                elevation = 8.dp,
                icon = {
                    Row(modifier = Modifier.padding(16.dp)){
                        Icon(asset = vectorResource(id = R.drawable.add))
                        Text("Add New Item")
                    }
                         },
                onClick = { onAddItem(generateRandomTodoItem()) },
                modifier = Modifier.gravity(Alignment.CenterHorizontally),
        )
    }
}

Any ideas why this happens? Do I need a constraint mechanism or something for the FAB?

[Michał Jurczyk]

Try replacing the top Colum with a Stack as @ppvi suggested and add this modifier:

Stack(
    modifier = Modifier.fillMaxSize()
) {
 ...  
}

[flosch]

Or even better: a Scaffold

[Mehdi Haghgoo]

Could you please explain why Scaffold is better for this purpose?

[Timo Drick]

In theory you do not need to use Stack. Just add this Modifier.fillMaxSize to the Column.
It happens because the Column is wrap content by default. And when there is no item than the Column is just as width as the FAB

[flosch]

Could you please explain why Scaffold is better for this purpose?

Since you also get the innerPadding for your bodyContent. Although I am not quite sure now, if that also accounts the FAB or just the top and bottom bars
But apart from that there is also the convenient floatingActionButtonPosition parameter there

[Timo Drick]

Also it looks like the LazyColumnFor does not respect the width of the Column. Maybe a bug?

[Timo Drick]

So better specify the width of the Column so you do not get some undefined behaviour