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	used to customize the appearance of this widget
avatarStyle	AvatarStyle	used to customise the Avatar shown in the leading view
statusIndicatorStyle	StatusIndicatorStyle	used to customise the status indicator
theme	CometChatTheme	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

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
)