指南/演练层实现答案

【问题标题】：Guides/Walkthroughs Layer Implementation指南/演练层实现
【发布时间】：2018-11-05 11:12:27
【问题描述】：

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

这不是小事。以下是所需的组件：

首先，您必须open a transparent full screen dialog。或者你可以直接创建一个Overlay，虽然我不推荐它。

要正确定位叠加层中的小部件，您可以使用CompositedTransformTarget 和CompositedTransformFollower

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

【讨论】：

【解决方案2】：

您可以使用 Material 小部件的 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 
            ],
          ),
        ),
      );
    },
  );
}

【讨论】：

困难在于将提示围绕实际按钮对齐。
嗯，是的，如果@Victor G 提供更多关于他们希望它的外观的详细信息，我可以提供帮助，但“类似这样的东西”并没有太多继续下去。我提供的解决方案为他们提供了一个指导/演练覆盖的模板，他们可以使用该模板来提供自己的，所以我不确定为什么我的答案被否决了。
因为阴影甚至不是必需的。它可能是一个箭头或类似的图像：camo.githubusercontent.com/…
但是他们给出的例子确实使用了阴影，所以这就是我包含它的原因？是的，它可能就像您提供的那张图片，但“类似这样的东西”并没有什么可做的，我已经向他们展示了如何实现指南/演练叠加。
是的，我一直在寻找更通用的方法，这就是我不太具体的原因。正如屏幕截图所示，两层中的元素之间应该有一些对应关系（即指向目标控件的箭头）

【解决方案3】：

这不允许简单的答案。

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

【讨论】：