Guides/Walkthroughs层实现

Question

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

Answer 1

您可以将其显示为带有 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 
            ],
          ),
        ),
      );
    },
  );
}

Answer 2

这不允许简单的回答。

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

Answer 3

这不是微不足道的。以下是必需的组件：

首先，你必须. Alternatively you can directly create an Overlay，虽然我不推荐它。

要在叠加层中正确放置小部件，您可以使用 CompositedTransformTarget and CompositedTransformFollower

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

Guides/Walkthroughs层实现

Guides/Walkthroughs Layer Implementation

flutter

flutter-layout