Customizing Widgets

StreamMessageListView(
  messageBuilder: (context, message, defaultProps) {
    // defaultProps is the fully-populated StreamMessageItemProps for this message.
    // copyWith overrides only the fields you care about; everything else stays as-is.
    return StreamMessageItem.fromProps(
      // fromProps rebuilds the default widget using the modified props.
      props: defaultProps.copyWith(
        swipeToReply: true,
        maxWidth: 300,
      ),
    );
  },
)

StreamComponentFactory(
  builders: StreamComponentBuilders(
    // Core component — replace every StreamButton in the subtree.
    button: (context, props) {
      return FilledButton(
        onPressed: props.onPressed,
        style: FilledButton.styleFrom(
          backgroundColor: props.style == StreamButtonStyle.destructive
              ? Colors.red
              : Theme.of(context).colorScheme.primary,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            if (props.iconLeft != null) ...[
              Icon(props.iconLeft, size: 18),
              const SizedBox(width: 6),
            ],
            if (props.child != null) props.child!,
          ],
        ),
      );
    },
    // Chat-specific components — passed via the extensions list.
    extensions: streamChatComponentBuilders(
      channelListItem: (context, props) => MyCustomChannelListItem(props: props),
      messageItem: (context, props) => MyCustomMessageWidget(props: props),
    ),
  ),
  child: MyApp(),
)

extensions: [
  ...streamChatComponentBuilders(
    channelListItem: (context, props) => MyChannelListItem(props: props),
  ),
  ...myOtherBuilders(),
]

// Core component (direct named parameter on StreamComponentBuilders)
StreamComponentBuilders(
  button: (BuildContext context, StreamButtonProps props) {
    return FilledButton(onPressed: props.onPressed, child: props.child);
  },
)

// Chat-specific component (via the extensions list)
StreamComponentBuilders(
  extensions: streamChatComponentBuilders(
    messageItem: (BuildContext context, StreamMessageItemProps props) {
      // Use props.copyWith() to adjust defaults, or return a completely custom widget.
      return DefaultStreamMessageItem(
        props: props.copyWith(
          actionsBuilder: (context, defaultActions) => [
            ...defaultActions,
            StreamContextMenuAction(
              leading: const Icon(Icons.star),
              label: const Text('Favourite'),
              onTap: () => _favourite(props.message),
            ),
          ],
        ),
      );
    },
  ),
)

StreamComponentFactory(
  builders: StreamComponentBuilders(
    extensions: streamChatComponentBuilders(
      channelListItem: (context, props) {
        return StreamChannelListTile(
          avatar: StreamChannelAvatar(channel: props.channel),
          title: Text(props.channel.name ?? ''),
          subtitle: Text(props.channel.lastMessageAt?.toString() ?? ''),
          onTap: props.onTap,
          onLongPress: props.onLongPress,
          selected: props.selected,
        );
      },
    ),
  ),
  child: MyApp(),
)

StreamComponentFactory(
  builders: StreamComponentBuilders(
    extensions: streamChatComponentBuilders(
      messageItem: (context, props) {
        return DefaultStreamMessageItem(
          props: props.copyWith(
            actionsBuilder: (context, defaultActions) => [
              ...defaultActions,
              StreamContextMenuAction(
                leading: const Icon(Icons.star),
                label: const Text('Favourite'),
                onTap: () => _favourite(props.message),
              ),
            ],
          ),
        );
      },
    ),
  ),
  child: MyApp(),
)

StreamComponentFactory(
  builders: StreamComponentBuilders(
    extensions: streamChatComponentBuilders(
      // Remove send button from inside the input field
      messageComposerInputTrailing: (context, props) => const SizedBox.shrink(),
      // Render send button outside (to the right of the whole composer bar)
      messageComposerTrailing: (context, props) =>
          DefaultStreamMessageComposerInputTrailing(props: props),
      // Add an emoji button inside the input on the left
      messageComposerInputLeading: (context, props) => StreamButton.icon(
        icon: Icon(context.streamIcons.emoji),
        type: StreamButtonType.ghost,
        style: StreamButtonStyle.secondary,
        size: StreamButtonSize.small,
        onPressed: () { /* open emoji picker */ },
      ),
    ),
  ),
  child: StreamMessageComposer(),
)

StreamChannelListView(
  controller: _controller,
  itemBuilder: (context, channels, index, defaultTile) {
    final channel = channels[index];
    return ListTile(
      title: Text(channel.name ?? ''),
      onTap: () => openChannel(channel),
    );
  },
)

StreamMessageListView(
  messageBuilder: (context, message, defaultProps) {
    return StreamMessageItem.fromProps(
      props: defaultProps.copyWith(
        actionsBuilder: (context, defaultActions) => [
          ...defaultActions,
          StreamContextMenuAction(
            leading: const Icon(Icons.star),
            label: const Text('Favourite'),
            onTap: () => _favourite(message),
          ),
        ],
      ),
    );
  },
)