Hi, just a newbie to Compose. Trying to show a lis...

# compose

[Rooparsh]

Hi, just a newbie to Compose. Trying to show a list of data with bottom app bar. I have used scaffold as a parent with AdapterList as body content and bottomappbar. The problem is my AdapterList is being overlapped with bottomappbar and I can't seem to find any way around it. I am using dev09 . I know its childish mistake.

[Kazemihabib1996]

Please, share your code.

[Rooparsh]

@Kazemihabib1996 please find my code sample attached.

Scaffold

[Rooparsh]

@Kazemihabib1996 Also attaching a screenshot for reference. Also found out that the list is not scrolable

[Kazemihabib1996]

It seems to be a bug,
you can add some padding to the you content untill compose fix this problem:
`Column(modifier = Modifier.padding(start = 20.dp, end = 20.dp, bottom = 56.dp)) {1

[Kazemihabib1996]

And I think your list not scrolls because you don't have enough items in your list to make it scrollable, try adding some items, I think that would fix it

[Rooparsh]

@Kazemihabib1996 currently I have 50 items in the list

[Kazemihabib1996]

about the content I was wrong

[Kazemihabib1996]

I read the source of Scaffold, it works like this
it calculates the BottomAppBar size and calls the body content with a modifier.padding(bottom = ..)

[Kazemihabib1996]

so the correct way is to do it like this:
bodyContent = { modifier -> Content(modifier, list = ... }) },

[Kazemihabib1996]

and

fun Content(modifier: Modifier, list: List<String>?) {
    Column(modifier = modifier.padding(start = 20.dp, end = 20.dp)) {

[SaurabhS]

AdapterList not scrolling is a bug in recent versions. It's fixed in the latest snapshots.

[Rooparsh]

@Kazemihabib1996 Thanks. It works and also this makes the list scrollable.

[Kazemihabib1996]

It was in the documentation and it's weird I've never read that before 🙂
* @param bodyContent content of your screen. The lambda receives a Modifier that should be
* applied to the content root to get the desired behavior. If you're using VerticalScroller,
* apply this modifier to the child of the scroller, and not on the scroller itself.

[Rooparsh]

Even I missed that

[Leland Richardson [G]]

yep. That modifier is passed through precisely because this bug will happen if you don’t…

we aren’t exactly happy with this solution, but have been struggling to find a better way. My fear is that most people will do exactly what you did and completely miss the fact that a parameter is passed in here.

[Kazemihabib1996]

@Leland Richardson [G]
would you mind explain it a little more why you can't be apply that modifier inside the Scaffold? I mean what are the challenges of that approach?

[Leland Richardson [G]]

Well the problem is that the modifier really needs to be passed into the scroller

[Leland Richardson [G]]

but we didn’t want Scaffold to create its own scroller, since that will usually be a component that you want to control explicitly

[Leland Richardson [G]]

also you could have the scroller be nested in a few other composables, so won’t necessarily be a direct child

[Kazemihabib1996]

Oh, right, thank you

[Kazemihabib1996]

@Leland Richardson [G]
I like to understand everything, sorry if I'm asking too many questions.
And why you can't just wrap the bodyContent inside a box and apply the modifier to that box? what problems it might cause?

[Leland Richardson [G]]

no worries at all!

[Leland Richardson [G]]

honestly i don’t know all of the specifics here, but my understanding is it had to be applied to the scrollable element