Snackbar using Jetpack Compose
3 min readJan 23, 2024
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)…