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

Add a refresh function to TutorialCoachMark and add unFocusAnimationDuration to TargetFocus #115

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add a refresh function to TutorialCoachMark and add unFocusAnimationDuration to TargetFocus #115

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
cf05da7
Add a refresh function to the TutorialCoachMark
LouShi Apr 21, 2022
c2ef4c2
Add unFocusAnimationDuration to TargetFocus
LouShi Apr 21, 2022
bdb4112
Refresh the position of the TargetContent when the refresh function i…
LouShi Apr 29, 2022
3107f2d
Fix bug in TutorialCoachMarkWidget
LouShi Apr 29, 2022
4fd3ecd
Update animated_focus_light.dart
LouShi May 14, 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
2 changes: 2 additions & 0 deletions lib/src/target/target_focus.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ class TargetFocus {
this.alignSkip,
this.paddingFocus,
this.focusAnimationDuration,
this.unFocusAnimationDuration,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its already in the newest version 1.2.2

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In 1.2.2, the unFocusAnimationDuration is only in TutorialCoachMark. I add it to the TargetFocus, so that the unFocusAnimationDuration can be adjust in each TargetFocus.

this.pulseVariation,
}) : assert(keyTarget != null || targetPosition != null);

Expand All @@ -34,6 +35,7 @@ class TargetFocus {
final AlignmentGeometry? alignSkip;
final double? paddingFocus;
final Duration? focusAnimationDuration;
final Duration? unFocusAnimationDuration;
final Tween<double>? pulseVariation;

@override
Expand Down
90 changes: 50 additions & 40 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 @@ -9,7 +9,7 @@ import 'package:tutorial_coach_mark/src/util.dart';

class AnimatedFocusLight extends StatefulWidget {
final List<TargetFocus> targets;
final Function(TargetFocus)? focus;
final Function(int)? focus;
final FutureOr Function(TargetFocus)? clickTarget;
final FutureOr Function(TargetFocus)? clickOverlay;
final Function? removeFocus;
Expand Down Expand Up @@ -43,9 +43,8 @@ class AnimatedFocusLight extends StatefulWidget {
super(key: key);

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

abstract class AnimatedFocusLightState extends State<AnimatedFocusLight>
Expand Down Expand Up @@ -127,6 +126,31 @@ abstract class AnimatedFocusLightState extends State<AnimatedFocusLight>
_runFocus();
}

void refresh() {
_targetFocus = widget.targets[_currentFocus];
var targetPosition = getTargetCurrent(_targetFocus);

if (targetPosition == null) {
_finish();
return;
}

setState(() {
_targetPosition = targetPosition;

_positioned = Offset(
targetPosition.offset.dx + (targetPosition.size.width / 2),
targetPosition.offset.dy + (targetPosition.size.height / 2),
);

if (targetPosition.size.height > targetPosition.size.width) {
_sizeCircle = targetPosition.size.height * 0.6 + _getPaddingFocus();
} else {
_sizeCircle = targetPosition.size.width * 0.6 + _getPaddingFocus();
}
});
}

void _finish() {
setState(() => _currentFocus = 0);
widget.finish!();
Expand Down Expand Up @@ -173,9 +197,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 +212,15 @@ 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(),
onTap: _targetFocus.enableTargetTab
? () => _tapHandler(targetTap: true)
: null,
onTap: _targetFocus.enableTargetTab ? () => _tapHandler(targetTap: true) : 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 Down Expand Up @@ -261,7 +278,8 @@ class AnimatedStaticFocusLightState extends AnimatedFocusLightState {
});

_controller.forward();
_controller.duration = widget.unFocusAnimationDuration ??
_controller.duration = _targetFocus.unFocusAnimationDuration ??
widget.unFocusAnimationDuration ??
_targetFocus.focusAnimationDuration ??
widget.focusAnimationDuration ??
defaultFocusAnimationDuration;
Expand All @@ -270,7 +288,7 @@ class AnimatedStaticFocusLightState extends AnimatedFocusLightState {
@override
void _listener(AnimationStatus status) {
if (status == AnimationStatus.completed) {
widget.focus?.call(_targetFocus);
widget.focus?.call(_currentFocus);
}
if (status == AnimationStatus.dismissed) {
if (_goNext) {
Expand Down Expand Up @@ -303,19 +321,16 @@ 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 +351,16 @@ 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,
onTap:
_targetFocus.enableTargetTab ? () => _tapHandler(targetTap: true) : 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 @@ -372,9 +382,8 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
widget.focusAnimationDuration ??
defaultFocusAnimationDuration;

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

var targetPosition = getTargetCurrent(_targetFocus);

Expand All @@ -400,7 +409,8 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
});

_controller.forward();
_controller.duration = widget.unFocusAnimationDuration ??
_controller.duration = _targetFocus.unFocusAnimationDuration ??
widget.unFocusAnimationDuration ??
_targetFocus.focusAnimationDuration ??
widget.focusAnimationDuration ??
defaultFocusAnimationDuration;
Expand Down Expand Up @@ -435,7 +445,7 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
if (status == AnimationStatus.completed) {
setState(() => _finishFocus = true);

widget.focus?.call(_targetFocus);
widget.focus?.call(_currentFocus);

_controllerPulse.forward();
}
Expand Down
28 changes: 15 additions & 13 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 @@ -3,6 +3,7 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/src/target/target_content.dart';
import 'package:tutorial_coach_mark/src/target/target_focus.dart';
import 'package:tutorial_coach_mark/src/target/target_position.dart';
import 'package:tutorial_coach_mark/src/util.dart';
import 'package:tutorial_coach_mark/src/widgets/animated_focus_light.dart';

Expand Down Expand Up @@ -57,7 +58,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
implements TutorialCoachMarkController {
final GlobalKey<AnimatedFocusLightState> _focusLightKey = GlobalKey();
bool showContent = false;
TargetFocus? currentTarget;
int? currentTarget;

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -113,7 +114,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>

List<Widget> children = <Widget>[];

final target = getTargetCurrent(currentTarget!);
TargetPosition? target = getTargetCurrent(widget.targets[currentTarget!]);
if (target == null) {
return SizedBox.shrink();
}
Expand All @@ -126,10 +127,8 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
double haloWidth;
double haloHeight;

if (currentTarget!.shape == ShapeLightFocus.Circle) {
haloWidth = target.size.width > target.size.height
? target.size.width
: target.size.height;
if (widget.targets[currentTarget!].shape == ShapeLightFocus.Circle) {
haloWidth = target.size.width > target.size.height ? target.size.width : target.size.height;
haloHeight = haloWidth;
} else {
haloWidth = target.size.width;
Expand All @@ -145,7 +144,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
double? left;
double? right;

children = currentTarget!.contents!.map<Widget>((i) {
children = widget.targets[currentTarget!].contents!.map<Widget>((i) {
switch (i.align) {
case ContentAlign.bottom:
{
Expand All @@ -160,8 +159,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 +198,8 @@ 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 All @@ -218,7 +215,7 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
return SizedBox.shrink();
}
return Align(
alignment: currentTarget?.alignSkip ?? widget.alignSkip,
alignment: widget.targets[currentTarget!].alignSkip ?? widget.alignSkip,
child: SafeArea(
child: AnimatedOpacity(
opacity: showContent ? 1 : 0,
Expand Down Expand Up @@ -246,4 +243,9 @@ class TutorialCoachMarkWidgetState extends State<TutorialCoachMarkWidget>
void next() => _focusLightKey.currentState?.next();

void previous() => _focusLightKey.currentState?.previous();

void refresh() {
setState(() {});
_focusLightKey.currentState?.refresh();
}
}
2 changes: 2 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 @@ -106,6 +106,8 @@ class TutorialCoachMark {

void previous() => _widgetKey.currentState?.previous();

void refresh() => _widgetKey.currentState?.refresh();

void _removeOverlay() {
_overlayEntry?.remove();
_overlayEntry = null;
Expand Down