Hi! What’s the appropriate way to anchor snackbar ...

# compose

[Rihards]

Hi! What’s the appropriate way to anchor snackbar with Jetpack Compose? For example, I want to display it above button.

[Pedro Alberto]

If you use a scaffold layout there is a place for the snackbar. the Scaffold layout already has all properties covered so the snackbar is always visible. If that's not case for you then you would need to use something similar that scaffold does basically create your layout that receives a Snackbar and you place it where you want. When you want to display things on top of each other usually the usecase is a Box. i.e :

Box {
MyButton()
MySnackBar()
}

[Rihards]

When you want to display things on top of each other usually the usecase is a Box

Such solution would hide the button. What I need to achieve - to place the snackbar higher than the button.

[Oleksandr Balan]

Technically you could use zero-height trick. This should not affect the column size.

Column(
    modifier = Modifier.padding(16.dp)
) {
    var visible by remember { mutableStateOf(false) }

    if (visible) {
        Snackbar(
            modifier = Modifier
                .height(0.dp)
                .wrapContentHeight(Alignment.Bottom, unbounded = true)
        ) {
            Text(text = "I am a Snackbar")
        }
    }
    Button(
        onClick = { visible = !visible },
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(text = "Button")
    }
}

Inspired by:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1679897079197999?thread_ts=1679857059.059849&cid=CJLTWPH7S

snackbar.mp4

[Rihards]

Nice, thank You!

[Pedro Alberto]

Nice @Oleksandr Balan good trick