This simple component consist of message (1), container (2) and optional action button (3). Message can be maximally 2 lines long.
In Jetpack Compose there is composable function named Snackbar. It's just visual representation of snackbar as defined in Material design guidelines, without show or hide options and without animations. Usually you will need to use SnackbarHost.
This component is responsible for showing(or hiding snackbar after defined time) and it's fade animations. Simply said, SnackbarHost is wrapper of Snackbar mentioned above. It takes 3 parameters
As descriptive name of class suggest, it is used to control state of SnackbarHost. As Material design guideline mentions, only one snackbar should be showed at a time, others are queued and will show later by SnackbarHostState.
Only mandatory parameter of SnackbarHostState is hostState that can be obtained simply by it's constructor. Then you can just place SnackbarHost wherever you want. But snackbar still doesn't show, so how to do that?
Snackbar is showed as reaction on something. In our case "something" is click on button. ShowSnackbar is suspend function thus coroutine scope is needed. You need to remember coroutine scope outside of onClick function because when the scope is cancelled the snackbar is removed from the queue.
Key here is to modify snackbar parameter of SnackbarHost. Without our modification default Snackbar composable is used. With code below, our design of snackbar is used but default behavior of snackbar is retained.
