Thread
#compose
    Pablo Reyes

    Pablo Reyes

    10 months ago
    hi! does anyone know how to center vertically the Icon or trailing elements in a ListItem? ...
    John Nichol

    John Nichol

    10 months ago
    I think you want something likeRow(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxSize()
    ) { ... }
    Pablo Reyes

    Pablo Reyes

    10 months ago
    thanks! but that doesn't work.. I'm using
    ListItem(
            Modifier.clickable(onClick = onClick),
            icon = {
             .... // Here are the elements I want to center
            }
    }
    If I use a Column/Row inside the Icon it does nothing 😕.
    John Nichol

    John Nichol

    10 months ago
    you will find icon left and vertically center aligned
    we use these in LazyColumn/ScalingLazyColumn all the time
    Pablo Reyes

    Pablo Reyes

    10 months ago
    great, let me take a look
    Chris Sinco [G]

    Chris Sinco [G]

    10 months ago
    The
    ListItem
    component is an experimental Material component so it definitely has some quirks and probably bugs. One thing to note though is that it's designed to be very close to the Material spec of list item templates (see the demo on this guideline page), so deviating from that may cause unforeseen issues, e.g. putting text in the Icon slot.
    I would suggest actually rolling your own ListItem since it seems you need to customize the content in the slots more than the design spec accommodates for. In looking at the implementation of ListItem, there's not a lot going on in there besides highly templated layout decisions, so I think you could achieve the same thing pretty quickly.