What's the best way to have a container like a Ca...

# compose

[bryankeltonadams]

What's the best way to have a container like a Card around the LazyColumn items dsl? I have a LazyColumn that has an item with a row, an item with a card and some details, and another item with a card and some details.. I now need to add a Card with a list of reviews which start off as 5 reviews but there's a "see more" button which will grab 5 more reviews and add them to the list.. It seems like this is the part that should be "lazy" if anything so I don't want to just do another single item{} with a Card and then a Column with a for loop.. I have another view that does this same thing and it works fine because the reviews aren't inside a card, but now that I need them in a Card it's kind of throwing me off.

[bryankeltonadams]

So basically

LazyColumn() {
item{ Card() {itemDetails}}
item{ Card() { itemStatisticChart}}

// now I need to add a list of reviews which live are inside of its own card.
}

[Kirill Grouchnikov]

Does it have to be a Card ? Are you looking for continued visuals of a card container that wraps multiple rows? If you don't need the shadows, you can emulate the card container visuals by applying top-middle-bottom painters to individual rows.

[bryankeltonadams]

Yeah it just needs to at least look like a Card. I mean I could do it pretty easily if it was just the one card. it would just be a Card with a LazyColumn inside of the card and I think that would work good. But having the other elements inside the LazyColumn obviously throws a wrench in things.

[Kirill Grouchnikov]

Outlined card or elevated card?

[bryankeltonadams]

I'm using a Material Card with elevation = 15.dp at the moment. We haven't migrated to Material3 yet 😞

[bryankeltonadams]

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 10.dp, vertical = 1.dp),
    elevation = 15.dp,
) {
   LazyColumn { 
       items(50) {
           Text("test")
       }
   }
}

So basically just need that but inside of a LazyColumn but then still have the benefit of the review items being inside of a LazyColumn rather than as a single item {
Card() {
items.forEach{
}
}

[Kirill Grouchnikov]

If it's elevation based shadows, there's no good way to emulate such visuals with multiple rows

[bryankeltonadams]

dang... I wonder if you could make each item a card, and then like crop the top and bottom off or something

[bryankeltonadams]

Dang, I find it crazy that I can't figure out how to implement this. Having a fixed height nested scrollable container for the reviews within a card seems to be the best option but still not ideal at all. A hacked together visual card with no proper elevation looks terrible.

[Kirill Grouchnikov]

M3 in general mostly moved away from elevation, and towards tonal containment. You can consider using one of the surface container roles for nested containment, replacing elevation.

[bryankeltonadams]

Would I run into the same issues with trying to do seamless containment trying to mimic a card?

[bryankeltonadams]

almost wish you could provide a container composable that you could pass to the items() dsl that it would draw that subsection of items in.

[Kirill Grouchnikov]

Doing so in a generic way is not technically feasible, with the native drop shadows being just one example.

The simpler case of a flat fill with rounded corners at the top and the bottom can be achieved by setting matching painters (top rounded for first item, square corners for mid items, bottom rounded for the last item).

[bryankeltonadams]

so is the "simpler case" basically what I have here, where there's no shadow on the "card" but it's all still seamless. I have a top item, items(), and a bottom item.

no shadow.webm