在相机小部件顶部显示遮罩区域

Question

我正在尝试实现一个信用卡读卡器（使用一些 API）。为了让用户拍摄卡片的照片，我将全屏显示相机预览小部件。我想屏蔽一个区域，以便用户将卡集中在那里。

他是我心中所想的例证

我想知道如何在颤振中完成这种掩蔽？目前我只是绘制一个BoxDecoration，但缺少半透明的灰色区域。

Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.width * 0.8 / 1.55,
decoration: new BoxDecoration(
    border: Border.all(
        color: Colors.white,
        width: 2.0,
        style: BorderStyle.solid),
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.all(Radius.circular(4.0))),
)

Answer 1

您暂时可以尝试这样的方法，但这是一个非常低效的解决方案，我确信一定有更好的解决方案，我也想知道。

 @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return Container(
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: <Widget>[
          CustomPaint(
            foregroundPainter: P(),
            child: CameraPreview(controller),
          ),
          ClipPath(
            clipper: Clip(),
            child: CameraPreview(controller)),
        ],
      ),
    );
  }
class P extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawColor(Colors.grey.withOpacity(0.8), BlendMode.dstOut);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }

}
class Clip extends CustomClipper<Path>{
  @override
  getClip(Size size) {
    print(size);
    Path path = Path()
    ..addRRect(RRect.fromRectAndRadius(Rect.fromLTWH(10, size.height/2-120, size.width-20, 240), Radius.circular(26)));
    return path;
  }

  @override
  bool shouldReclip(oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }

}