From a design perspective, whats the best way to h...
# compose
g
From a design perspective, whats the best way to have a global bottom sheet that can be called from anywhere? I'm looking to have a bottom sheet that sits ontop of the root layout so it can superimpose any current content, but the content inside the sheet can vary depending on when it needs to pop up for what. Some of these layouts can get very nested and are split across a lot of classes to support adaptive/multiplatform layouts. is the best way to do this just to keep a global state var that holds a composable function? eg;
val bottomSheetContent = mutableStateOf<(@Composable () -> Unit)?>(null)
Then to show the bottom sheet from anywhere you could just set content into that state value.
Although the docs for
ModalBottomSheet
are slightly confusing, why is there a show and hide function in the sheet state if the same example has you wrapping the sheet in an if for a state boolean - which would do the same thing?
s
It doesn't do the same thing. Hiding will hide it by animating it out. Putting it inside and if statement will make it just disappear if you do not call it at all.
g
That's not how it behaves, no. A plain if/?.let still animates, so I assume it's doing internal animations.
You can also see on the docs they have it wrapped in an if and are using that to show/hide it. https://developer.android.com/jetpack/compose/components/bottom-sheets
s
When does
onDismissRequest
get called, after it has finished animating out or right as it starts animating out?
g
After the animation finishes.
I'm assuming it's doing internal animations for when it first spawns and then when it closes it waits until the animation is done to run the dismiss.
s
Yeap, so it's already animated out before the if statement will turn false and it leaves composition. If you have the sheet showing and you just turn that condition to false the sheet will simply cease to exist since it's gonna be leaving composition
If you do exactly that, do you experience the same behavior or does it nicely animate out despite not being in composition anymore?
g
Yes that'd make sense that it would just remove it from composition, the doc also is using the state to run the hide animation when it's not swiped I see.
If a global state holding a composable function is the cleanest way to do a global bottom sheet then I suppose it's working fine the way I have it implemented
s
Not sure why you want a global way to approach this tbh, what was breaking when you had it on a per-case basis?
g
Oh... it overlays the root layout regardless, nevermind cool. I had incorrectly assumed that it'd be bound to the layout constraints of whatever it's parent was so you'd have to have it near the root if you wanted to overlay everything
Thanks I hadn't realized that
s
Yeah unless you've got other things that need to in some way coordinate with the sheet, like snackbars, I don't think you need any global solution like that.
g
Is there documentation on how to overlay the whole layout like that by hand? I guess I can go look through the implementation for the bottom sheet. It'd be a useful thing to know if I ever need to do it in the future
s
I don't remember 100% but if you look inside here https://github.com/oleksandrbalan/modalsheet they may be doing the same thing. You might learn what you want from looking at the internals.
g
Thanks!
s
If you do find something interesting there let me know too 😅 I haven't looked into it yet but I'd like to
f
Yep, you want to checkout the
FullscreenPopup
in the repo as the base building block.
🌟 2