Hi i am using material3 compose snackbar and wishing to centre it in the middle of my UI...

# compose

[Tower Guidev2]

Hi

i am using material3 compose snackbar and wishing to centre it in the middle of my UI...

[Tower Guidev2]

this is the code i have...

val snackbarHostState = remember { SnackbarHostState() }

LaunchedEffect(connectionState) {
    when (connectionState) {
        is BackgroundState.Connected -> snackbarHostState.currentSnackbarData?.dismiss()
        is BackgroundState.Disconnected -> snackbarHostState.showSnackbar(
            message = "Internet connection lost",
            actionLabel = "Ok"
        )
        else -> doNothing()
    }
}

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    topBar = { Spacer(modifier = Modifier.height(0.dp)) },
    modifier = Modifier.fillMaxSize(),
) { paddingValues ->
    Column(

[Tower Guidev2]

however i cannot see how to centre the snackbar vertically in my UI
is it possible to affect the snackbar position within a scaffold?

[Kirill Grouchnikov]

In Material, the snackbar is at the bottom of the screen

[Kirill Grouchnikov]

https://m3.material.io/components/snackbar/guidelines#fdd21616-a476-4299-84f2-7e963919eded

[Tower Guidev2]

oh 🤦‍♂️
is there no way to change that?

[Kirill Grouchnikov]

That is not a face palm. You are using a specific design system. If you want to deviate from what that design system provides, you will need to implement your own solution.

[Tower Guidev2]

m3 places the snackbar above the FAB

[Kirill Grouchnikov]

Correct, and that is a part of the Material design spec

[Albert Chang]

That being said, you don’t have to use Scaffold and you can place the SnackbarHost wherever you want.