Is there a better way of doing this :point_down: ```val lits1 = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 1...

# compose

[ritesh]

Is there a better way of doing this 👇

val lits1 = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
val list2 = listOf("one", "two", "three", "four", "five")
LazyRow {
    // first
    itemsIndexed(items = lits1) { _, item ->
        Text(text = "$item")
    }

    // second
    itemsIndexed(items = list2) { _, item ->
        Text(text = item, modifier = Modifier.background(Green))
    }
}

Instead of giving background to each items in list2, is it possible to give the whole list items as a background in second itemsIndexed. I couldn't think of any other solution than this.

[f.babic]

You can pass in a modifier to the LazyRow that has a background, if that's what you're saying.

[ritesh]

Sorry, if i was not clear.

// second
    itemsIndexed(items = list2) { _, item ->
        Text(text = item, modifier = Modifier.background(Green))
    }

Each item here, should have a different background, i was wondering instead of passing background to each Text - is there a better way -like wrap it as a whole inside a Surface or something. But I guess i won't be able to as it needs to be called from Composable and also to access itemsIndexed items it needs LazyListScope

Just curious if there is a way to do it, above solution works for me though!

[theapache64]

@ritesh The current approach works, but will get tricky when you want to scroll to an item. I’d combine the two list into one object and use Row inside items and use two Text or one annotatedString

[ritesh]

I see - wondering in what scenario above solution can get tricky, my understanding is LazyRow controls the scroll behaviour of the items laid out and you can have as many itemsIndexed or items inside its scope. Or may be i am missing something?

[f.babic]

You can also wrap the String into a class like class MyData(val text: String, val color: Color) and then pass that so you color each item differently

[ritesh]

Sure, but that's happening here already

Text(text = item, modifier = Modifier.background(Green))

Also, it can be just a string or a different composable with Strings and other things altogether!

[ritesh]

Probably i am asking the wrong the question 😄

I basically wanted to avoid giving background to each Composable , instead use a wrapper and give it a background in above scenario for second itemsIndexed or say for list2.

[Chris Sinco [G]]

Do you have a mock-up of what you want to achieve?

[ritesh]

Something like this - it's not just limited to a Text , but it can be anything. The list2 (the one in green), that can be achieved by giving background as green to each and every item in list2. I was wondering instead of giving background to each item composable, can it be just given to the whole list2 items, as in can it be wrapped in a Surface or so and give it background.

[Chris Sinco [G]]

I see. I think your approach works best for lazy lists since the benefit of lazy is it only composes and measures items that are in the viewport.

[Chris Sinco [G]]

You could try to use a non-lazy list with Row and see how it performs first before deciding to use the lazy constructs. The benefit is you can wrap things more easily with a single background because the whole list will be measured and composed. But that's also the downside if you have many items and/or they are complex. For example, if each item was just Text, you could probably get away with a non-lazy Row of 50 items.

[Chris Sinco [G]]

All that being said, try it first, see how it feels, then choose accordingly.

[ritesh]

Thanks Chris!

[theapache64]

@ritesh Just saw your mockup. I was thinking it in a different way. My approach won’t suite in this case 😄

[ritesh]

Sure, no problem. Thanks for looking into it though!