Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: 🐛 Fixed ToolTip Slide Transition #369

Merged
merged 1 commit into from
Apr 18, 2024
Merged

fix: 🐛 Fixed ToolTip Slide Transition #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions CHANGELOG.md
View file
Open in desktop
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
45 changes: 25 additions & 20 deletions README.md
View file
Open in desktop
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 Expand Up @@ -234,10 +238,11 @@ ShowCaseWidget(
<td align="center"><a href="https://github.com/sanket-simform"><img src="https://avatars.githubusercontent.com/u/65167856?v=4" width="100px;" alt=""/><br /><sub><b>Sanket Kachhela</b></sub></a></td>
<td align="center"><a href="https://github.com/ParthBaraiya"><img src="https://avatars.githubusercontent.com/u/36261739?v=4" width="100px;" alt=""/><br /><sub><b>Parth Baraiya</b></sub></a></td>
<td align="center"><a href="https://github.com/ShwetaChauhan18"><img src="https://avatars.githubusercontent.com/u/34509457" width="80px;" alt=""/><br /><sub><b>Shweta Chauhan</b></sub></a></td>
<td align="center"><a href="https://github.com/MehulKK"><img src="https://avatars.githubusercontent.com/u/60209725?s=100" width="100px;" alt=""/><br /><sub><b>Mehul Kabaria</b></sub></a></td>
<td align="center"><a href="https://github.com/DhavalRKansara"><img src="https://avatars.githubusercontent.com/u/44993081?v=4" width="100px;" alt=""/><br /><sub><b>Dhaval Kansara</b></sub></a></td>
<td align="center"><a href="https://github.com/HappyMakadiyaS"><img src="https://avatars.githubusercontent.com/u/97177197?v=4" width="100px;" alt=""/><br /><sub><b>Happy Makadiya</b></sub></a></td>
<td align="center"><a href="https://github.com/Ujas-Majithiya"><img src="https://avatars.githubusercontent.com/u/56400956?v=4" width="100px;" alt=""/><br /><sub><b>Ujas Majithiya</b></sub></a></td>
<td align="center"><a href="https://github.com/aditya-chavda"><img src="https://avatars.githubusercontent.com/u/41247722?v=4" width="100px;" alt=""/><br /><sub><b>Aditya Chavda</b></sub></a></td>
<td align="center"><a href="https://github.com/Flamingloon"><img src="https://avatars.githubusercontent.com/u/81063988?v=4" width="100px;" alt=""/><br /><sub><b>Sahil Totala</b></sub></a></td>
</tr>
</table>

Expand Down
9 changes: 9 additions & 0 deletions lib/src/showcase.dart
View file
Open in desktop
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
Open in desktop
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
View file
Open in desktop
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,
);
}
}
Loading