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

Collect target tap position #116

Merged
merged 5 commits into from
May 20, 2022
Merged

Collect target tap position #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
70b21c2
Collect tap position on clicking targets
BerkayOezSP Apr 27, 2022
71e8598
Replace null with empty function
BerkayOezSP Apr 27, 2022
87b2f16
Update main.dart with new feature (onClickTargetWithTapPosition)
BerkayOezSP Apr 27, 2022
1278b9e
Update README.md with new feature
BerkayOezSP Apr 27, 2022
ec2cd8e
Merge branch 'master' into feature/collect_target_tap_position
BerkayOezSP Apr 27, 2022
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
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,16 @@ void showTutorial() {
// textSkip: "SKIP",
// paddingFocus: 10,
// focusAnimationDuration: Duration(milliseconds: 500),
// unFocusAnimationDuration: Duration(millisconds: 500),
// pulseAnimationDuration: Duration(milliseconds: 500),
// pulseVariation: Tween(begin: 1.0, end: 0.99),
onFinish: (){
print("finish");
},
onClickTargetWithTapPosition: (target, tapDetails) {
print("target: $target");
print("clicked at position local: ${tapDetails.localPosition} - global: ${tapDetails.globalPosition}");
},
onClickTarget: (target){
print(target);
},
Expand Down Expand Up @@ -67,6 +72,7 @@ Attributes:
| `alignSkip` | Alignment | use to align the skip in the target |
| `paddingFocus` | Alignment | settings padding of the focus in target |
| `focusAnimationDuration` | Duration | override the widget's global focus animation duration |
| `unFocusAnimationDuration` | Duration | override the widget's global unfocus animation duration |
| `pulseVariation` | Tween | override interval pulse animation |

### Creating contents (ContentTarget)
Expand Down Expand Up @@ -237,6 +243,10 @@ void showTutorial() {
onClickTarget: (target){
print(target);
},
onClickTargetWithTapPosition: (target, tapDetails) {
print("target: $target");
print("clicked at position local: ${tapDetails.localPosition} - global: ${tapDetails.globalPosition}");
},
onClickOverlay: (target){
print(target);
},
Expand Down
4 changes: 4 additions & 0 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,10 @@ class _MyHomePageState extends State<MyHomePage> {
onClickTarget: (target) {
print('onClickTarget: $target');
},
onClickTargetWithTapPosition: (target, tapDetails) {
print("target: $target");
print("clicked at position local: ${tapDetails.localPosition} - global: ${tapDetails.globalPosition}");
},
onClickOverlay: (target) {
print('onClickOverlay: $target');
},
Expand Down
89 changes: 47 additions & 42 deletions lib/src/widgets/animated_focus_light.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class AnimatedFocusLight extends StatefulWidget {
final List<TargetFocus> targets;
final Function(TargetFocus)? focus;
final FutureOr Function(TargetFocus)? clickTarget;
final FutureOr Function(TargetFocus, TapDownDetails)? clickTargetWithTapPosition;
final FutureOr Function(TargetFocus)? clickOverlay;
final Function? removeFocus;
final Function()? finish;
Expand All @@ -30,6 +31,7 @@ class AnimatedFocusLight extends StatefulWidget {
this.finish,
this.removeFocus,
this.clickTarget,
this.clickTargetWithTapPosition,
this.clickOverlay,
this.paddingFocus = 10,
this.colorShadow = Colors.black,
Expand All @@ -43,13 +45,11 @@ class AnimatedFocusLight extends StatefulWidget {
super(key: key);

@override
AnimatedFocusLightState createState() => pulseEnable
? AnimatedPulseFocusLightState()
: AnimatedStaticFocusLightState();
AnimatedFocusLightState createState() =>
pulseEnable ? AnimatedPulseFocusLightState() : AnimatedStaticFocusLightState();
}

abstract class AnimatedFocusLightState extends State<AnimatedFocusLight>
with TickerProviderStateMixin {
abstract class AnimatedFocusLightState extends State<AnimatedFocusLight> with TickerProviderStateMixin {
final borderRadiusDefault = 10.0;
final defaultFocusAnimationDuration = Duration(milliseconds: 600);
late AnimationController _controller;
Expand All @@ -70,9 +70,7 @@ abstract class AnimatedFocusLightState extends State<AnimatedFocusLight>
_targetFocus = widget.targets[_currentFocus];
_controller = AnimationController(
vsync: this,
duration: _targetFocus.focusAnimationDuration ??
widget.focusAnimationDuration ??
defaultFocusAnimationDuration,
duration: _targetFocus.focusAnimationDuration ?? widget.focusAnimationDuration ?? defaultFocusAnimationDuration,
)..addStatusListener(_listener);

_curvedAnimation = CurvedAnimation(
Expand Down Expand Up @@ -106,6 +104,10 @@ abstract class AnimatedFocusLightState extends State<AnimatedFocusLight>
}
}

Future _tapHandlerForPosition(TapDownDetails tapDetails) async {
await widget.clickTargetWithTapPosition?.call(_targetFocus, tapDetails);
}

void _runFocus();

void _nextFocus() {
Expand Down Expand Up @@ -173,9 +175,7 @@ class AnimatedStaticFocusLightState extends AnimatedFocusLightState {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: _targetFocus.enableOverlayTab
? () => _tapHandler(overlayTap: true)
: null,
onTap: _targetFocus.enableOverlayTab ? () => _tapHandler(overlayTap: true) : null,
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
Expand All @@ -190,20 +190,22 @@ class AnimatedStaticFocusLightState extends AnimatedFocusLightState {
),
),
Positioned(
left:
(_targetPosition?.offset.dx ?? 0) - _getPaddingFocus() * 2,
left: (_targetPosition?.offset.dx ?? 0) - _getPaddingFocus() * 2,
top: (_targetPosition?.offset.dy ?? 0) - _getPaddingFocus() * 2,
child: InkWell(
borderRadius: _betBorderRadiusTarget(),
onTapDown: (details) {
_tapHandlerForPosition(details);
},
onTap: _targetFocus.enableTargetTab
? () => _tapHandler(targetTap: true)
: null,

/// Essential for collecting [TapDownDetails]. Do not make [null]
: () {},
child: Container(
color: Colors.transparent,
width: (_targetPosition?.size.width ?? 0) +
_getPaddingFocus() * 4,
height: (_targetPosition?.size.height ?? 0) +
_getPaddingFocus() * 4,
width: (_targetPosition?.size.width ?? 0) + _getPaddingFocus() * 4,
height: (_targetPosition?.size.height ?? 0) + _getPaddingFocus() * 4,
),
),
)
Expand All @@ -229,14 +231,18 @@ class AnimatedStaticFocusLightState extends AnimatedFocusLightState {
_controller.reverse();
}

@override
Future _tapHandlerForPosition(TapDownDetails tapDetails) async {
await super._tapHandlerForPosition(tapDetails);
}

@override
void _runFocus() {
if (_currentFocus < 0) return;
_targetFocus = widget.targets[_currentFocus];

_controller.duration = _targetFocus.focusAnimationDuration ??
widget.focusAnimationDuration ??
defaultFocusAnimationDuration;
_controller.duration =
_targetFocus.focusAnimationDuration ?? widget.focusAnimationDuration ?? defaultFocusAnimationDuration;

var targetPosition = getTargetCurrent(_targetFocus);

Expand Down Expand Up @@ -303,19 +309,15 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
duration: widget.pulseAnimationDuration ?? defaultPulseAnimationDuration,
);

_tweenPulse = _createTweenAnimation(_targetFocus.pulseVariation ??
widget.pulseVariation ??
defaultPulseVariation);
_tweenPulse = _createTweenAnimation(_targetFocus.pulseVariation ?? widget.pulseVariation ?? defaultPulseVariation);

_controllerPulse.addStatusListener(_listenerPulse);
}

@override
Widget build(BuildContext context) {
return InkWell(
onTap: _targetFocus.enableOverlayTab
? () => _tapHandler(overlayTap: true)
: null,
onTap: _targetFocus.enableOverlayTab ? () => _tapHandler(overlayTap: true) : null,
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
Expand All @@ -336,21 +338,22 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
),
),
Positioned(
left: (_targetPosition?.offset.dx ?? 0) -
_getPaddingFocus() * 2,
top: (_targetPosition?.offset.dy ?? 0) -
_getPaddingFocus() * 2,
left: (_targetPosition?.offset.dx ?? 0) - _getPaddingFocus() * 2,
top: (_targetPosition?.offset.dy ?? 0) - _getPaddingFocus() * 2,
child: InkWell(
borderRadius: _betBorderRadiusTarget(),
onTap: _targetFocus.enableTargetTab
? () => _tapHandler(targetTap: true)
: null,

/// Essential for collecting [TapDownDetails]. Do not make [null]
: () {},
onTapDown: (details) {
_tapHandlerForPosition(details);
},
child: Container(
color: Colors.transparent,
width: (_targetPosition?.size.width ?? 0) +
_getPaddingFocus() * 4,
height: (_targetPosition?.size.height ?? 0) +
_getPaddingFocus() * 4,
width: (_targetPosition?.size.width ?? 0) + _getPaddingFocus() * 4,
height: (_targetPosition?.size.height ?? 0) + _getPaddingFocus() * 4,
),
),
)
Expand All @@ -368,13 +371,10 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
if (_currentFocus < 0) return;
_targetFocus = widget.targets[_currentFocus];

_controller.duration = _targetFocus.focusAnimationDuration ??
widget.focusAnimationDuration ??
defaultFocusAnimationDuration;
_controller.duration =
_targetFocus.focusAnimationDuration ?? widget.focusAnimationDuration ?? defaultFocusAnimationDuration;

_tweenPulse = _createTweenAnimation(_targetFocus.pulseVariation ??
widget.pulseVariation ??
defaultPulseVariation);
_tweenPulse = _createTweenAnimation(_targetFocus.pulseVariation ?? widget.pulseVariation ?? defaultPulseVariation);

var targetPosition = getTargetCurrent(_targetFocus);

Expand Down Expand Up @@ -424,6 +424,11 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
_controllerPulse.reverse(from: _controllerPulse.value);
}

@override
Future _tapHandlerForPosition(TapDownDetails tapDetails) async {
await super._tapHandlerForPosition(tapDetails);
}

@override
void dispose() {
_controllerPulse.dispose();
Expand Down
19 changes: 9 additions & 10 deletions lib/src/widgets/tutorial_coach_mark_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class TutorialCoachMarkWidget extends StatefulWidget {
this.finish,
this.paddingFocus = 10,
this.clickTarget,
this.onClickTargetWithTapPosition,
this.clickOverlay,
this.alignSkip = Alignment.bottomRight,
this.textSkip = "SKIP",
Expand All @@ -32,6 +33,7 @@ class TutorialCoachMarkWidget extends StatefulWidget {

final List<TargetFocus> targets;
final FutureOr Function(TargetFocus)? clickTarget;
final FutureOr Function(TargetFocus, TapDownDetails)? onClickTargetWithTapPosition;
final FutureOr Function(TargetFocus)? clickOverlay;
final Function()? finish;
final Color colorShadow;
Expand All @@ -53,8 +55,7 @@ class TutorialCoachMarkWidget extends StatefulWidget {
TutorialCoachMarkWidgetState createState() => TutorialCoachMarkWidgetState();
}

class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
implements TutorialCoachMarkController {
class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget> implements TutorialCoachMarkController {
final GlobalKey<AnimatedFocusLightState> _focusLightKey = GlobalKey();
bool showContent = false;
TargetFocus? currentTarget;
Expand All @@ -80,6 +81,9 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
clickTarget: (target) {
return widget.clickTarget?.call(target);
},
clickTargetWithTapPosition: (target, tapDetails) {
return widget.onClickTargetWithTapPosition?.call(target, tapDetails);
},
clickOverlay: (target) {
return widget.clickOverlay?.call(target);
},
Expand Down Expand Up @@ -127,9 +131,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
double haloHeight;

if (currentTarget!.shape == ShapeLightFocus.Circle) {
haloWidth = target.size.width > target.size.height
? target.size.width
: target.size.height;
haloWidth = target.size.width > target.size.height ? target.size.width : target.size.height;
haloHeight = haloWidth;
} else {
haloWidth = target.size.width;
Expand Down Expand Up @@ -160,8 +162,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
weight = MediaQuery.of(context).size.width;
left = 0;
top = null;
bottom = haloHeight +
(MediaQuery.of(context).size.height - positioned.dy);
bottom = haloHeight + (MediaQuery.of(context).size.height - positioned.dy);
}
break;
case ContentAlign.left:
Expand Down Expand Up @@ -200,9 +201,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
width: weight,
child: Padding(
padding: i.padding,
child: i.builder != null
? i.builder?.call(context, this)
: (i.child ?? SizedBox.shrink()),
child: i.builder != null ? i.builder?.call(context, this) : (i.child ?? SizedBox.shrink()),
),
),
);
Expand Down
3 changes: 3 additions & 0 deletions lib/tutorial_coach_mark.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ class TutorialCoachMark {
final BuildContext _context;
final List<TargetFocus> targets;
final FutureOr<void> Function(TargetFocus)? onClickTarget;
final FutureOr<void> Function(TargetFocus, TapDownDetails)? onClickTargetWithTapPosition;
final FutureOr<void> Function(TargetFocus)? onClickOverlay;
final Function()? onFinish;
final double paddingFocus;
Expand All @@ -38,6 +39,7 @@ class TutorialCoachMark {
{required this.targets,
this.colorShadow = Colors.black,
this.onClickTarget,
this.onClickTargetWithTapPosition,
this.onClickOverlay,
this.onFinish,
this.paddingFocus = 10,
Expand All @@ -61,6 +63,7 @@ class TutorialCoachMark {
key: _widgetKey,
targets: targets,
clickTarget: onClickTarget,
onClickTargetWithTapPosition: onClickTargetWithTapPosition,
clickOverlay: onClickOverlay,
paddingFocus: paddingFocus,
onClickSkip: skip,
Expand Down