指南/演练层实施

Question

您将如何在Flutter中实现实际屏幕上方的引导层。像这样：

Answer 1

这不是小事。这是必需的组件：

首先，您必须open a transparent full screen dialog。或者，您可以直接创建一个Overlay，尽管我不建议这样做。

要将窗口小部件正确放置在叠加层中，可以使用CompositedTransformTarget和CompositedTransformFollower

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

Answer 2

这不能给出简单的答案。

您可以使用Marina Kuznetsova的Highlighter Coach Mark plugin。

Answer 3

您可以将其显示为带有“材料”小部件的Colors.black.withOpacity()属性的对话框，并将其放在GestureDetector内，这样在屏幕上的任何位置点击都会弹出：

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