Snackbars et SnackbarHostState
Affichez des messages temporaires selon les principes de Material.
Snackbars et SnackbarHostState est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
What Is a Snackbar?
A Snackbar is a brief message that slides up at the bottom, like Message sent, then fades on its own. It informs without blocking the screen. 💬
Snackbar vs Dialog
A dialog demands a response; a Snackbar does not. Reach for it for quick confirmations, not for choices the user must make.
Meet SnackbarHostState
Showing a snackbar is driven by SnackbarHostState. This object holds the queue and gives you the function that triggers a message.
val hostState = remember { SnackbarHostState() }Remember It
Wrap the state in remember so the same SnackbarHostState survives recomposition. A fresh one each frame would lose any pending message.
The snackbarHost Slot
Tell Scaffold where snackbars appear by filling its snackbarHost slot with a SnackbarHost bound to your state.
snackbarHost = { SnackbarHost(hostState) }showSnackbar Is Suspend
The showSnackbar function suspends, because it waits while the message is visible. So you must call it from a coroutine, not directly in a click.
Launch From a Scope
Grab a rememberCoroutineScope and launch showSnackbar inside it. That bridges a normal onClick to the suspend call safely.
scope.launch {
hostState.showSnackbar("Saved")
}Add an Action
Pass an actionLabel to add a button, such as Undo. The call returns a result telling you whether the user tapped that action.
val result = hostState.showSnackbar(
"Deleted", actionLabel = "Undo"
)React to the Result
Check the returned SnackbarResult. If it equals ActionPerformed, run your undo logic; otherwise the snackbar simply dismissed.
if (result == SnackbarResult.ActionPerformed) {
restoreItem()
}Control the Duration
Set how long it lingers with SnackbarDuration: Short, Long, or Indefinite. Use Indefinite only when the message truly needs the user to act.
One Host, Many Messages
A single SnackbarHostState queues messages, showing them one at a time. So share one host per Scaffold rather than creating several.
Quick Check
Why must you launch showSnackbar inside a coroutine scope?
Recap
Remember a SnackbarHostState, wire it into Scaffold's snackbarHost, then launch showSnackbar from a scope. You can finish a polished app shell now. 🎉
Questions Fréquemment Posées
La leçon « Snackbars et SnackbarHostState » est-elle gratuite ?
Oui — le texte complet de « Snackbars et SnackbarHostState » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Snackbars et SnackbarHostState » ?
Affichez des messages temporaires selon les principes de Material. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Snackbars et SnackbarHostState » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Scaffold : le squelette de l’écran
- TopAppBar et icônes d’action
- Barres inférieures et boutons d’action flottants
- Snackbars et SnackbarHostState