Skip to content

[syncfusion_flutter_chat] Incoming messages after the first one are misaligned when using messageAvatarBuilder #2500

@mulder3062

Description

@mulder3062

Bug description

When using SfChat with a custom messageAvatarBuilder, consecutive incoming messages from the same author are misaligned. The first message displays correctly with the avatar, but subsequent messages are shifted to the right instead of being aligned with the first message's content area.

The issue occurs because the avatar space is not preserved for consecutive messages when messageAvatarBuilder returns a custom widget. The expected behavior is that all incoming messages should be left-aligned consistently, with the avatar space maintained even when the avatar is not displayed for consecutive messages.

Steps to reproduce

  1. Create a SfChat widget with messageAvatarBuilder configured
  2. Set incomingMessageSettings with showAuthorAvatar: true
  3. Display multiple consecutive messages from the same incoming user
  4. Observe that the first message is correctly aligned with the avatar
  5. Observe that subsequent messages are shifted to the right, breaking the visual alignment

Code sample

Code sample
SfChat(
  messages: chatMessages,
  outgoingUser: currentMember?.id ?? '',
  incomingMessageSettings: const ChatMessageSettings(
    showAuthorName: false,
    showTimestamp: false,
    showAuthorAvatar: true,
  ),
  outgoingMessageSettings: const ChatMessageSettings(
    showAuthorName: false,
    showTimestamp: false,
    showAuthorAvatar: false,
  ),
  messageHeaderBuilder: (context, index, message) {
    return _buildMessageHeader(message);
  },
  messageAvatarBuilder: (context, index, message) {
    // Don't show avatar for outgoing messages (my own messages)
    if (message.author.id == currentMember?.id) {
      return const SizedBox.shrink();
    }
    final entityMessage = state.messages[index];
    return MemberImage(member: entityMessage.writer, size: 32);
  },
  composer: composer,
)

Screenshots or Video

Screenshots / Video demonstration Image

Stack Traces

Stack Traces
[Add the Stack Traces here]

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.38.7, on Microsoft Windows [Version 10.0.26200.7623], locale ko-KR)
[√] Windows Version (11 Home 64-bit, 25H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.20)
[√] Connected device (3 available)
[√] Network resources

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions