Skip to content

Make StreamChannelListTile trailing widget behave similarly with ListTile trailing in Flutter #2084

@mlab817

Description

@mlab817

Please select which package this feature is related to

stream_chat_flutter

Which platforms would this feature impact?

Android, iOS

Is your feature request related to a problem?

The trailing property of the StreamChatListTile is not intuitive because it does not follow the behavior of ListTile trailing property.

return BetterStreamBuilder<bool>(
      stream: channel.isMutedStream,
      initialData: channel.isMuted,
      builder: (context, isMuted) => AnimatedOpacity(
        opacity: isMuted ? 0.5 : 1,
        duration: const Duration(milliseconds: 300),
        child: ListTile(
          onTap: onTap,
          onLongPress: onLongPress,
          visualDensity: visualDensity,
          contentPadding: contentPadding,
          leading: leading,
          tileColor: tileColor,
          selected: selected,
          selectedTileColor: selectedTileColor ??
              StreamChatTheme.of(context).colorTheme.borders,
          title: Row(
            children: [
              Expanded(child: title),
              BetterStreamBuilder<List<Member>>(
                stream: channelState.membersStream,
                initialData: channelState.members,
                comparator: const ListEquality().equals,
                builder: (context, members) {
                  if (members.isEmpty) {
                    return const Offstage();
                  }
                  return unreadIndicatorBuilder?.call(context) ??
                      StreamUnreadIndicator.channels(cid: channel.cid);
                },
              ),
            ],
          ),
          subtitle: Row(
            children: [
              Expanded(
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: subtitle,
                ),
              ),
              BetterStreamBuilder<List<Message>>(
                stream: channelState.messagesStream,
                initialData: channelState.messages,
                comparator: const ListEquality().equals,
                builder: (context, messages) {
                  final lastMessage = messages.lastWhereOrNull(
                    (m) => !m.shadowed && !m.isDeleted,
                  );

                  if (lastMessage == null ||
                      (lastMessage.user?.id != currentUser.id)) {
                    return const Offstage();
                  }

                  final hasNonUrlAttachments = lastMessage.attachments
                      .any((it) => it.type != AttachmentType.urlPreview);

                  return Padding(
                    padding: const EdgeInsets.only(right: 4),
                    child:
                        sendingIndicatorBuilder?.call(context, lastMessage) ??
                            SendingIndicatorBuilder(
                              messageTheme: streamChatTheme.ownMessageTheme,
                              message: lastMessage,
                              hasNonUrlAttachments: hasNonUrlAttachments,
                              streamChat: streamChat,
                              streamChatTheme: streamChatTheme,
                              channel: channel,
                            ),
                  );
                },
              ),
              trailing, <--- trailing is nested inside subtitle
            ],
          ),
        ),
      ),
    );

The trailing property here could be renamed to subtitleEnd or something similar.

The trailing not available limits the customizability of the StreamChatListTile. For example, if you want to customize the actual trailing property, you'll need to modify the entire content of the StreamChatListTile. Just to give an example:

Messenger's channel list tile has a trailing that shows unread indicator as a dot and also a mute indicator.

Describe the solution that you'd like

Move the trailing property for StreamChatListTile to trailing and use a different trailing property for the subtitle.

Describe alternatives that you have considered

Customized the title and subtitle to fit my use case or use a Stack to add an overlay button at the end of the listtile.

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions