如何在容器内遮罩自定义形状(Flutter)?

我想对红色和绿色三角形进行编码,但我真的不知道如何处理它们。

Figma

我已经对卡片小部件进行了编码:

        //Card form fulfiled by IMG from the profile
        Container(
          height: MediaQuery.of(context).size.height / 1.5533,
          width: MediaQuery.of(context).size.width / 1.075,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey,
                spreadRadius: 1,
                blurRadius: 10,
                blurStyle: BlurStyle.outer,
              )
            ],
            image: DecorationImage(
              image: AssetImage('assets/img1.JPG'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        //The rectangle containing Nickname & Tags
        Positioned(
            top: 20,
            right: 20,
            child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                    child: Opacity(
                        opacity: 0.3,
                        child: Container(
                          height:
                              MediaQuery.of(context).size.height / 9.6082474,
                          width: MediaQuery.of(context).size.width / 2.1182266,
                          decoration: const BoxDecoration(
                            color: Color(0XFFD9D9D9),
                          ),
                        ))))),
        //The Nickname of the user
        Positioned(
            top: 15,
            right: 25,
            child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: userNickname("Paul", context))),
        // Tags
        Positioned(
            top: 90, right: 90, child: tags("#EFREI", context, Colors.purple)),

        //The code for the red and green triangle to insert
      ]);

其想法是创建自定义形状(三角形),然后将其遮罩在卡片中,以便在三角形中具有圆形边界。知道怎么做吗?谢谢

我已经使用CustomPaint尝试过一些东西,但正如你所看到的,结果并不好:

enter image description here

    Positioned(
            top: 360,
            child: CustomPaint(
              painter: CustomShape(blurSigma: 30),
            ))

还有我的CustomShape类:

class CustomShape extends CustomPainter {
  double blurSigma;
  CustomShape({required this.blurSigma});
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    // TODO: Set properties to paint
    paint.color = const Color(0XFFFF0000).withOpacity(0.8);
    paint.maskFilter = MaskFilter.blur(BlurStyle.inner, blurSigma);
    var path = Path();
    // TODO: Draw your path
    path.lineTo(100, 240);
    path.lineTo(0, 240);

    canvas.drawPath(path, paint);
  }

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