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);
      });

Similar packages

Thanks

Libraries

highlighter_coachmark

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]