I was pretty sure the way the snackbar works for `...
# compose
s
I was pretty sure the way the snackbar works for
Scaffold
is that when it shows its size is added to the
paddingValues
provided by the
Scaffold
and therefore pushes the items inside a bit up when it shows so that it does not show over other items. Am I wrong in this, do I maybe not remember correctly that I’ve seen this before, or does it sound like I am doing something wrong in my implementation somehow?
Hmm no I am probably wrong, it sounds like you wouldn’t want that behavior by default, but I’d still need a way to achieve it for my layout, if anyone has any information on how to do that that’d be great. Currently looking inside the
SnackbarHostState
inside the
ScaffoldState
doesn’t seem to be contain what I’m looking for, maybe going for a
onPlaced
modifier on my
SnackbarHost
is what I have to do.
i
Snackbars shouldn't push anything up - they used to in the original Material spec, but that was changed later because having other elements move as a snackbar appears and disappears turns out to be absolutely terrible for anything touchable (having touch targets move out from underneath users is generally something to avoid, not something to specifically want to do) - the material guidelines actually specifically point out: "Don't animate other components along with snackbar animations, such as the floating action button": https://material.io/components/snackbars#behavior
z
If theres a bar at the bottom, should snackbars be automatically offset to account for it? I think that was the case in compose 1.2.0, but its no longer in 1.3.0+.
i
That depends on whether you are using the Material Scaffold (which gives you a
snackbarHost
by default:
snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }
) or a Material3 Scaffold (which does not:
snackbarHost: @Composable () -> Unit = {}
) so make sure you are providing your own
SnackbarHost
to that parameter if you are using the Material3 Scaffold to get the snackbar to be positioned correctly
z
@Ian Lake Im using M2 with a BottomSheetScaffold. I was having this issue a while back too, but I cant recall how I solved it. For now Ill consider it a bug on my end, if you have a chance to verify that it works for you - please let me know, otherwise Ill just post a bug report when I get the chance to experiment with it!
s
Aha now it makes sense, why I thought this was the case (it used to be) and why this no longer happens. Very fair point about moving the touch point around, definitely something to avoid. With all that said, I now on a screen have a case where the snsckbar is going over a button which I have showing on the bottom of my screen and hiding it almost completely. If I were to add an action on that snackbar, it’d be super easy to miss click it and click on the button below it, very bad UX imo. Where should that snackbar show in that case I wonder, somehow over that bottom anchored button? if that’s the case I can’t really put that snackbar on the Scaffold, since that one doesn’t know about this button that exists somewhere inside the scaffold
content @Composable (PaddingValues) -> Unit
. Should that bottom anchored button simply always be pushed up by the space that the snackbar might take if it were to appear? That would potentially solve this but it’d move that button quite a bit up with seemingly without good reason (for the times the users don’t ever see a snackbar)
Made this issue now since I feel like no matter what I try it turns out to be a hack 😄 I simply can’t use Scaffold’s
snackbarHost: @Composable (SnackbarHostState) -> Unit
parameter and I’m now experimenting doing smth like
Copy code
Scaffold(...) {
  Column() {
    Stuff()
    Spacer(1f)
    SnackbarHost(snackbarHostState)
    ButtomAttachedButton()
  }
}
So that it shows above that content, as https://material.io/components/snackbars#placement is suggesting like in the FAB case. Currently one has to do this manually it seems, the
Scaffold
composable doesn’t really help in this case.
Nah that won’t work either as it can be scrolled off screen and missed. I guess I’ll go with the scaffold SnackBar and let it go over my clickable items. Kinda lost on this one 🤷‍♂️
z
I think it's a regression in compose, @Stylianos Gakis. I tried checking out an earlier commit of my project and it works there. Even though the code is exactly identical.