How to Mask a custom shape inside a Container (Flutter)?

Question

我想编写红色和绿色三角形的代码，但我真的不知道如何处理它们。

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

        //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 进行了一些尝试，但如您所见，结果并不理想：

    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;
  }
}

Answer 1

垫片（）；

使用包含多个两个widget的容器间距， 或使用
SizeBox(Mediaquery.of(context).size.width * .03);我们可以使用...