Superior work with the Snackbar within the Jetpack Compose | by Sergei Mikhailovskii | Oct, 2022 | Honor Tech

about Superior work with the Snackbar within the Jetpack Compose | by Sergei Mikhailovskii | Oct, 2022 will cowl the most recent and most present opinion with regards to the world. door slowly so that you perceive with out issue and appropriately. will enhance your data proficiently and reliably

The picture is taken from


A Just a few days in the past I acquired the duty: present the snack bar in case the API name ends with the error, like Inner service error, improper gateway both Misplaced.

Since I did not work with him. snack bar earlier than in jetpack compose, I began searching for one of the best practices of its implementation. Probably the most helpful tutorial was this one, because it totally described find out how to show a snack bar.

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

The UI-side arc seems to be like this:

  • I exploit single exercise structure (because it’s Compose, it is easy to observe this precept)
  • My Compose app seems to be 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 indicate the consumer comes from See mannequin through shared stream.


To indicate the Snackbar we should configure the ScaffoldState in the direction of Scaffold. ScaffoldState comprises 2 fields — drawerStatus (not attention-grabbing 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 seems to be 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 appliance, not on the display degree.

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

The second resolution was to outline a world variable, which is able to maintain the state, and composable, which have to 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 thing of this class is registered as a singleton within the DI container, so all lessons and strategies that can have entry to this object will work with the identical SnackbarHostState (the state of the SnackbarHost from the basis Scaffold. You possibly can see it within the code snippet beneath).

And now we’re confronted with the next downside: totally 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 can be stored up to date. SnackbarState (inner 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, you must 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 appliance.

This resolution is scalable, so if I have to 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 means that you can work with the snack bar within the large jetpack compose software and handle its totally different states.

Yow 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 hope the article nearly Superior work with the Snackbar within the Jetpack Compose | by Sergei Mikhailovskii | Oct, 2022 provides acuteness to you and is beneficial for adjunct to your data

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