refactor: 🔨 Update suggestion list collapse animation

SimformSolutionsPvtLtd · Jun 24, 2024 · bfe350f · bfe350f
1 parent 42d2fdf
commit bfe350f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 46 deletions.
diff --git a/lib/src/widgets/chat_groupedlist_widget.dart b/lib/src/widgets/chat_groupedlist_widget.dart
@@ -21,7 +21,6 @@
  */
 import 'package:chatview/chatview.dart';
 import 'package:chatview/src/extensions/extensions.dart';
-import 'package:chatview/src/widgets/chat_view_inherited_widget.dart';
 import 'package:chatview/src/widgets/suggestions/suggestion_list.dart';
 import 'package:chatview/src/widgets/type_indicator_widget.dart';
 import 'package:flutter/material.dart';
@@ -218,14 +217,7 @@ class _ChatGroupedListWidgetState extends State<ChatGroupedListWidget>
             Flexible(
               child: Align(
                 alignment: suggestionsListConfig.axisAlignment.alignment,
-                child: ValueListenableBuilder(
-                  valueListenable: chatController!.newSuggestions,
-                  builder: (context, value, child) {
-                    return SuggestionList(
-                      suggestions: value,
-                    );
-                  },
-                ),
+                child: const SuggestionList(),
               ),
             ),
 

diff --git a/lib/src/widgets/suggestions/suggestion_list.dart b/lib/src/widgets/suggestions/suggestion_list.dart
@@ -1,18 +1,13 @@
+import 'dart:math' as math;
+
 import 'package:chatview/src/extensions/extensions.dart';
 import 'package:chatview/src/models/models.dart';
 import 'package:chatview/src/utils/constants/constants.dart';
 import 'package:chatview/src/widgets/suggestions/suggestion_item.dart';
 import 'package:flutter/material.dart';
 
 class SuggestionList extends StatefulWidget {
-  const SuggestionList({
-    super.key,
-    required this.suggestions,
-    this.gap,
-  });
-
-  final List<SuggestionItemData> suggestions;
-  final double? gap;
+  const SuggestionList({super.key});
 
   @override
   State<SuggestionList> createState() => _SuggestionListState();
@@ -22,6 +17,9 @@ class _SuggestionListState extends State<SuggestionList>
     with SingleTickerProviderStateMixin {
   late AnimationController _controller;
 
+  List<SuggestionItemData> suggestions = [];
+  bool isSuggestionMenuOpen = false;
+
   @override
   void initState() {
     super.initState();
@@ -30,12 +28,22 @@ class _SuggestionListState extends State<SuggestionList>
       duration: suggestionListAnimationDuration,
       vsync: this,
     );
+    _controller.addListener(updateSuggestionsOnAnimation);
     WidgetsBinding.instance.addPostFrameCallback((_) {
       final newSuggestions = provide?.chatController.newSuggestions;
       newSuggestions?.addListener(animateSuggestionList);
     });
   }
 
+  void updateSuggestionsOnAnimation() {
+    if (isSuggestionMenuOpen && _controller.value == 0) {
+      suggestions = [];
+    } else if (provide?.chatController.newSuggestions.value.isNotEmpty ??
+        false) {
+      suggestions = provide?.chatController.newSuggestions.value ?? [];
+    }
+  }
+
   @override
   void activate() {
     super.activate();
@@ -46,6 +54,7 @@ class _SuggestionListState extends State<SuggestionList>
   void animateSuggestionList() {
     final newSuggestions = provide?.chatController.newSuggestions;
     if (newSuggestions != null) {
+      isSuggestionMenuOpen = newSuggestions.value.isEmpty;
       newSuggestions.value.isEmpty
           ? _controller.reverse()
           : _controller.forward();
@@ -62,35 +71,42 @@ class _SuggestionListState extends State<SuggestionList>
       padding:
           suggestionsListConfig.padding ?? const EdgeInsets.only(left: 8.0),
       margin: suggestionsListConfig.margin,
-      child: SizeTransition(
-        sizeFactor: _controller,
-        axisAlignment: -1.0,
-        fixedCrossAxisSizeFactor: 1,
-        child: SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.end,
-            children: List.generate(
-              widget.suggestions.length,
-              (index) {
-                final suggestion = widget.suggestions[index];
-                return suggestion.config?.customItemBuilder
-                        ?.call(index, suggestion) ??
-                    suggestionsItemConfig?.customItemBuilder
-                        ?.call(index, suggestion) ??
-                    Padding(
-                      padding: EdgeInsets.only(
-                        right: index == widget.suggestions.length
-                            ? 0
-                            : (suggestionsListConfig.itemSeparatorWidth),
-                      ),
-                      child: SuggestionItem(
-                        suggestionItemData: suggestion,
-                      ),
-                    );
-              },
-            ),
-          ),
+      child: ClipRect(
+        child: AnimatedBuilder(
+          animation: _controller,
+          builder: (context, child) {
+            return Align(
+              alignment: const AlignmentDirectional(-1.0, -1.0),
+              heightFactor: math.max(_controller.value, 0.0),
+              widthFactor: 1,
+              child: SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: List.generate(
+                    suggestions.length,
+                    (index) {
+                      final suggestion = suggestions[index];
+                      return suggestion.config?.customItemBuilder
+                              ?.call(index, suggestion) ??
+                          suggestionsItemConfig?.customItemBuilder
+                              ?.call(index, suggestion) ??
+                          Padding(
+                            padding: EdgeInsets.only(
+                              right: index == suggestions.length
+                                  ? 0
+                                  : suggestionsListConfig.itemSeparatorWidth,
+                            ),
+                            child: SuggestionItem(
+                              suggestionItemData: suggestion,
+                            ),
+                          );
+                    },
+                  ),
+                ),
+              ),
+            );
+          },
         ),
       ),
     );
@@ -100,6 +116,7 @@ class _SuggestionListState extends State<SuggestionList>
   void deactivate() {
     final newSuggestions = provide?.chatController.newSuggestions;
     newSuggestions?.removeListener(animateSuggestionList);
+    _controller.removeListener(updateSuggestionsOnAnimation);
     super.deactivate();
   }