Skip to content

Commit

Permalink
Lightbox: Added user's avatar in the lightbox app bar
Browse files Browse the repository at this point in the history
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
  • Loading branch information
shivanshsharma13 committed Dec 7, 2024
1 parent 347e19e commit 38a8e09
Showing 1 changed file with 21 additions and 15 deletions.
36 changes: 21 additions & 15 deletions lib/widgets/lightbox.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 38a8e09

Please sign in to comment.