Lightbox: Added user's avatar in the lightbox app bar

This change updates the lightbox to display the message author's avatar alongside their name and the date in the app bar. The avatar is positioned in the "start" direction (left for LTR layouts, right for RTL layouts) to align with the behavior in the React Native app. Fixes: #41
zulip · Dec 11, 2024 · 15e1ea8 · 15e1ea8
1 parent 347e19e
commit 15e1ea8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/lib/widgets/lightbox.dart b/lib/widgets/lightbox.dart
@@ -172,21 +172,27 @@ class _LightboxPageLayoutState extends State<_LightboxPageLayout> {
         shape: const Border(), // Remove bottom border from [AppBarTheme]
         elevation: appBarElevation,
 
-        // TODO(#41): Show message author's avatar
-        title: RichText(
-          text: TextSpan(children: [
-            TextSpan(
-              text: '${widget.message.senderFullName}\n',
-
-              // Restate default
-              style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor)),
-            TextSpan(
-              text: timestampText,
-
-              // Make smaller, like a subtitle
-              style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
-          ])),
-        bottom: widget.buildAppBarBottom(context));
+        title: Row(
+          children: [
+            Avatar(size: 40, borderRadius: 32 / 8, userId: widget.message.senderId),
+            const SizedBox(width: 8),
+            Expanded(
+              child: RichText(
+                text: TextSpan(children: [
+                  TextSpan(
+                      text: '${widget.message.senderFullName}\n',
+                      // Restate default
+                      style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor)),
+                  TextSpan(
+                      text: timestampText,
+                      // Make smaller, like a subtitle
+                      style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
+                ])),
+            ),
+          ],
+        ),
+        bottom: widget.buildAppBarBottom(context)
+      );
     }
 
     Widget? bottomAppBar;

diff --git a/test/widgets/lightbox_test.dart b/test/widgets/lightbox_test.dart
@@ -236,14 +236,19 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
 
-    testWidgets('app bar shows sender name and date', (tester) async {
+    testWidgets('app bar shows sender avatar, name and date', (tester) async {
       prepareBoringImageHttpClient();
       final timestamp = DateTime.parse("2024-07-23 23:12:24").millisecondsSinceEpoch ~/ 1000;
       final message = eg.streamMessage(sender: eg.otherUser, timestamp: timestamp);
       await setupPage(tester, message: message, thumbnailUrl: null);
 
-      // We're looking for a RichText, in the app bar, with both the
-      // sender's name and the timestamp.
+      // Check Avatar properties
+      final avatar = tester.widget<Avatar>(find.byType(Avatar));
+      check(avatar.size).equals(40);
+      check(avatar.borderRadius).equals(32 / 8);
+      check(avatar.userId).equals(message.senderId);
+
+      // Check sender name and timestamp
       final labelTextWidget = tester.widget<RichText>(
         find.descendant(of: find.byType(AppBar).last,
           matching: find.textContaining(findRichText: true,