fix: list rebuilding when keyboard opens/closes

Author: demchenkoalex

packages/flutter_chat_ui/lib/src/chat_animated_list/chat_animated_list.dart

@@ -10,11 +10,10 @@ import 'package:scrollview_observer/scrollview_observer.dart';
 
 import '../load_more.dart';
 import '../scroll_to_bottom.dart';
-import '../utils/composer_height_notifier.dart';
-import '../utils/keyboard_mixin.dart';
 import '../utils/load_more_notifier.dart';
 import '../utils/message_list_diff.dart';
 import '../utils/typedefs.dart';
+import 'sliver_spacing.dart';
 
 /// Enum controlling the initial scroll behavior of the chat list.
 enum InitialScrollToEndMode {
@@ -157,7 +156,7 @@ class ChatAnimatedList extends StatefulWidget {
 
 /// State for [ChatAnimatedList].
 class _ChatAnimatedListState extends State<ChatAnimatedList>
-    with TickerProviderStateMixin, WidgetsBindingObserver, KeyboardMixin {
+    with TickerProviderStateMixin {
   final GlobalKey<SliverAnimatedListState> _listKey = GlobalKey();
   late final ChatController _chatController;
   late final SliverObserverController _observerController;
@@ -245,7 +244,6 @@ class _ChatAnimatedListState extends State<ChatAnimatedList>
     }
   }
 
-  @override
   void onKeyboardHeightChanged(double height) {
     // Reversed lists handle keyboard automatically
     if (widget.reversed) {
@@ -320,8 +318,7 @@ class _ChatAnimatedListState extends State<ChatAnimatedList>
 
   @override
   Widget build(BuildContext context) {
-    final bottomSafeArea = MediaQuery.of(context).padding.bottom;
-    final builders = context.watch<Builders>();
+    final builders = context.read<Builders>();
 
     // Define the SliverAnimatedList once as it's used for both
     // reversed and non-reversed lists.
@@ -352,7 +349,7 @@ class _ChatAnimatedListState extends State<ChatAnimatedList>
         // Order for CustomScrollView(reverse: true) -> Visual Bottom to Top
         return <Widget>[
           // Visually at the bottom (first in sliver list for reverse: true)
-          _buildComposerHeightSliver(builders, bottomSafeArea),
+          _buildComposerHeightSliver(context),
           if (widget.bottomSliver != null) widget.bottomSliver!,
           sliverAnimatedList,
           if (widget.onEndReached != null) _buildLoadMoreSliver(builders),
@@ -371,7 +368,7 @@ class _ChatAnimatedListState extends State<ChatAnimatedList>
           if (widget.onEndReached != null) _buildLoadMoreSliver(builders),
           sliverAnimatedList,
           if (widget.bottomSliver != null) widget.bottomSliver!,
-          _buildComposerHeightSliver(builders, bottomSafeArea),
+          _buildComposerHeightSliver(context),
           // Visually at the bottom
         ];
       }
@@ -440,20 +437,11 @@ class _ChatAnimatedListState extends State<ChatAnimatedList>
     );
   }
 
-  Widget _buildComposerHeightSliver(Builders builders, double bottomSafeArea) {
-    return Consumer<ComposerHeightNotifier>(
-      builder: (context, heightNotifier, child) {
-        return SliverPadding(
-          padding: EdgeInsets.only(
-            bottom:
-                heightNotifier.height +
-                (widget.bottomPadding ?? 0) +
-                (widget.handleSafeArea == true ? bottomSafeArea : 0),
-          ),
-        );
-      },
-    );
-  }
+  Widget _buildComposerHeightSliver(BuildContext context) => SliverSpacing(
+    bottomPadding: widget.bottomPadding,
+    handleSafeArea: widget.handleSafeArea,
+    onKeyboardHeightChanged: widget.reversed ? null : onKeyboardHeightChanged,
+  );
 
   Widget _buildLoadMoreSliver(Builders builders) {
     return SliverToBoxAdapter(

packages/flutter_chat_ui/lib/src/chat_animated_list/sliver_spacing.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../flutter_chat_ui.dart';
+import '../utils/keyboard_mixin.dart';
+
+/// A sliver widget that creates vertical spacing at the end of a chat list.
+///
+/// This widget is primarily used to account for the height of the composer,
+/// optional bottom padding, and the keyboard (when visible).
+/// It consumes [ComposerHeightNotifier] to dynamically adjust its spacing
+/// based on the composer's height and uses [KeyboardMixin] to react to
+/// keyboard visibility changes.
+class SliverSpacing extends StatefulWidget {
+  /// Optional padding to add below the composer area.
+  final double? bottomPadding;
+
+  /// Whether to automatically account for the bottom safe area (notch, home indicator).
+  /// Defaults to true if not specified, but behavior depends on how it's used in parent.
+  final bool? handleSafeArea;
+
+  /// Callback function invoked when the detected keyboard height changes.
+  ///
+  /// The reported `height` is the adjusted keyboard height, considering the
+  /// initial safe area.
+  final void Function(double height)? onKeyboardHeightChanged;
+
+  /// Creates a [SliverSpacing] widget.
+  const SliverSpacing({
+    super.key,
+    this.bottomPadding,
+    this.handleSafeArea,
+    this.onKeyboardHeightChanged,
+  });
+
+  @override
+  State<SliverSpacing> createState() => _SliverSpacingState();
+}
+
+class _SliverSpacingState extends State<SliverSpacing>
+    with WidgetsBindingObserver, KeyboardMixin {
+  @override
+  Widget build(BuildContext context) {
+    final safeArea = MediaQuery.of(context).padding.bottom;
+    return Consumer<ComposerHeightNotifier>(
+      builder: (context, heightNotifier, child) {
+        return SliverPadding(
+          padding: EdgeInsets.only(
+            bottom:
+                heightNotifier.height +
+                (widget.bottomPadding ?? 0) +
+                (widget.handleSafeArea == true ? safeArea : 0),
+          ),
+        );
+      },
+    );
+  }
+
+  @override
+  void onKeyboardHeightChanged(double height) {
+    widget.onKeyboardHeightChanged?.call(height);
+  }
+}