[FIXED] Can ListItem leadingContent be top aligned in Jetpack Compose Material3?

Issue

ListItem has been added to M3, but the leadingContent is centered vertically. Is there a way to align it at the top?

    ListItem(
        leadingContent = {
            AvatarView(avatar = friend.avatar, size = 40, modifier = modifier) {
                onClick(0)
            }
        },
         headlineText = {
            Text(text = friend.name,
                modifier = Modifier
                    .padding(bottom = 8.dp)
                    .wrapContentWidth(align = Alignment.Start)
                    .then(modifier))
        },
        supportingText = {
            Text(text = friend.bio + "", modifier = Modifier
                .padding(bottom = 16.dp)
                .then(modifier))
        },
        modifier = Modifier.clickable { onClick(0) }
    )

Solution

According to the M3 specs guideline, the leadingContent has contentAlignment = Alignment.TopStart only with the Three-Line List Item.
You can achieve it adding an empty overlineText attribute with overlineText = { }.

Something like:

ListItem(
    headlineText = { Text("Two line list item with empty overlineText") },
    supportingText = { Text("Secondary text") },
    overlineText = {  },
    leadingContent = {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Localized description",
        )
    }
)

---

Specs guidelines:

Two-line lists: Three-line lists:

Answered By - Gabriele Mariotti
Answer Checked By - David Marino (JavaFixing Volunteer)