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

# List Item

> List Item — CometChat documentation.

`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 theme={null}
    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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.