Merge branch 'develop' into v4

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -470,6 +470,7 @@ class MessageInputState extends State<MessageInput> {
     if (widget.editMessage == null) {
       child = Material(
         elevation: 8,
+        color: _messageInputTheme.inputBackgroundColor,
         child: child,
       );
     }
@@ -669,6 +670,7 @@ class MessageInputState extends State<MessageInput> {
           gradient: _focusNode.hasFocus
               ? _messageInputTheme.activeBorderGradient
               : _messageInputTheme.idleBorderGradient,
+          color: _messageInputTheme.inputBackgroundColor,
         ),
         child: Padding(
           padding: const EdgeInsets.all(1.5),

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -8,7 +8,6 @@ import 'package:stream_chat_flutter/scrollable_positioned_list/scrollable_positi
 import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/swipeable.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
-import 'package:visibility_detector/visibility_detector.dart';
 
 /// Widget builder for message
 /// [defaultMessageWidget] is the default [StreamMessageWidget] configuration
@@ -975,26 +974,7 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
     int index,
   ) {
     final messageWidget = buildMessage(message, messages, index);
-    return VisibilityDetector(
-      key: ValueKey('visibility: ${message.id}'),
-      onVisibilityChanged: (visibility) {
-        final isVisible = visibility.visibleBounds != Rect.zero;
-        if (isVisible) {
-          final channel = streamChannel.channel;
-          if (_upToDate &&
-              channel.config?.readEvents == true &&
-              channel.state!.unreadCount > 0) {
-            streamChannel.channel.markRead();
-          }
-        }
-        if (mounted) {
-          if (_showScrollToBottom.value == isVisible) {
-            _showScrollToBottom.value = !isVisible;
-          }
-        }
-      },
-      child: messageWidget,
-    );
+    return messageWidget;
   }
 
   Widget buildParentMessage(
@@ -1316,6 +1296,8 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
     _scrollController = widget.scrollController ?? ItemScrollController();
     _itemPositionListener =
         widget.itemPositionListener ?? ItemPositionsListener.create();
+    _itemPositionListener.itemPositions
+        .addListener(_handleItemPositionsChanged);
 
     _getOnThreadTap();
     super.initState();
@@ -1365,6 +1347,34 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
     super.didChangeDependencies();
   }
 
+  void _handleItemPositionsChanged() {
+    final _itemPositions = _itemPositionListener.itemPositions.value.toList();
+    final _firstItemIndex =
+        _itemPositions.indexWhere((element) => element.index == 1);
+    var _isFirstItemVisible = false;
+    if (_firstItemIndex != -1) {
+      final _firstItem = _itemPositions[_firstItemIndex];
+      _isFirstItemVisible =
+          _firstItem.itemLeadingEdge > 0 && _firstItem.itemTrailingEdge < 1;
+    }
+    if (_isFirstItemVisible) {
+      // most recent message is visible
+      final channel = streamChannel?.channel;
+      if (channel != null) {
+        if (_upToDate &&
+            channel.config?.readEvents == true &&
+            channel.state!.unreadCount > 0) {
+          streamChannel!.channel.markRead();
+        }
+      }
+    }
+    if (mounted) {
+      if (_showScrollToBottom.value == _isFirstItemVisible) {
+        _showScrollToBottom.value = !_isFirstItemVisible;
+      }
+    }
+  }
+
   void _getOnThreadTap() {
     if (widget.onThreadTap != null) {
       _onThreadTap = (Message message) {
@@ -1402,6 +1412,8 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
       streamChannel!.reloadChannel();
     }
     _messageNewListener?.cancel();
+    _itemPositionListener.itemPositions
+        .removeListener(_handleItemPositionsChanged);
     super.dispose();
   }
 }