missing usernameBuilder

[szechyjs]

Which packages are you using?

stream_chat_flutter

On what platforms did you experience the issue?

iOS

What version are you using?

v10.0.1

What happened?

Back in the v9 package we were able to do:

bottomRowBuilderWithDefaultWidget: (context, message, defaultBottomRow) {
  return defaultBottomRow.copyWith(
    usernameBuilder: (context, message) {
      // Custom logic here
      return MyCustomUsernameWidget;
    }
  );
}

Now in v10 it seems the only tools available are messageMetadata or messageFooter for overriding the footer widget. The problem with these is they require you to replace the entire widget and not inherit any of the default widget as its part of the internal core package.

Please bring back some of these footer builders or move things like DefaultStreamMessageMetadata out of internal/core.

Steps to reproduce

See above.

Supporting info to reproduce

No response

Relevant log output

Flutter analyze output

Flutter doctor output

Code of Conduct

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

[renefloor]

I just noticed we don't export StreamMessageSendingStatus yet, which we'll do (or maybe with a rename), but with that you can easily create a very similar footer like this:

return StreamChat(
  client: client,
  componentBuilders: StreamComponentBuilders(
    extensions: streamChatComponentBuilders(
      messageFooter: (context, props) => CustomMessageFooter(props: props),
    ),
  ),
);

class CustomMessageFooter extends StatelessWidget {
  const CustomMessageFooter({super.key, required this.props});
  final StreamMessageFooterProps props;

  @override
  Widget build(BuildContext context) {
    final message = props.message;
    final currentUser = StreamChat.of(context).currentUser;
    final channelKind = StreamMessageLayout.channelKindOf(context);

    Widget? usernameWidget;
    if (message.user case final user? when channelKind == .group && user.id != currentUser?.id) {
      usernameWidget = Text(user.name, maxLines: 1, overflow: .ellipsis);
    }

    Widget? statusWidget;
    if (message.user case final user? when user.id == currentUser?.id) {
      statusWidget = StreamMessageSendingStatus(message: message);
    }

    final Widget timestampWidget;
    if (message.createdAt case final createdAt) {
      timestampWidget = StreamTimestamp(
        date: createdAt.toLocal(),
        formatter: (context, date) => Jiffy.parseFromDateTime(date).jm,
      );
    }

    Widget? editedWidget;
    if (message.messageTextUpdatedAt != null) {
      editedWidget = Text(context.translations.editedMessageLabel);
    }

    return Row(
      spacing: 4,
      mainAxisSize: MainAxisSize.min,
      children: [
        ?usernameWidget,
        ?statusWidget,
        timestampWidget,
        ?editedWidget,
      ],
    );
  }
}

In the new redesign we're more focussed on the different slots where you can put any information you want, instead of the specific fields that we show by default. For example somebody might not want to show a username in the footer, but in the header and show completely different data in the footer or nothing at all. We still should provide all the building blocks you need, like shown in this example, so if you need any specific widgets your missing to do this please let us know.

[szechyjs]

While I agree with the new v10 approach that it should be slot based instead of specific field builders. All of the other default widgets used in slots are all exported which makes it pretty easy to customize. However all of the default widgets used in the footer slot are not exported, and mostly buried in core.

Unfortunately the solution above only gets you half way there as it then doesn't apply all the default stylings that get used in StreamMessageMetadata.

https://github.com/GetStream/stream-core-flutter/blob/main/packages/stream_core_flutter/lib/src/components/message/stream_message_metadata.dart

[szechyjs]

As you point out exporting StreamMessageSendingStatus would solve this problem. However, it still requires the use of core, which isn't ideal.

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_core_flutter/stream_core_flutter.dart' as core;

class MessageFooter extends StreamMessageFooter {
  MessageFooter({super.key, required super.message});

  @override
  Widget build(BuildContext context) {
    final message = props.message;
    final currentUser = StreamChat.of(context).currentUser;
    final channelKind = core.StreamMessageLayout.channelKindOf(context);

    Widget? usernameWidget;
    if (message.user case final user?
        when channelKind == StreamMessageChannelKind.group &&
            user.id != currentUser?.id) {
      usernameWidget =
          Text('something custom here', maxLines: 1, overflow: TextOverflow.ellipsis);
    }

    Widget? statusWidget;
    if (message.user case final user? when user.id == currentUser?.id) {
      statusWidget = StreamMessageSendingStatus(message: message);
    }

    final Widget timestampWidget;
    if (message.createdAt case final createdAt) {
      timestampWidget = StreamTimestamp(
        date: createdAt.toLocal(),
        formatter: (context, date) => Jiffy.parseFromDateTime(date).jm,
      );
    }

    Widget? editedWidget;
    if (message.messageTextUpdatedAt != null) {
      editedWidget = Text(context.translations.editedMessageLabel);
    }

    return core.StreamMessageMetadata(
      username: usernameWidget,
      status: statusWidget,
      timestamp: timestampWidget,
      edited: editedWidget,
    );
  }
}