Skip to content

Commit

Permalink
fix: 🐛 Fixed ToolTip Slide Transition
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
faiyaz-shaikh authored and aditya-css committed Apr 18, 2024
1 parent fdb6e06 commit 9cc8ebe
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 31 deletions.
3 changes: 1 addition & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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`.
Expand Down
42 changes: 23 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:

Expand Down Expand Up @@ -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

Expand Down
9 changes: 9 additions & 0 deletions lib/src/showcase.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -292,6 +298,7 @@ class Showcase extends StatefulWidget {
this.descriptionTextDirection,
this.onBarrierClick,
this.disableBarrierInteraction = false,
this.toolTipSlideEndDistance = 7,
}) : height = null,
width = null,
container = null,
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -621,6 +629,7 @@ class _ShowcaseState extends State<Showcase> {
descriptionPadding: widget.descriptionPadding,
titleTextDirection: widget.titleTextDirection,
descriptionTextDirection: widget.descriptionTextDirection,
toolTipSlideEndDistance: widget.toolTipSlideEndDistance,
),
],
],
Expand Down
28 changes: 18 additions & 10 deletions lib/src/tooltip_widget.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -63,6 +64,7 @@ class ToolTipWidget extends StatefulWidget {
final EdgeInsets? descriptionPadding;
final TextDirection? titleTextDirection;
final TextDirection? descriptionTextDirection;
final double toolTipSlideEndDistance;

const ToolTipWidget({
Key? key,
Expand Down Expand Up @@ -96,6 +98,7 @@ class ToolTipWidget extends StatefulWidget {
this.descriptionPadding,
this.titleTextDirection,
this.descriptionTextDirection,
this.toolTipSlideEndDistance = 7,
}) : super(key: key);

@override
Expand Down Expand Up @@ -349,7 +352,7 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
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;
Expand Down Expand Up @@ -377,10 +380,13 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
),
child: FractionalTranslation(
translation: Offset(0.0, contentFractionalOffset as double),
child: SlideTransition(
child: ToolTipSlideTransition(
position: Tween<Offset>(
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,
Expand Down Expand Up @@ -492,15 +498,16 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
children: <Widget>[
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<Offset>(
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,
Expand All @@ -509,6 +516,7 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
child: Container(
padding: EdgeInsets.only(
top: paddingTop,
bottom: paddingBottom,
),
color: Colors.transparent,
child: Center(
Expand Down
46 changes: 46 additions & 0 deletions lib/src/widget/tooltip_slide_transition.dart
Original file line number Diff line number Diff line change
@@ -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<Offset>;
return Transform.translate(
offset: progress.value,
child: child,
);
}
}

0 comments on commit 9cc8ebe

Please sign in to comment.