From ca27e7fbeff056cf1ea7639ea128e10fdffb2be5 Mon Sep 17 00:00:00 2001 From: faiyaz Date: Thu, 6 Apr 2023 12:07:47 +0530 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fixed=20ToolTip=20Slide?= =?UTF-8?q?=20Transition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added `toolTipSlideEndDistance` to define motion range for tooltip slide animation. - Added `ToolTipSlideTransition` widget and removed `SlideTransition` to fix sliding range issue because before sliding range is increasing as child's size increase --- CHANGELOG.md | 3 +- README.md | 45 ++++++++++--------- lib/src/showcase.dart | 9 ++++ lib/src/tooltip_widget.dart | 28 +++++++----- lib/src/widget/tooltip_slide_transition.dart | 46 ++++++++++++++++++++ 5 files changed, 99 insertions(+), 32 deletions(-) create mode 100644 lib/src/widget/tooltip_slide_transition.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index e0c7fa1f..1f9139bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -## [2.0.4] (Un-Released) +## [2.0.4] - Improvement [#413](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/413) - Improved `Showcase` class - Fixed [#369](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/369) - Fixed ToolTip Slide Transition - Fixed [#388](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/388) - Can't scroll horizontal list with showcase @@ -8,7 +8,6 @@ - Improvement [#370](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/370) - Improved `GetPosition` class. - Feature [#387](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/387) - Provided barrier click disable functionality for a particular showcase. - Fixed [#383](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/383) - Targeted widget focusing issue when we applying size constraint on root widget(MaterialApp). -- Improved internal `findRenderObject` calls. ## [2.0.3] - Feature [#148](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/148) - Add feasibility to add `textDirection` of `title` and `description`. diff --git a/README.md b/README.md index 39bdcb69..baae36c7 100644 --- a/README.md +++ b/README.md @@ -124,21 +124,22 @@ WidgetsBinding.instance.addPostFrameCallback((_) => ## Properties of `ShowCaseWidget`: -| Name | Type | Default Behaviour | Description | -|---------------------------|-----------------------------|------------------------------|--------------------------------------------------------------------------------| -| blurValue | double | 0 | Provides blur effect on overlay | -| autoPlay | bool | false | Automatically display Next showcase | -| autoPlayDelay | Duration | Duration(milliseconds: 2000) | Visibility time of showcase when `autoplay` is enabled | -| enableAutoPlayLock | bool | false | Block the user interaction on overlay when autoPlay is enabled. | -| enableAutoScroll | bool | false | Allows to auto scroll to next showcase so as to make the given target visible. | -| scrollDuration | Duration | Duration(milliseconds: 300) | Time duration for auto scrolling | -| disableBarrierInteraction | bool | false | Disable barrier interaction | -| disableScaleAnimation | bool | false | Disable scale transition for all showcases | -| disableMovingAnimation | bool | false | Disable bouncing/moving transition for all showcases | -| onStart | Function(int?, GlobalKey)? | | Triggered on start of each showcase. | -| onComplete | Function(int?, GlobalKey)? | | Triggered on completion of each showcase. | -| onFinish | VoidCallback? | | Triggered when all the showcases are completed | -| enableShowcase | bool | true | Enable or disable showcase globally. | +| Name | Type | Default Behaviour | Description | +|---------------------------|----------------------------|------------------------------|--------------------------------------------------------------------------------| +| builder | Builder | | | +| blurValue | double | 0 | Provides blur effect on overlay | +| autoPlay | bool | false | Automatically display Next showcase | +| autoPlayDelay | Duration | Duration(milliseconds: 2000) | Visibility time of showcase when `autoplay` is enabled | +| enableAutoPlayLock | bool | false | Block the user interaction on overlay when autoPlay is enabled. | +| enableAutoScroll | bool | false | Allows to auto scroll to next showcase so as to make the given target visible. | +| scrollDuration | Duration | Duration(milliseconds: 300) | Time duration for auto scrolling | +| disableBarrierInteraction | bool | false | Disable barrier interaction | +| disableScaleAnimation | bool | false | Disable scale transition for all showcases | +| disableMovingAnimation | bool | false | Disable bouncing/moving transition for all showcases | +| onStart | Function(int?, GlobalKey)? | | Triggered on start of each showcase. | +| onComplete | Function(int?, GlobalKey)? | | Triggered on completion of each showcase. | +| onFinish | VoidCallback? | | Triggered when all the showcases are completed | +| enableShowcase | bool | true | Enable or disable showcase globally. | ## Properties of `Showcase` and `Showcase.withWidget`: @@ -181,10 +182,13 @@ WidgetsBinding.instance.addPostFrameCallback((_) => | onTargetLongPress | VoidCallback? | | Triggers when target widget is being long pressed | ✅ | ✅ | | onBarrierClick | VoidCallback? | | Triggers when barrier is clicked | ✅ | ✅ | | tooltipPosition | TooltipPosition? | | Defines vertical position of tooltip respective to Target widget | ✅ | ✅ | -| titlePadding | EdgeInsets? | EdgeInsets.zero | Padding to title | ✅ | | -| descriptionPadding | EdgeInsets? | EdgeInsets.zero | Padding to description | ✅ | | -| titleTextDirection | TextDirection? | | Give textDirection to title | ✅ | | -| descriptionTextDirection | TextDirection? | | Give textDirection to description | ✅ | | +| titlePadding | EdgeInsets? | EdgeInsets.zero | Padding to title | ✅ | | +| descriptionPadding | EdgeInsets? | EdgeInsets.zero | Padding to description | ✅ | | +| titleTextDirection | TextDirection? | | Give textDirection to title | ✅ | | +| descriptionTextDirection | TextDirection? | | Give textDirection to description | ✅ | | +| descriptionTextDirection | TextDirection? | | Give textDirection to description | ✅ | | +| disableBarrierInteraction | bool | false | Disables barrier interaction for a particular showCase | ✅ | ✅ | +| toolTipSlideEndDistance | double | 7 | Defines motion range for tooltip slide animation | ✅ | ✅ | ## How to use @@ -234,10 +238,11 @@ ShowCaseWidget(
Sanket Kachhela
Parth Baraiya
Shweta Chauhan -
Mehul Kabaria
Dhaval Kansara
Happy Makadiya
Ujas Majithiya +
Aditya Chavda +
Sahil Totala diff --git a/lib/src/showcase.dart b/lib/src/showcase.dart index 0926098b..ee53916a 100644 --- a/lib/src/showcase.dart +++ b/lib/src/showcase.dart @@ -247,6 +247,12 @@ class Showcase extends StatefulWidget { /// Disables barrier interaction for a particular showCase. final bool disableBarrierInteraction; + /// Defines motion range for tooltip slide animation. + /// Which is from 0 to [toolTipSlideEndDistance]. + /// + /// Defaults to 7. + final double toolTipSlideEndDistance; + const Showcase({ required this.key, required this.description, @@ -292,6 +298,7 @@ class Showcase extends StatefulWidget { this.descriptionTextDirection, this.onBarrierClick, this.disableBarrierInteraction = false, + this.toolTipSlideEndDistance = 7, }) : height = null, width = null, container = null, @@ -332,6 +339,7 @@ class Showcase extends StatefulWidget { this.tooltipPosition, this.onBarrierClick, this.disableBarrierInteraction = false, + this.toolTipSlideEndDistance = 7, }) : showArrow = false, onToolTipClick = null, scaleAnimationDuration = const Duration(milliseconds: 300), @@ -621,6 +629,7 @@ class _ShowcaseState extends State { descriptionPadding: widget.descriptionPadding, titleTextDirection: widget.titleTextDirection, descriptionTextDirection: widget.descriptionTextDirection, + toolTipSlideEndDistance: widget.toolTipSlideEndDistance, ), ], ], diff --git a/lib/src/tooltip_widget.dart b/lib/src/tooltip_widget.dart index 841053d8..eccb7daf 100644 --- a/lib/src/tooltip_widget.dart +++ b/lib/src/tooltip_widget.dart @@ -29,6 +29,7 @@ import 'enum.dart'; import 'extension.dart'; import 'get_position.dart'; import 'measure_size.dart'; +import 'widget/tooltip_slide_transition.dart'; const _kDefaultPaddingFromParent = 14.0; @@ -63,6 +64,7 @@ class ToolTipWidget extends StatefulWidget { final EdgeInsets? descriptionPadding; final TextDirection? titleTextDirection; final TextDirection? descriptionTextDirection; + final double toolTipSlideEndDistance; const ToolTipWidget({ Key? key, @@ -96,6 +98,7 @@ class ToolTipWidget extends StatefulWidget { this.descriptionPadding, this.titleTextDirection, this.descriptionTextDirection, + this.toolTipSlideEndDistance = 7, }) : super(key: key); @override @@ -349,7 +352,7 @@ class _ToolTipWidgetState extends State contentOffsetMultiplier.clamp(-1.0, 0.0); var paddingTop = isArrowUp ? 22.0 : 0.0; - var paddingBottom = isArrowUp ? 0.0 : 27.0; + var paddingBottom = isArrowUp ? 0.0 : 22.0; if (!widget.showArrow) { paddingTop = 10; @@ -377,10 +380,13 @@ class _ToolTipWidgetState extends State ), child: FractionalTranslation( translation: Offset(0.0, contentFractionalOffset as double), - child: SlideTransition( + child: ToolTipSlideTransition( position: Tween( - begin: Offset(0.0, contentFractionalOffset / 10), - end: const Offset(0.0, 0.100), + begin: Offset.zero, + end: Offset( + 0, + widget.toolTipSlideEndDistance * contentOffsetMultiplier, + ), ).animate(_movingAnimation), child: Material( type: MaterialType.transparency, @@ -492,15 +498,16 @@ class _ToolTipWidgetState extends State children: [ Positioned( left: _getSpace(), - top: contentY - 10, + top: contentY - (10 * contentOffsetMultiplier), child: FractionalTranslation( translation: Offset(0.0, contentFractionalOffset as double), - child: SlideTransition( + child: ToolTipSlideTransition( position: Tween( - begin: Offset(0.0, contentFractionalOffset / 10), - end: !widget.showArrow && !isArrowUp - ? const Offset(0.0, 0.0) - : const Offset(0.0, 0.100), + begin: Offset.zero, + end: Offset( + 0, + widget.toolTipSlideEndDistance * contentOffsetMultiplier, + ), ).animate(_movingAnimation), child: Material( color: Colors.transparent, @@ -509,6 +516,7 @@ class _ToolTipWidgetState extends State child: Container( padding: EdgeInsets.only( top: paddingTop, + bottom: paddingBottom, ), color: Colors.transparent, child: Center( diff --git a/lib/src/widget/tooltip_slide_transition.dart b/lib/src/widget/tooltip_slide_transition.dart new file mode 100644 index 00000000..07fc5634 --- /dev/null +++ b/lib/src/widget/tooltip_slide_transition.dart @@ -0,0 +1,46 @@ +/* + * Copyright (c) 2021 Simform Solutions + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be + * included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import 'package:flutter/widgets.dart'; + +class ToolTipSlideTransition extends AnimatedWidget { + /// [SlideTransition] could have been used instead of this widget, + /// but it internally uses [FractionalTranslation] which affects the + /// transformation based on the size of a child. This widget uses + /// [Transform.translate] which would fix translation independent of the + /// child's size. + const ToolTipSlideTransition({ + required Listenable position, + required this.child, + }) : super(listenable: position); + + final Widget child; + + @override + Widget build(BuildContext context) { + final progress = listenable as Animation; + return Transform.translate( + offset: progress.value, + child: child, + ); + } +}