From bfe350ff748355bdf7b6316b5b9ac8957ce19752 Mon Sep 17 00:00:00 2001 From: Vatsal Tanna Date: Mon, 24 Jun 2024 18:50:43 +0530 Subject: [PATCH] refactor: :hammer: Update suggestion list collapse animation --- lib/src/widgets/chat_groupedlist_widget.dart | 10 +- .../widgets/suggestions/suggestion_list.dart | 91 +++++++++++-------- 2 files changed, 55 insertions(+), 46 deletions(-) diff --git a/lib/src/widgets/chat_groupedlist_widget.dart b/lib/src/widgets/chat_groupedlist_widget.dart index bcbdd7e6..37bd45fd 100644 --- 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 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 index 728368ac..aeedeaf1 100644 --- a/lib/src/widgets/suggestions/suggestion_list.dart +++ b/lib/src/widgets/suggestions/suggestion_list.dart @@ -1,3 +1,5 @@ +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'; @@ -5,14 +7,7 @@ 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 suggestions; - final double? gap; + const SuggestionList({super.key}); @override State createState() => _SuggestionListState(); @@ -22,6 +17,9 @@ class _SuggestionListState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; + List suggestions = []; + bool isSuggestionMenuOpen = false; + @override void initState() { super.initState(); @@ -30,12 +28,22 @@ class _SuggestionListState extends State 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 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 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 void deactivate() { final newSuggestions = provide?.chatController.newSuggestions; newSuggestions?.removeListener(animateSuggestionList); + _controller.removeListener(updateSuggestionsOnAnimation); super.deactivate(); }