Skip to content

Commit

Permalink
TW-334: Create ADR for sticky timestamp
Browse files Browse the repository at this point in the history
  • Loading branch information
nqhhdev authored and hoangdat committed Feb 15, 2024
1 parent 19784ba commit 656edf4
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 4 deletions.
45 changes: 45 additions & 0 deletions docs/adr/0016-sticky-timestamp-inside-chat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# 16. Sticky timestamp inside chat

Date: 2024-02-07

## Status

Accepted

## Context

We need to update timestamp stick to header of Chat screen

## Decision

- Using [inview_notifier_list](https://pub.dev/packages/inview_notifier_list) combine with `ScrollNotification`
- Building a `ViewPort` is `InViewNotifierList` and item `InViewNotifierWidget` to wrap each message
- Whenever a message scroll to `ViewPort` a callback will be called to update timestamp stick to header of Chat screen
- The condition to receive the callback is `isInViewPortCondition` to the InViewNotifierList widget.
This is the function that defines the area where the widgets overlap should be notified as currently in-view.

```dart
typedef bool IsInViewPortCondition(
double deltaTop,
double deltaBottom,
double viewPortDimension,
);
```

- In this case, we will use `deltaTop` and `deltaBottom` to check if the message is in the view port or not.
Because list is **reversed**, so we change `deltaTopReversed` and `deltaBottomReversed`.

```dart
bool isInViewPortCondition(deltaTopReversed, deltaBottomReversed, viewPortDimension) {
final stickyTimestampHeight = stickyTimestampKey.globalPaintBoundsRect?.height ?? 0;
return deltaTopReversed < viewPortDimension - stickyTimestampHeight &&
deltaBottomReversed > viewPortDimension - stickyTimestampHeight;
}
```

- When the message is in the viewport and new timestamp is different from the previous one,
we will update the timestamp sticky to header of Chat screen.

## Consequences

- The timestamp will be updated when the message is in the viewport and new timestamp is different from the previous one.
8 changes: 4 additions & 4 deletions lib/pages/chat/chat.dart
Original file line number Diff line number Diff line change
Expand Up @@ -1583,14 +1583,14 @@ class ChatController extends State<Chat>
}

bool isInViewPortCondition(
double deltaTop,
double deltaBottom,
double deltaTopReversed,
double deltaBottomReversed,
double viewPortDimension,
) {
final stickyTimestampHeight =
stickyTimestampKey.globalPaintBoundsRect?.height ?? 0;
return deltaTop < viewPortDimension - stickyTimestampHeight &&
deltaBottom > viewPortDimension - stickyTimestampHeight;
return deltaTopReversed < viewPortDimension - stickyTimestampHeight &&
deltaBottomReversed > viewPortDimension - stickyTimestampHeight;
}

void _handleHideStickyTimestamp() {
Expand Down

0 comments on commit 656edf4

Please sign in to comment.