messages property

A list of ChatMessage objects that will be displayed in the chat interface.

Each message includes details such as the message text, timestamp, author information, list of suggestions and suggestion settings.

List<ChatMessage> _messages = <ChatMessage>[
  ChatMessage(
    text:
       "Hi, I have planned to go on a trip. Can you suggest some places?",
    time: DateTime.now(),
    author: const ChatAuthor(
      id: 'a2c4-56h8-9x01-2a3d',
      name: 'User name',
    ),
    suggestions: <ChatMessageSuggestion>[
      ChatMessageSuggestion(
        data: 'Paris',
      ),
      ChatMessageSuggestion(
        data: 'New York',
      ),
      ChatMessageSuggestion(
        data: 'Tokyo',
      ),
      ChatMessageSuggestion(
        data: 'London',
      ),
    ],
    suggestionSettings: ChatSuggestionSettings(
      backgroundColor: Colors.grey[300],
      itemBackgroundColor: WidgetStateProperty.resolveWith<Color>(
        (states) {
          if (states.contains(WidgetState.hovered)) {
            return Colors.grey[400]!;
          }
          return Colors.grey;
        },
      ),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(4.0),
        ),
      ),
      itemShape: WidgetStateProperty.resolveWith<ShapeBorder>(
        (Set<WidgetState> states) {
          if (states.contains(WidgetState.hovered)) {
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
            );
          }
          return RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5),
          );
        },
      ),
      textStyle: WidgetStateProperty.resolveWith<TextStyle?>(
        (Set<WidgetState> states) {
          if (states.contains(WidgetState.disabled)) {
            return const TextStyle(fontSize: 16);
          }
          return const TextStyle(fontSize: 14);
        },
      ),
      padding: const EdgeInsets.all(10),
      itemPadding:
          const EdgeInsets.symmetric(horizontal: 12, vertical: 8.0),
      orientation: Axis.horizontal,
      itemOverflow: ChatSuggestionOverflow.scroll,
      runSpacing: 10.0,
      spacing: 10.0,
    ),
  ),
];

@override
Widget build(BuildContext context) {
  return SfChat(
    messages: _messages,
  );
}

Additionally, the message content can be extended to include more information about the chat message.

class ChatMessageExt extends ChatMessage {
  const ChatMessageExtend({
    required super.text,
    required super.time,
    required super.author,
    required this.displayName,
    required this.aboutMessage,
  });

  final String displayName;
  final String aboutMessage;
}

List<ChatMessage> _messages = <ChatMessageExt>[
  ChatMessageExt(
    text: 'Hello, how can I help you today?',
    time: DateTime.now(),
    author: const ChatAuthor(
      id: 'a2c4-56h8-9x01-2a3d',
      name: 'User name',
    ),
    displayName: 'UN',
    aboutMessage: 'A coding enthusiast',
  ),
];

@override
Widget build(BuildContext context) {
  return SfChat(
    messages: _messages,
  );
}

Implementation

SfChat class