Hey all, I’m currently working with accompanist and the insets libraries, and it’s mostly doing what...

# compose

[Ryan Simon]

Hey all, I’m currently working with accompanist and the insets libraries, and it’s mostly doing what I want. Though I ran into a particular use case where passing padding from the insets-ui Scaffold to a child Composable isn’t very obvious

More info in the thread…

[Ryan Simon]

What I want to be able to do is pass the inset padding values given by the insets-ui Scaffold to anything that’s wrapped by the Scaffold.

Now technically I could do this using CompositionLocal, and I considered it, but I’m wondering if anyone else has ideas.

I’ve attached some relevant code. You’ll notice that the Scaffold wraps a nav graph and my intention is to have all the content be padded properly. The thing is I end up with clipping if I add the padding to Box that surrounds my nav graph content

[Ryan Simon]

Untitled.kt

[Ian Lake]

Box does no clipping, so it sounds like something else is going on. Note that NavHost takes Modifiers itself, so you could just pass the padding through to it

[Ryan Simon]

thanks for the idea, @Ian Lake. I gave passing the padding to the NavHost a try and it still clips the content when scrolling

maybe i need to be more specific, but basically i want the content to be scrollable behind the top and bottom bars in the Scaffold. that way there’s no visible clipping of the content during scroll

[Ryan Simon]

i was able to do this before by adding the scaffold padding directly to the contentPadding parameter of my LazyColumn, but that approach breaks down a bit when using this kind of navigation setup

[Ian Lake]

if you want content within a destination in your NavHost to appear behind the system bars, then you specifically don't want to to pad in the entire NavHost, you want to specifically apply padding directly to your scrolling view

[Ryan Simon]

right, that makes sense. and i guess the question is how to pass that padding down to the composables that care about it? it’s really more of an architecture/design question

[Ryan Simon]

cus i could certainly do it by parameter list or compositionlocal

[Ryan Simon]

that just feels kinda weird? i don’t know

[Ian Lake]

I don't see why you are passing anything down at all - you'd just use Modifier.statusBarsPadding(), etc. on the items you want?

[Ryan Simon]

i’ve tried that, but there’s extra padding that the Scaffold adds for the top and bottom bars that is needed beyond the status bars

[Ryan Simon]

that’s to make sure all your content is scrollable and visible in between the top and bottom bars. that’s something we get with the insets-ui Scaffold

[Ian Lake]

I'm having trouble following what you're expecting. If you have a TopAppBar always above your content and a BottomNavigation below your content, when is your content ever going to be overlapping the status bar or navigation bar? It'll always be in between the two other parts of your Scaffold

[Ian Lake]

And if it never overlaps, what clipping is occurring? The edges of the `Box`/`NavHost` would be padded correctly between the other two parts so that they never overlap or occlude one another

[Ryan Simon]

Well what's interesting is that the top and bottom bars with insets actually allow content to flow underneath them. So those bars are actually floating on top of the content underneath

[Ian Lake]

I will note that the Accompanist Scaffold docs (https://google.github.io/accompanist/api/insets-ui/insets-ui/com.google.accompanist.insets.ui/-scaffold.html) do say:

If you're using VerticalScroller, apply this [PaddingValues] modifier to the child of the scroller, and not on the scroller itself.

[Ryan Simon]

This is the functionality that I'm looking for. Essentially the content can scroll under the bars. The bars have some transparency to them, so it has a nice visual effect with the content somewhat coming through

[Ian Lake]

It does look like there's already a CompositionLocal for that padding: https://google.github.io/accompanist/api/insets-ui/insets-ui/com.google.accompanist.insets.ui/-local-scaffold-padding.html

[Ryan Simon]

Yeah, the snippet you posted from the docs tells me that I need to apply the scaffold padding directly to my LazyColumn

[Ryan Simon]

Omg lol

[Ian Lake]

"Could it be that easy?" lol

[Ryan Simon]

Okay well that answers my question about what I'd want to do. It still feels weird though having that inside my composable that has no other indication of what a scaffold is

[Ryan Simon]

That was really my predicament

[Ryan Simon]

Then maybe I should expose a modifier for my composable to the caller and do it that way. That seems right

[Ryan Simon]

That way my composables in the nav graph don't have to know they're wrapped by a scaffold or whatever

[Ian Lake]

Yep, passing it through every layer or reading it from a CompositionLocal will give you the same end result

[Ian Lake]

Just how explicit vs implicit you want to be

[Ian Lake]

I'd probably start with the CompositionLocal, then lift it out one layer at a time, raising the default value up the chain

[Ryan Simon]

For sure, for me it's about modularity and how easy it would be to move those composables around

[Ryan Simon]

That's a great idea. Thanks for humoring me, Ian. Much appreciated

[Ian Lake]

Best of luck!

[Ryan Simon]

Have a great night 👍🏻