image.png
image.png
image.png

如上三张图，实现如此效果，需要用到组件：

1. 弹出功能： OverlayEntry
2. 位置定位跟踪效果 CompositedTransformTarget CompositedTransformFollower
3. 蒙层穿透效果 ： ColorFiltered

参考

  static final LayerLink layerLinkCamera = LayerLink();

  static void showOverlay() {
    _showOverlayCamera(Get.context);
  }

  ///创建
  static void _showOverlayCamera(BuildContext context) {
    OverlayEntry? overlayEntryCamera;
    overlayEntryCamera = _createOverlayEntryCamera(cancelTap: () {
      overlayEntryCamera?.remove();
    }, nextTap: () {
      overlayEntryCamera?.remove();
    });
    OverlayState? overlayState = Navigator.of(context).overlay;
    overlayState?.insert(overlayEntryCamera);
  }


  ///拍视频、拍照片提示
  static OverlayEntry _createOverlayEntryCamera(
          {required VoidCallback cancelTap, required VoidCallback nextTap}) =>
      OverlayEntry(
          builder: (BuildContext context) => Stack(
                children: [
                  Positioned.fill(
                      child: ColorFiltered(
                    colorFilter: const ColorFilter.mode(
                      Color.fromRGBO(51, 51, 51, 0.5),
                      BlendMode.srcOut,
                    ),
                    child: Stack(
                      children: [
                        Positioned.fill(
                            child: Container(
                          color: Colors.transparent,
                        )),
                        CompositedTransformFollower(
                          link: layerLinkCamera,
                          followerAnchor: Alignment.center,
                          targetAnchor: Alignment.center,
                          child: Container(
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border:
                                  Border.all(color: Colors.blue, width: 0.5),
                              borderRadius: BorderRadius.circular(100),
                            ),
                            width: 60.r,
                            height: 60.r,
                          ),
                        )
                      ],
                    ),
                  )),
                  CompositedTransformFollower(
                    link: layerLinkCamera,
                    followerAnchor: Alignment.center,
                    targetAnchor: Alignment.center,
                    offset: Offset(25.r, -100.r),
                    child: ImageView(
                      AppAssets.iconArrow_2,
                      height: 130.r,
                    ),
                  ),
                  CompositedTransformFollower(
                    link: layerLinkCamera,
                    followerAnchor: Alignment.centerLeft,
                    targetAnchor: Alignment.center,
                    offset: Offset(-75.r, -190.r),
                    child: Container(
                      padding: EdgeInsets.symmetric(
                          horizontal: 20.r, vertical: 10.r),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius:
                              BorderRadius.all(Radius.circular(20.r))),
                      child: Text.rich(TextSpan(children: [
                        WidgetSpan(child: TU.d12("点击这里可以")),
                        WidgetSpan(child: TU.d12("切换拍摄视频或照片", bold: true)),
                      ])),
                    ),
                  ),
                  Positioned(
                      top: 100.r,
                      left: 10.r,
                      right: 0,
                      child: Container(
                        alignment: Alignment.centerLeft,
                        child: SizedBox(
                          width: 100.r,
                          child: CustomButton(
                            "取消",
                            tap: () {
                              cancelTap();
                            },
                          ),
                        ),
                      )),
                  Positioned(
                      top: 200.r,
                      left: 0,
                      right: 0,
                      child: Container(
                        alignment: Alignment.center,
                        child: SizedBox(
                          width: 100.r,
                          child: CustomButton(
                            "下一步",
                            tap: () {
                              nextTap();
                            },
                          ),
                        ),
                      )),
                ],
              ));

              CompositedTransformTarget(
                  link:layerLinkCamera,
                  child: ImageView())