Channel Page Builders

ChannelPage provides page-level builders and item-level builders. Use them when ChannelConfig is not enough for your layout.

Page-Level Builders

ChannelPage constructor fields:

• appBarBuilder: returns a PreferredSizeWidget.
• itemBuilder: replaces the whole channel row.
• emptyBuilder: replaces the empty state.
• headerBuilder: inserts a widget before channel rows.
• footerBuilder: inserts a widget after channel rows.

Other page-level callbacks can also change behavior:

• onItemTap
• onItemLongPress
• onAvatarTap
• onAvatarLongPress
• onSearchTap
• chatPageOpener
• channelActionsBuilder
• onChannelAction
• longPressMenuBuilder
• channelListDataProcessor

Builder Signatures

Dart

typedef ChannelAppBarBuilder = PreferredSizeWidget Function(
  BuildContext context,
  ChannelAppBarConfig config,
);

typedef ChannelItemBuilder = Widget Function(
  BuildContext context,
  BaseChannel channel,
  ChannelItemConfig config,
);

Item-level builders are configured through ChannelItemConfig:

Dart

typedef ChannelItemAvatarBuilder = Widget Function(
  BuildContext context,
  BaseChannel channel,
  ChannelDisplayProfile? displayProfile,
  ChannelItemConfig config,
);

typedef ChannelItemTitleBuilder = Widget Function(
  BuildContext context,
  BaseChannel channel,
  ChannelDisplayProfile? displayProfile,
  ChannelItemConfig config,
);

typedef ChannelItemLastMessageBuilder = Widget Function(
  BuildContext context,
  BaseChannel channel,
  ChannelItemConfig config,
);

typedef ChannelItemTimeBuilder = Widget Function(
  BuildContext context,
  BaseChannel channel,
  ChannelItemConfig config,
);

typedef ChannelItemUnreadBadgeBuilder = Widget Function(
  BuildContext context,
  BaseChannel channel,
  int unreadCount,
  ChannelItemConfig config,
);

Custom App Bar

Dart

ChannelPage(
  appBarBuilder: (context, config) {
    return AppBar(
      toolbarHeight: config.height,
      title: const Text('Messages'),
      centerTitle: true,
      actions: [
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {},
        ),
      ],
    );
  },
)

Replace the Whole Row

Dart

ChannelPage(
  itemBuilder: (context, channel, config) {
    return ListTile(
      leading: const CircleAvatar(child: Icon(Icons.chat_bubble_outline)),
      title: Text(channel.channelId ?? ''),
      subtitle: config.showLastMessage
          ? const Text('Custom preview')
          : null,
      onTap: () {
        openChannelChatPage(context, channel);
      },
    );
  },
)

Customize Built-In Row Parts

Dart

ChannelPage(
  config: ChannelConfig(
    itemConfig: ChannelItemConfig(
      avatarBuilder: (context, channel, profile, config) {
        return CircleAvatar(
          child: Text((profile?.displayName ?? '#').characters.first),
        );
      },
      titleBuilder: (context, channel, profile, config) {
        return Text(
          profile?.displayName ?? channel.channelId ?? '',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: config.titleStyle,
        );
      },
      unreadBadgeBuilder: (context, channel, unreadCount, config) {
        if (unreadCount <= 0) return const SizedBox.shrink();
        return Badge(label: Text('$unreadCount'));
      },
    ),
  ),
)

Custom Actions

Dart

ChannelPage(
  channelActionsBuilder: (channel) {
    return const [
      ChannelAction(
        type: ChannelActionType.pin,
        label: 'Pin',
        icon: Icons.push_pin,
      ),
      ChannelAction(
        type: ChannelActionType.delete,
        label: 'Delete',
        icon: Icons.delete_outline,
        destructive: true,
      ),
    ];
  },
  onChannelAction: (context, channel, action) async {
    // Route the action to your own confirmation or analytics flow.
  },
)

For style-only changes, prefer Channel page config.