Mehdi Haghgoo

    Mehdi Haghgoo

    2 years ago
    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

    Michał Jurczyk

    2 years ago
    Try replacing the top Colum with a Stack as @ppvi suggested and add this modifier:
    Stack(
        modifier = Modifier.fillMaxSize()
    ) {
     ...  
    }
    flosch

    flosch

    2 years ago
    Or even better: a Scaffold
    Mehdi Haghgoo

    Mehdi Haghgoo

    2 years ago
    Could you please explain why Scaffold is better for this purpose?
    Timo Drick

    Timo Drick

    2 years ago
    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

    flosch

    2 years ago
    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

    Timo Drick

    2 years ago
    Also it looks like the LazyColumnFor does not respect the width of the Column. Maybe a bug?
    So better specify the width of the Column so you do not get some undefined behaviour