msglist: Vertical message-unread marker should be "start"-positioned, not "left"

[chrisbobbe]

#77 (comment) :

If in the future we find areas where our layout doesn't behave properly in RTL, we can open specific issues for those.

/// Widget responsible for showing the read status of a message.
class _UnreadMarker extends StatelessWidget {
  const _UnreadMarker({required this.isRead, required this.child});

  final bool isRead;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    final messageListTheme = MessageListTheme.of(context);
    return Stack(
      children: [
        child,
        Positioned(
          top: 0,
          left: 0,
          bottom: 0,
          width: 4,
          child: AnimatedOpacity(
            opacity: isRead ? 0 : 1,
            // Web uses 2s and 0.3s durations, and a CSS ease-out curve.
            // See zulip:web/styles/message_row.css .
            duration: Duration(milliseconds: isRead ? 2000 : 300),
            curve: Curves.easeOut,
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: messageListTheme.unreadMarker,
                border: Border(left: BorderSide(
                  width: 1,
                  color: messageListTheme.unreadMarkerGap)))))),
      ]);
  }
}

[yash-agarwa-l]

Hi! I’d like to work on this issue.

I’ve located the _UnreadMarker widget in the Flutter app and identified that the unread marker is hard-coded using left: and Border(left:). My plan is to replace these with PositionedDirectional(start:) and BorderDirectional(start:) so the marker appears on the start side in both LTR and RTL layouts.

Before I proceed with a PR, please let me know if this approach matches the expected fix.

Thanks!

[chrisbobbe]

Yes, that sounds correct. I'll assign the issue to you.