not fairly Superior work with the Snackbar within the Jetpack Compose | by Sergei Mikhailovskii | Oct, 2022 will lid the newest and most present steerage regarding the world. proper to make use of slowly so that you perceive with ease and appropriately. will development your information easily and reliably

The picture is taken from


A A couple of days in the past I obtained the duty: present the snack bar in case the API name ends with the error, like Inside service error, flawed gateway both Misplaced.

Since I did not work with him. snack bar earlier than in jetpack compose, I began in search of the very best practices of its implementation. Essentially the most helpful tutorial was this one, because it totally described tips on how to show a snack bar.

Now it is time to describe the structure of the applying.

The UI-side arc appears to be like like this:

  • I take advantage of single exercise structure (because it’s Compose, it is simple to comply with this precept)
  • My Compose app appears to be like like this
  • The screens are displayed on NavHost, right here is an instance of the display, which can obtain the error from the server

As you’ll be able to see, the error I want to point out the person comes from See mannequin through shared stream.


To point out the Snackbar we should configure the ScaffoldState in the direction of Scaffold. ScaffoldState accommodates 2 fields — drawerStatus (not fascinating for us now) and snackbarHostState. AIt is stated within the documentation:

SnackbarHostState — State of SnackbarHost, controls the present Snackbar and queue displayed inside SnackbarHost.

In code it appears to be like like this:

And now we’re confronted with the primary downside: our display (i.e. welcome display) is aware of nothing about scaffolding state, from Scaffold it’s positioned on the root of the applying, not on the display stage.

The primary answer that got here to thoughts is to cross the state as a parameter to all Composable strategies that ought to deal with the exception. However this answer would not appear to be excellent, as a result of we have now to cross state to virtually each composable, and typically we have to cross it not as a result of our perform wants it, however as a result of some inside perform wants it.

The second answer was to outline a worldwide variable, which is able to maintain the state, and composable, which must show a Snackbar, will entry it. I used this method, however modified it a bit.

Right here your code:

As you’ll be able to see, SnackbarDelegate it is only a wrapper SnackbarHostState Y CoroutineScope (we’d like it to show a snack baras a result of showSnackbar is a suspension perform). The article of this class is registered as a singleton within the DI container, so all lessons and strategies that may have entry to this object will work with the identical SnackbarHostState (the state of the SnackbarHost from the basis Scaffold. You may see it within the code snippet under).

And now we’re confronted with the next downside: completely different states of Snack bar. For instance, in my app there are 2 states: Error and Default Snackbar. The error bubble bar ought to have a crimson background, whereas the default bubble bar ought to have a blue coloration. Scaffold provides us the choice of customizing a snack bar for a snackbarHost parameter Permits us to show any composable as a snack barhowever you do not know something about our intern snack bar states I solved this downside with the assistance of Delegate Snackbar. Right here is the modified model.

There are a number of variations between this and the earlier model:

  1. I outlined a variable, which will probably be stored up to date. SnackbarState (inside state of my app)
  2. Earlier than the exhibition of snack bar I save this state (line 26)
  3. Supplied a getter for a snack bars background.

And so it’s used within the Composable of the App

To make use of the delegate, it is advisable to inject the delegate into the composable and name showSnackbar methodology. Right here is an instance:

In my case, I added a mediator: ErrorHandlerDelegateErrorHandlerDelegate. It permits me to deal with errors in a easy means all through the applying.

This answer is scalable, so if I must specify another parameters in Snackbar, I can put them within the delegate class and deal with their logic inside the category.

And that’s!


On this article I described an answer that lets you work with the snack bar within the massive jetpack compose software and handle its completely different states.

You will discover the supply code on Github.

Thanks for studying! Be happy to ask questions and go away your suggestions in feedback or LinkedIn.

I want the article nearly Superior work with the Snackbar within the Jetpack Compose | by Sergei Mikhailovskii | Oct, 2022 provides keenness to you and is beneficial for addendum to your information

Advanced work with the Snackbar in the Jetpack Compose | by Sergei Mikhailovskii | Oct, 2022

By admin