Message List

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

// CometChatMessageList is typically used within CometChatMessages
// or as part of a custom messaging screen
class MessagingScreen extends StatelessWidget {
  final User user;
  
  const MessagingScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          CometChatMessageHeader(user: user),
          Expanded(child: CometChatMessageList(user: user)),
          CometChatMessageComposer(user: user),
        ],
      ),
    );
  }
}

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

// For a user conversation
CometChatMessageList(
  user: user,
)

// For a group conversation
CometChatMessageList(
  group: group,
)

CometChatMessageList(
  user: user,
  messagesRequestBuilder: MessagesRequestBuilder()
    ..uid = user.uid
    ..searchKeyword = "searchKeyword"
    ..limit = 30,
)

CometChatMessageList(
  user: user,
  onThreadRepliesClick: (message, context, {template}) {
    // Handle thread replies click
  },
  onError: (e) {
    // Handle error
  },
  onLoad: (list) {
    print("Messages loaded: ${list.length}");
  },
  onEmpty: () {
    print("No messages");
  },
  onReactionClick: (emoji, message) {
    // Handle reaction click
  },
)

CometChatMessageList(
  user: user,
  headerView: (context, {group, parentMessageId, user}) {
    return Container(
      width: double.maxFinite,
      color: Color(0xFFEDEAFA),
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        children: [
          Icon(Icons.notes_outlined, color: Color(0xFF6852D6)),
          SizedBox(width: 8),
          Text('Notes', style: TextStyle(color: Color(0xFF6852D6))),
        ],
      ),
    );
  },
)

CometChatMessageList(
  user: user,
  footerView: (context, {group, parentMessageId, user}) {
    return Container(
      width: double.maxFinite,
      color: Color(0xFFEDEAFA),
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        children: [
          Icon(Icons.sunny, color: Color(0xFF6852D6)),
          SizedBox(width: 8),
          Text('Ice Breakers', style: TextStyle(color: Color(0xFF6852D6))),
        ],
      ),
    );
  },
)

CometChatMessageList(
  user: user,
  loadingStateView: (context) {
    return Center(
      child: CircularProgressIndicator(),
    );
  },
)

CometChatMessageList(
  user: user,
  emptyStateView: (context) {
    return Center(
      child: Text("No messages yet. Start the conversation!"),
    );
  },
)

CometChatMessageList(
  user: user,
  errorStateView: (context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Couldn't load messages"),
          ElevatedButton(
            onPressed: () {
              // Retry logic
            },
            child: Text("Retry"),
          ),
        ],
      ),
    );
  },
)

CometChatMessageList(
  user: user,
  style: CometChatMessageListStyle(
    backgroundColor: Color(0xFFFEEDE1),
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
      backgroundColor: Color(0xFFF76808),
    ),
  ),
)

CometChatMessageList(
  user: user,
  style: CometChatMessageListStyle(
    avatarStyle: CometChatAvatarStyle(
      border: Border.all(width: 5),
      borderRadius: 20,
      backgroundColor: Colors.red,
    ),
  ),
)

CometChatMessageList(
  user: user,
  textFormatters: [
    CometChatMentionsFormatter(
      style: CometChatMentionsStyle(
        mentionSelfTextBackgroundColor: Color(0xFFF76808),
        mentionTextBackgroundColor: Colors.white,
        mentionTextColor: Colors.black,
        mentionSelfTextColor: Colors.white,
      ),
    ),
  ],
)

List<CometChatMessageTemplate> getTemplate() {
  // Creating a text template
  CometChatMessageTemplate textTemplate = ChatConfigurator.getDataSource().getTextMessageTemplate();
  textTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        (baseMessage as TextMessage).text,
        style: TextStyle(
          color: alignment == BubbleAlignment.left ? Colors.deepPurple : Colors.yellow,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  };

  // Creating a custom message template
  CometChatMessageTemplate customMessageTemplate = CometChatMessageTemplate(
    type: 'custom_template',
    category: 'custom_category',
    bubbleView: (message, context, alignment) => const Text('Custom message'),
  );

  return [textTemplate, customMessageTemplate];
}

// Usage
CometChatMessageList(
  user: user,
  templates: getTemplate(),
)

CometChatMessageList(
  user: user,
  dateSeparatorPattern: (DateTime dateTime) {
    return DateFormat("dd/MM/yyyy").format(dateTime);
  },
)

CometChatMessageList(
  user: user,
  datePattern: (message) {
    return DateFormat('EEE, M/d/y').format(message.sentAt!);
  },
)