feat(ui, samples): two-pane channel list and channel on wide windows and foldables

packages/stream_chat_flutter/CHANGELOG.md

@@ -5,6 +5,8 @@
 - Polls are now shown translated into the current user's language, following `StreamMessageTranslationConfiguration` like the message text.
 - Added `PollTranslationX`, `PollOptionTranslationX` and `PollVoteTranslationX`, to read the translations of a poll, its options and its answers.
 - Added `MessageTranslationLanguage`, the language `StreamMessageContent` shows a message translated into, for custom attachments to show translations too.
+- Added `automaticallyImplyLeading` to `StreamChannelPage` and `StreamThreadPage`, which hides the header's back button when `false`.
+- Added a `selected` parameter to `StreamThreadListTile`, which highlights the tile, and `StreamThreadListTile.copyWith`.
 - `StreamMessageListView` now shows who is typing at the newest end of the list with `StreamMessageListTypingIndicator`, replacing the indicator above `StreamChannelPage`'s composer. Replace it with `StreamMessageListViewBuilders.typingIndicator`, or hide it with `StreamMessageListViewConfiguration.showTypingIndicator`.
 - Added `StreamTypingUsersBuilder`, to build a widget from the users typing in a channel or thread.
 
@@ -38,6 +40,8 @@
 - Fixed the attachment picker overflowing short screens, such as a phone in landscape.
 - Fixed `StreamMessageListView`'s default loading, empty and error states overflowing when the list has little room, such as in landscape with the attachment picker open.
 - Fixed the composer's autocomplete suggestions stopping short of the screen edge under a side safe-area inset.
+- Fixed `StreamThreadListTile` overflowing when narrow; its timestamp now truncates instead.
+- Fixed `StreamMessageItem`'s actions modal throwing when the message leaves the screen while the modal is open.
 
 ## 10.5.0
 

packages/stream_chat_flutter/lib/src/message_widget/stream_message_item.dart

@@ -836,7 +836,7 @@ class DefaultStreamMessageItem extends StatelessWidget {
       initialReactionType: initialReaction?.type,
     );
 
-    if (action is! MessageAction) return;
+    if (action is! MessageAction || !context.mounted) return;
     return _onActionTap(context, channel, action).ignore();
   }
 
@@ -903,7 +903,7 @@ class DefaultStreamMessageItem extends StatelessWidget {
       ),
     );
 
-    if (action is! MessageAction) return;
+    if (action is! MessageAction || !context.mounted) return;
     return _onActionTap(context, channel, action).ignore();
   }
 
@@ -935,6 +935,8 @@ class DefaultStreamMessageItem extends StatelessWidget {
       currentUser: currentUser,
     );
 
+    // Read up front: the modal can outlive this message, and with it `context`.
+    final configuration = StreamChatConfiguration.of(context);
     final layout = StreamMessageLayout.of(context);
     final theme = core.StreamMessageItemTheme.of(context);
     final defaults = _StreamMessageItemDefaults(
@@ -965,7 +967,7 @@ class DefaultStreamMessageItem extends StatelessWidget {
       context: context,
       useRootNavigator: false,
       builder: (_) => StreamChatConfiguration(
-        data: StreamChatConfiguration.of(context),
+        data: configuration,
         child: StreamMessageLayout(
           // The message is re-rendered on top of the modal scrim, so its
           // metadata and annotations switch to their on-scrim colors.
@@ -984,7 +986,7 @@ class DefaultStreamMessageItem extends StatelessWidget {
       ),
     );
 
-    if (action is! MessageAction) return;
+    if (action is! MessageAction || !context.mounted) return;
     return _onActionTap(context, channel, action).ignore();
   }
 

packages/stream_chat_flutter/lib/src/pages/channel_page.dart

@@ -60,6 +60,7 @@ class StreamChannelPage extends StatefulWidget {
     super.key,
     this.initialScrollIndex,
     this.initialAlignment,
+    this.automaticallyImplyLeading = true,
     this.onBackPressed,
     this.onChannelAvatarPressed,
   });
@@ -70,6 +71,11 @@ class StreamChannelPage extends StatefulWidget {
   /// Initial scroll alignment for the message list.
   final double? initialAlignment;
 
+  /// Whether the header shows a back button.
+  ///
+  /// When `false`, [onBackPressed] is never called. Defaults to `true`.
+  final bool automaticallyImplyLeading;
+
   /// Called when the header's back button is pressed.
   ///
   /// Replaces the default action, which pops the current route. When null the
@@ -113,6 +119,7 @@ class _StreamChannelPageState extends State<StreamChannelPage> {
   @override
   Widget build(BuildContext context) {
     final appBar = StreamChannelHeader(
+      automaticallyImplyLeading: widget.automaticallyImplyLeading,
       // Leaving this null keeps the header's default back button, which pops
       // the route.
       onBackPressed: widget.onBackPressed,

packages/stream_chat_flutter/lib/src/pages/thread_page.dart

@@ -31,6 +31,7 @@ class StreamThreadPage extends StatefulWidget {
     this.initialScrollIndex,
     this.initialAlignment,
     this.onViewInChannelTap,
+    this.automaticallyImplyLeading = true,
     this.onBackPressed,
   });
 
@@ -46,6 +47,11 @@ class StreamThreadPage extends StatefulWidget {
   /// Called when the user taps "View in channel".
   final void Function(Message message)? onViewInChannelTap;
 
+  /// Whether the header shows a back button.
+  ///
+  /// When `false`, [onBackPressed] is never called. Defaults to `true`.
+  final bool automaticallyImplyLeading;
+
   /// Called when the header's back button is pressed.
   ///
   /// Replaces the default action, which pops the current route. When null the
@@ -89,6 +95,7 @@ class _StreamThreadPageState extends State<StreamThreadPage> {
   Widget build(BuildContext context) {
     final appBar = StreamThreadHeader(
       parent: widget.parent,
+      automaticallyImplyLeading: widget.automaticallyImplyLeading,
       // Leaving this null keeps the header's default back button, which pops
       // the route.
       onBackPressed: widget.onBackPressed,

packages/stream_chat_flutter/lib/src/scroll_view/thread_scroll_view/stream_thread_list_tile.dart

@@ -18,11 +18,13 @@ class StreamThreadListTile extends StatelessWidget {
     User? currentUser,
     GestureTapCallback? onTap,
     GestureLongPressCallback? onLongPress,
+    bool selected = false,
   }) : props = StreamThreadListTileProps(
          thread: thread,
          currentUser: currentUser,
          onTap: onTap,
          onLongPress: onLongPress,
+         selected: selected,
        );
 
   /// Creates a thread list tile from pre-built [props].
@@ -34,6 +36,26 @@ class StreamThreadListTile extends StatelessWidget {
   /// The properties configuring this thread list tile.
   final StreamThreadListTileProps props;
 
+  /// Creates a copy of this tile but with the given fields replaced with
+  /// the new values.
+  StreamThreadListTile copyWith({
+    Key? key,
+    Thread? thread,
+    User? currentUser,
+    GestureTapCallback? onTap,
+    GestureLongPressCallback? onLongPress,
+    bool? selected,
+  }) {
+    return StreamThreadListTile(
+      key: key ?? this.key,
+      thread: thread ?? props.thread,
+      currentUser: currentUser ?? props.currentUser,
+      onTap: onTap ?? props.onTap,
+      onLongPress: onLongPress ?? props.onLongPress,
+      selected: selected ?? props.selected,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final builder = context.chatComponentBuilder<StreamThreadListTileProps>();
@@ -49,6 +71,7 @@ class StreamThreadListTileProps {
     this.currentUser,
     this.onTap,
     this.onLongPress,
+    this.selected = false,
   });
 
   /// The thread displayed by the tile.
@@ -62,6 +85,11 @@ class StreamThreadListTileProps {
 
   /// Called when the tile is long pressed.
   final GestureLongPressCallback? onLongPress;
+
+  /// Whether the tile is highlighted as the current selection.
+  ///
+  /// Defaults to `false`.
+  final bool selected;
 }
 
 class _DefaultStreamThreadListTile extends StatelessWidget {
@@ -74,6 +102,7 @@ class _DefaultStreamThreadListTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final spacing = context.streamSpacing;
+    final colorScheme = context.streamColorScheme;
 
     final theme = StreamThreadListTileTheme.of(context);
     final defaults = _StreamThreadListTileThemeDefaults(context);
@@ -110,11 +139,15 @@ class _DefaultStreamThreadListTile extends StatelessWidget {
       child: StreamListTileTheme(
         data: StreamListTileThemeData(
           contentPadding: effectivePadding,
-          backgroundColor: .all(effectiveBackgroundColor),
+          backgroundColor: .resolveWith((states) {
+            if (!states.contains(WidgetState.selected)) return effectiveBackgroundColor;
+            return .alphaBlend(colorScheme.backgroundSelected, effectiveBackgroundColor);
+          }),
         ),
         child: StreamListTileContainer(
           onTap: props.onTap,
           onLongPress: props.onLongPress,
+          selected: props.selected,
           child: Row(
             spacing: spacing.sm,
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -353,10 +386,12 @@ class ThreadFooter extends StatelessWidget {
           context.translations.threadReplyCountText(replyCount),
           style: replyCountStyle,
         ),
-        StreamTimestamp(
-          date: latestActivityAt.toLocal(),
-          style: timestampStyle,
-          formatter: timestampFormatter ?? formatRecentDateTime,
+        Flexible(
+          child: StreamTimestamp(
+            date: latestActivityAt.toLocal(),
+            style: timestampStyle,
+            formatter: timestampFormatter ?? formatRecentDateTime,
+          ),
         ),
       ],
     );

packages/stream_chat_flutter/test/src/channel/channel_page_test.dart

@@ -27,6 +27,18 @@ void main() {
     expect(pressedChannel, isNotNull);
   });
 
+  testWidgets('shows a back button by default', (tester) async {
+    await _pumpChannelPage(tester);
+
+    expect(find.byType(StreamBackButton), findsOneWidget);
+  });
+
+  testWidgets('hides the back button when automaticallyImplyLeading is false', (tester) async {
+    await _pumpChannelPage(tester, automaticallyImplyLeading: false);
+
+    expect(find.byType(StreamBackButton), findsNothing);
+  });
+
   testWidgets('tapping back invokes onBackPressed', (tester) async {
     var backPressed = 0;
     await _pumpChannelPage(tester, onBackPressed: () => backPressed++);
@@ -243,6 +255,7 @@ Future<void> _pumpChannelPage(
   StreamSurfaceStyle? composerSurfaceStyle,
   StreamSurfaceStyle? headerSurfaceStyle,
   void Function(BuildContext context, Channel channel)? onChannelAvatarPressed,
+  bool automaticallyImplyLeading = true,
   VoidCallback? onBackPressed,
   bool pushOntoARoute = false,
 }) async {
@@ -293,6 +306,7 @@ Future<void> _pumpChannelPage(
 
   final page = StreamChannelPage(
     onChannelAvatarPressed: onChannelAvatarPressed,
+    automaticallyImplyLeading: automaticallyImplyLeading,
     onBackPressed: onBackPressed,
   );
 

packages/stream_chat_flutter/test/src/channel/thread_page_test.dart

@@ -143,6 +143,18 @@ void main() {
     expect(_backButtonIsFloating(tester), isFalse);
   });
 
+  testWidgets('shows a back button by default', (tester) async {
+    await _pumpThreadPage(tester);
+
+    expect(find.byType(StreamBackButton), findsOneWidget);
+  });
+
+  testWidgets('hides the back button when automaticallyImplyLeading is false', (tester) async {
+    await _pumpThreadPage(tester, automaticallyImplyLeading: false);
+
+    expect(find.byType(StreamBackButton), findsNothing);
+  });
+
   testWidgets('tapping back invokes onBackPressed', (tester) async {
     var backPressed = 0;
     await _pumpThreadPage(tester, onBackPressed: () => backPressed++);
@@ -209,6 +221,7 @@ Future<void> _pumpThreadPage(
   StreamSurfaceStyle surfaceStyle = StreamSurfaceStyle.regular,
   StreamSurfaceStyle? headerSurfaceStyle,
   void Function(Message message)? onViewInChannelTap,
+  bool automaticallyImplyLeading = true,
   VoidCallback? onBackPressed,
   bool pushOntoARoute = false,
 }) async {
@@ -275,6 +288,7 @@ Future<void> _pumpThreadPage(
   final page = StreamThreadPage(
     parent: parentMessage,
     onViewInChannelTap: onViewInChannelTap,
+    automaticallyImplyLeading: automaticallyImplyLeading,
     onBackPressed: onBackPressed,
   );
 

packages/stream_chat_flutter/test/src/message_widget/stream_message_item_actions_modal_test.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+import '../mocks.dart';
+
+void main() {
+  testWidgets('keeps the actions modal working after its message leaves the tree', (tester) async {
+    final client = MockClient();
+    final channel = _mockChannel(client);
+
+    await tester.pumpWidget(_app(client: client, channel: channel, showMessage: true));
+    await tester.pumpAndSettle();
+    await _longPress(tester, find.byType(StreamMessageItem));
+
+    // Rebuilding the app rebuilds the navigator's routes, the open modal among them.
+    await tester.pumpWidget(_app(client: client, channel: channel, showMessage: false));
+
+    expect(tester.takeException(), isNull);
+    expect(find.byKey(const Key('MessageItem')), findsOneWidget);
+  });
+
+  testWidgets('StreamMessageItem drops a modal action picked after its message leaves the tree', (tester) async {
+    final client = MockClient();
+    final channel = _mockChannel(client);
+    final threadTaps = <Message>[];
+    void onThreadTap(Message parent, Message? _) => threadTaps.add(parent);
+
+    await tester.pumpWidget(_app(client: client, channel: channel, showMessage: true, onThreadTap: onThreadTap));
+    await tester.pumpAndSettle();
+    await _longPress(tester, find.byType(StreamMessageItem));
+
+    await tester.pumpWidget(_app(client: client, channel: channel, showMessage: false, onThreadTap: onThreadTap));
+    await tester.tap(find.text('Thread Reply'));
+    await tester.pumpAndSettle();
+
+    expect(threadTaps, isEmpty);
+  });
+}
+
+MockChannel _mockChannel(MockClient client) {
+  final currentUser = OwnUser(id: 'current-user');
+  final clientState = MockClientState();
+  final channel = MockChannel(ownCapabilities: const [ChannelCapability.sendMessage, ChannelCapability.sendReply]);
+  final channelState = MockChannelState();
+
+  when(() => client.state).thenReturn(clientState);
+  when(() => clientState.currentUser).thenReturn(currentUser);
+  when(() => clientState.currentUserStream).thenAnswer((_) => Stream.value(currentUser));
+  when(() => channel.client).thenReturn(client);
+  when(() => channel.state).thenReturn(channelState);
+
+  return channel;
+}
+
+Widget _app({
+  required MockClient client,
+  required MockChannel channel,
+  required bool showMessage,
+  void Function(Message, Message?)? onThreadTap,
+}) {
+  final message = Message(
+    id: 'test-message',
+    text: 'Long press me',
+    createdAt: DateTime(2026),
+    user: User(id: 'other-user'),
+    state: MessageState.sent,
+  );
+
+  return MaterialApp(
+    builder: (context, child) => StreamChat(client: client, child: child),
+    home: StreamChannel(
+      channel: channel,
+      child: Scaffold(
+        body: showMessage ? StreamMessageItem(message: message, onThreadTap: onThreadTap) : const SizedBox.shrink(),
+      ),
+    ),
+  );
+}
+
+// Holds past kLongPressTimeout, which a plain tester.longPress does not
+// reliably cross.
+Future<void> _longPress(WidgetTester tester, Finder finder) async {
+  final gesture = await tester.startGesture(tester.getCenter(finder));
+  await tester.pump(const Duration(milliseconds: 700));
+  await gesture.up();
+  await tester.pumpAndSettle();
+}