From a design perspective, whats the best way to have a global bottom sheet that can be called from ...

# compose

[Garret Yoder]

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.

[Garret Yoder]

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?

[Stylianos Gakis]

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.

[Garret Yoder]

That's not how it behaves, no. A plain if/?.let still animates, so I assume it's doing internal animations.

[Garret Yoder]

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

[Stylianos Gakis]

When does onDismissRequest get called, after it has finished animating out or right as it starts animating out?

[Garret Yoder]

After the animation finishes.

[Garret Yoder]

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.

[Stylianos Gakis]

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

[Stylianos Gakis]

If you do exactly that, do you experience the same behavior or does it nicely animate out despite not being in composition anymore?

[Garret Yoder]

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.

[Garret Yoder]

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

[Stylianos Gakis]

Not sure why you want a global way to approach this tbh, what was breaking when you had it on a per-case basis?

[Garret Yoder]

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

[Garret Yoder]

Thanks I hadn't realized that

[Stylianos Gakis]

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.

[Garret Yoder]

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

[Stylianos Gakis]

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.

[Garret Yoder]

Thanks!

[Stylianos Gakis]

If you do find something interesting there let me know too 😅 I haven't looked into it yet but I'd like to

[Filip Wiesner]

Yep, you want to checkout the FullscreenPopup in the repo as the base building block.