Masking a path and paint in Flutter using a Custom Painter

Question

i want to color the lines as I want,by use a drawPath to mask a drawPaint.But I find there is a black background behind the correct results like this.When I use the BlendMode.src to check the src(the line),I find there also a black background hebind my line like this,have some way to avoid it?

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() => runApp(StartPage());

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: PaintDemo(),
        size: Size.infinite,
      ),
    );
  }
}

class PaintDemo extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var startPoint = Offset(0, 0);
    var controlPoint1 = Offset(size.width / 2, 0);
    var controlPoint2 = Offset(size.width / 2, size.height);
    var endPoint = Offset(size.width, size.height);

    var path = Path()
      ..moveTo(startPoint.dx, startPoint.dy)
      ..cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
          controlPoint2.dy, endPoint.dx, endPoint.dy);

    canvas.save();

    canvas.drawPaint(
      Paint()
        ..shader = ui.Gradient.linear(
          Offset(size.width / 2, 0),
          Offset(size.width / 2, size.height),
          [
            Color(0xFF32D74B),
            Color(0xFFFF453A),
          ],
        ),
    );

    canvas.restore();

    canvas.saveLayer(
      Rect.fromLTRB(0, 0, size.width, size.height),
      Paint()..blendMode = BlendMode.dstIn,
    );

    canvas.drawPath(
        path,
        Paint()
          ..isAntiAlias = true
          ..color = Colors.orange
          ..style = PaintingStyle.stroke
          ..strokeWidth = 3);

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Answer 1

I tested your code without changing a single character in dartpad and did not see black color background. Please see the screenshot.