惊天秘密！如何在 Flutter 项目中实现操作引导

不要冒然评价我，你只知道我的名字，却不知道我的故事，你只是听闻我做了什么，却不知我经历过什么。

俗话说得好，产品有三宝，弹窗浮层加引导。

上图截图自我司 App 晓黑板中的口算模块，相信每个 App 开发在工作中都碰到这种场景，为了避免用户对新功能产生困惑，会对一些功能加一些引导操作。在原生开发中，例如 Android 开发中，我们可以使用 NewbieGuide 等开源库来实现。但是很遗憾的是，在 Dart packages 中找了一圈，一无所获。

但是我们还是很快就解决了问题，既然解决不了问题，我们就要学会让这个问题不存在，这时候开发一宝就显得尤其有用了。

本文完，大家下期再见👋

~

~

~

开个玩笑。真的猛男，敢于直面惨淡的人生，也敢于正视淋漓的鲜血，这区区需求怎么能打倒我们。接下来我们开始琢磨一下这个引导操作要怎么实现，相信各位小伙伴接到这个需求第一个想到的就是，这玩意儿不就是在整个页面上面盖一个蒙层，然后把中间再抠一块出来。最后再加一些文字和一个下一步按钮就行了嘛。你要是把这个需求想得这么简单，那你可就真是大对特对了。所以我们就按前面说的三步来实现这个东西。当然，你如果不想接着往下看的话，可以直接点击这里使用我们开发完成的引导组件库来快速在你的 Flutter 项目中接入引导功能。

盖个蒙层

那么如何在 Flutter 页面上盖一个浮层呢？翻了一下 Flutter 的 API 文档，找到了两个法宝，分别是 Overlay 和 OverlayEntry。两者的使用方法如下。

class _MyWidgetState extends State<MyWidget> {
  OverlayEntry overlayEntry;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          RaisedButton(
            onPressed: () {
              /// 1. 创建一个 overlayEntry 实例，builder 方法返回一个 Widget
              /// 该 Widget 会被渲染到页面顶层
              overlayEntry = OverlayEntry(
                builder: (context) => Container(
                  color: Colors.white.withOpacity(.4),
                  child: Center(
                    child: RaisedButton(
                      onPressed: () {
                        /// 3. 执行 remove 方法销毁 overlayEntry 实例
                        overlayEntry.remove();
                      },
                      child: Text('点