highlighter_coachmark

Description:

highlighter coachmark

Highlighter Coach Mark #
There are different ways for user on-boarding. It can be a show of screenshots or overlay with directions to features,
feature discovery as in Material design or coach mark. This coach mark makes blurred background and highlights desired element.
This coach mark makes blurred background and highlights desired element.
A picture is worth a thousand words, so take a look at gif

And a few tips from UX

Presenting hints one-by-one, at the right moment, makes it a lot easier for users to understand and learn instructions.


To have their full effect, coach marks should focus on particularly innovative or unexpected elements.

Usage #
Take a look at example folder. There are also 4 coach marks there. They are all presented in gif above
CoachMark coachMark = CoachMark();
RenderBox target = targetGlobalKey.currentContext.findRenderObject();
Rect markRect = target.localToGlobal(Offset.zero) & target.size;
markRect = Rect.fromCircle(center: markRect.center, radius: markRect.longestSide * 0.6);
coachMark.show(
targetContext: targetGlobalKey.currentContext,
markRect: markRect,
children: [
Positioned(
top: markRect.top + 5.0,
right: 10.0,
child: Text("Long tap on button to see options",
style: const TextStyle(
fontSize: 24.0,
fontStyle: FontStyle.italic,
color: Colors.white,
)))
],
duration: null,
onClose: () {
appState.setCoachMarkIsShown(true);
});
copied to clipboard
Similar packages

super_tooltip - add in overlay just a tip box with arrow
feature-discovery - implementation by Material Design guidence

Thanks #

Simon Lightfoot for help with soft edges of highlighted area
Thomas Burkhart with publishing his package, so I was inspired and took a nice pattern using Overlay
Iiro Krankka by using his FlutterMates in example