> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-restapi-chatapi-quotedmessages.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# List Item

`CometChatListItem` contains one to three lines of text optionally flanked by icons or other widgets, such as `CometChatAvatar`, `CometChatDate` or `Text`. `CometChatAvatar` will always be shown in the leading view therefore either one among the `avatarURL` or `avatarName` must be provided. The icons (or other widgets) for the list item are defined with the `tailView` parameter. The first line of text is optional and is specified with `title`. The value of subtitle is also optional, will occupy the space allocated for an additional line of text or some other widget.

## Properties

| Properties               | Type                                                        | Description                                                                       |
| ------------------------ | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |
| **avatarURL**            | String                                                      | sets image url to be shown in avatar in the leading view                          |
| **avatarName**           | String                                                      | sets name to be shown in avatar in the leading view if avatarURL is not available |
| **id**                   | String                                                      | unique id for the widget                                                          |
| **statusIndicatorColor** | Color                                                       | sets color of the status indicator                                                |
| **statusIndicatorIcon**  | Widget                                                      | sets icon of the status indicator                                                 |
| **title**                | String                                                      | sets the title to display                                                         |
| **subtitleView**         | Widget                                                      | sets custom subtitle below the title                                              |
| **tailView**             | Widget                                                      | sets the trailing widget, can be a `Text`, `CometChatDate` or `CometChatBadge`    |
| **options**              | List\<CometChatOption>                                      | list of option available for the list item                                        |
| **hideSeparator**        | bool                                                        | used to hide the divider separating the list items                                |
| **style**                | [ListItemStyle](/ui-kit/flutter/v4/list-item)               | used to customize the appearance of this widget                                   |
| **avatarStyle**          | [AvatarStyle](/ui-kit/flutter/v4/avatar)                    | used to customise the Avatar shown in the leading view                            |
| **statusIndicatorStyle** | [StatusIndicatorStyle](/ui-kit/flutter/v4/status-indicator) | used to customise the status indicator                                            |
| **theme**                | [CometChatTheme](/ui-kit/flutter/v4/theme)                  | used to set custom theme                                                          |

***

## ListItemStyle

`ListItemStyle` is the class containing attributes to customize appearance of this widget.

| Properties         | Type      | Description                                                    |
| ------------------ | --------- | -------------------------------------------------------------- |
| **titleStyle**     | TextStyle | used to customise the appearance of the title                  |
| **separatorColor** | Color     | used to set the color of the divider separating the list items |
| **height**         | double    | used to set height                                             |
| **width**          | double    | used to set width                                              |
| **background**     | Color     | used to set the background color                               |
| **gradient**       | Gradient  | used to set background gradient                                |
| **border**         | BoxBorder | used to set border                                             |
| **borderRadius**   | double    | used to set border radius                                      |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart
    User _user = User(
      name: 'Kevin',
      uid: 'UID233',
      avatar: "https:__data-us.cometchat.io_assets_images_avatars_cometchat-uid-3.webp",
      role: "test",
      status: "online",
      statusMessage: "This is now status"
    );

    StatusIndicatorUtils statusIndicatorUtils =StatusIndicatorUtils.getStatusIndicatorFromParams(
      theme: cometChatTheme,
      user: _user,
    );

    Color? backgroundColor = statusIndicatorUtils.statusIndicatorColor;
    Widget? icon = statusIndicatorUtils.icon;

    CometChatListItem(
      avatarName: _user.name,
      avatarURL: _user.avatar,
      title: _user.name,
      statusIndicatorColor: backgroundColor,
      statusIndicatorIcon: icon
    )
    ```
  </Tab>
</Tabs>