Snackbar using Jetpack Compose

Hey you all, grab a cup of coffee ☕, and let’s see how to implement a Snackbar using Jetpack Compose and material3.

Required dependency

Make sure that you have this dependency added in your :app/build.gradle.kts .

dependencies {
    implementation("androidx.compose.material3:material3")
}

Implementing the Snackbar

Let’s start by creating the snackbar state by using SnackbarHostState .

val snackbarHostState = remember { SnackbarHostState() }

As it is an asynchronous component we need to launch it in a CoroutineScope .

val coroutineScope = rememberCoroutineScope()

The snackbar needs to be attached to the Scaffold . To do this we create the SnackbarHost and pass the state to it.

Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    }
) { contentPadding ->
    // ...
}

Let’s just center the button and then display a simple snackbar with a message.

Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    }
) { contentPadding ->
    // Centering the button
    Box(
        modifier = Modifier
            .padding(contentPadding)…