image.png
image.png
image.png
如上三张图，实现如此效果，需要用到组件：
- 弹出功能： OverlayEntry
- 位置定位跟踪效果 CompositedTransformTarget CompositedTransformFollower
- 蒙层穿透效果 ： 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())
