Flutter 折叠卡片效应-颤振

我想做一个如下所示的效果，我已经添加了一张卡和一个容器在堆栈中，以显示上面的徽章。但我不确定该使用什么或哪个小部件来显示徽章的左上角

有谁能指导我如何达到这种效果

我目前的状态：

---

对三角形部分使用

CustomPaint

，并将文本合成到

行中

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 2.0;
    Path path = Path();
    path.moveTo(0.0, size.height);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

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

在您的

行中

Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
           SizedBox(
             height: 8.0,
             width: 5.0,
             child: CustomPaint(
               painter: TrianglePainter(),
             ),
           ),
           Container(
             decoration: BoxDecoration(
                 color: Colors.red,
                 borderRadius: BorderRadius.only(
                     topRight: Radius.circular(6.0),
                     bottomLeft: Radius.circular(6.0))),
             width: 120.0,
             height: 30.0,
             child: Center(
               child: Text(
                 'Customer Replay',
                style: TextStyle(color: Colors.white),
               ),
             ),
           ),
         ],
        ),

行(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
大小盒子(
身高：8.0，
宽度：5.0，
孩子：定制油漆(
油漆工：三角形油漆工（），
),
),
容器(
装饰：盒子装饰(
颜色：颜色，红色，
borderRadius：仅限borderRadius(
右上角：半径。圆形（6.0），
左下角：半径。圆形（6.0）），
宽度：120.0，
身高：30.0，
儿童：中心(
子：文本(
“客户重播”，
样式：TextStyle（颜色：Colors.white），
),
),
),
],
),

---

你可以使用自定义画师，我会说只画一个三角形