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 @Sahil-Simform
faiyaz-shaikh authored and Sahil-Simform committed Mar 12, 2024
1 parent c36c85a commit e76f490
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 29 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
## [2.0.4] (Un-Released)
- 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
- Fixed [#366](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/366) - Null check operator used on a null value
- Fixed [#389](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/389) - Ignore extra `_nextIfAny` function operations
- Fixed [#409](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/409) - Fixed target hit area.
- 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.
Expand Down
42 changes: 23 additions & 19 deletions README.md
View file
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
View file
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
View file
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
22 changes: 22 additions & 0 deletions lib/src/widget/tooltip_slide_transition.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import 'package:flutter/material.dart';

class ToolTipSlideTransition extends AnimatedWidget {
/// In [SlideTransition] Widget if we increase
/// size of child sliding distance is increasing so we have fixed that
/// distance with the use of [ToolTipSlideTransition] class
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 e76f490

Please sign in to comment.