CustomPaint Over Camera Preview

Question

I'm trying to use show a CustomPaint element over a camera preview in Flutter. Right now, the CustomPaint element is being shown under the camera preview. I'm using the Flutter camera plugin to show the camera preview. My code is below.

class _CameraPreviewState extends State<CameraPreview> {

  [...]

  Widget build(BuildContext context) {
  double height = MediaQuery.of(context).size.height;

  return new YidKitTheme(
    new Center(
      child: _isReady
        ? new Container(
          height: height / 2,
          child: new CustomPaint(
            painter: new GuidelinePainter(),
            child: new AspectRatio(
              aspectRatio: controller.value.aspectRatio,
              child: new CameraPreview(controller)
            ),
          )
        )
        : new CircularProgressIndicator()
      )
    );
  }
}

class GuidelinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..strokeWidth = 3.0
      ..color = Colors.red
      ..style = PaintingStyle.stroke;

    var path = new Path()..lineTo(50.0, 50.0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 1

Change

      child: new CustomPaint(
        painter: new GuidelinePainter(),
        child: new AspectRatio(

to

      child: new CustomPaint(
        foregroundPainter: new GuidelinePainter(),
        child: new AspectRatio(

painter draws first (i.e. the background), then the child is drawn, then foregroundPainter draws last on top of the child