Advanced work with Snackbar in Jetpack Compose | by Sergei Mikhailovskii | October 2022

The picture is taken from the material.io

Introduction

A Just a few 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 one of the best practices of its implementation. Probably the most useful tutorial was East because it totally described the best way to show a snack bar.

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

The UI-side arc seems like this:

  • I exploit single exercise structure (because it’s Compose, it is simple to comply with this precept)
  • My Compose app seems 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 may see, the error I would like to indicate the person comes from See mannequin through shared stream.

Implementation

To point out the Snackbar we should configure the ScaffoldState in direction of Scaffold. ScaffoldState comprises 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 seems 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 stage.

The primary resolution 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 resolution does not appear to be excellent, as a result of we have now to cross state to virtually each composable, and generally 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 resolution was to outline a world variable, which is able to maintain the state, and composable, which must show a Snackbar, will entry it. I used this strategy, however modified it a bit.

Right here your code:

As you may 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 courses and strategies that can have entry to this object will work with the identical SnackbarHostState (the state of the SnackbarHost from the foundation Scaffold. You possibly can 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 shade. 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 might 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. Offered 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 want 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 appliance.

This resolution 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!

conclusion

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

Yow will discover the supply code within the github.

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

By admin

x
THE FUTURE - BENEFIT NEWS - DANA TECH - RALPH TECH - Tech News - BRING THE TECH - Tech Updates - News Update Viral - THE TRUTH - WORLD TODAY - WORLD UPDATES - NEWS UPDATES - NEWS FLASH - TRUTH NEWS - RANK NEWS - PREMIUM NEWS - FORUM NEWS - PROJECT NEWS - POST NEWS - WORLD NEWS - SPORT NEWS - INDICATOR NEWS - NEWS ROOM - HEADLINE NEWS - NEWS PLAZA