Guides/Walkthroughs Layer Implementation

Question

How would you implement in Flutter a guiding layer on top of an actual screen. Something like this:

Answer 1

This is not trivial. Here are the required components:

First of all, you have to open a transparent full screen dialog. Alternatively you can directly create an Overlay, though I wouldn't recommend it.

To position the widgets in the overlay correctly, you can use CompositedTransformTarget and CompositedTransformFollower

https://docs.flutter.io/flutter/widgets/CompositedTransformTarget-class.html

Answer 2

This does not allow a simple answer.

You can use the Highlighter Coach Mark plugin by Marina Kuznetsova.

Answer 3

You can display it as a dialog with the Colors.black.withOpacity() property of the Material widget and have it inside of a GestureDetector so tapping anywhere on the screen will pop back:

static Future<Null> guideDialog(BuildContext context) async {
  return showDialog<Null>(
    context: context,
    builder: (BuildContext context) {
      return new GestureDetector(
        onTap: () {
          Navigator.of(context).pop();
        },
        child: Material(
          color: Colors.black.withOpacity(0.5),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: Text(
                  "(Tap anywhere to dismiss)",
                  style: TextStyle(color: Colors.white),
                ),
              ),
              //your other widgets to guide here 
            ],
          ),
        ),
      );
    },
  );
}