Flutter如何实现如图所示的文件夹形状容器？CustomPaint代码效果不符

原代码的路径节点逻辑不符合常规文件夹的轮廓，以下是调整后的实现代码，能还原图中的文件夹样式：

Container(
  width: 274,
  height: 188,
  child: CustomPaint(
    painter: FolderShapePainter(color: Colors.blue),
  ),
)

class FolderShapePainter extends CustomPainter {
  final Color color;

  FolderShapePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    // 定义折角的宽高比例，可按需调整
    final cornerWidth = size.width * 0.2;
    final cornerHeight = size.height * 0.15;

    Path path = Path();
    // 从右上角起点开始绘制
    path.moveTo(size.width, 0);
    // 左移到折角的顶部端点
    path.lineTo(size.width - cornerWidth, 0);
    // 绘制折角斜边到右侧中间点
    path.lineTo(size.width, cornerHeight);
    // 向下到右下角
    path.lineTo(size.width, size.height);
    // 向左到左下角
    path.lineTo(0, size.height);
    // 向上到左侧中间点
    path.lineTo(0, cornerHeight);
    // 向右上回到左上角的折角端点，闭合路径
    path.lineTo(cornerWidth, 0);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // 仅当颜色变化时重绘，优化性能
    return oldDelegate is FolderShapePainter && oldDelegate.color != color;
  }
}

调整说明： #

• 重新梳理了路径节点顺序，贴合常规文件夹（顶部带折角）的轮廓逻辑
• 提取折角宽高为比例参数，方便后续快速调整样式
• 优化shouldRepaint判断逻辑，避免无意义的重绘

如果需要顶部左侧折角的样式，只需修改路径节点顺序：

Path path = Path();
// 从左上角起点开始绘制
path.moveTo(0, 0);
// 右移到折角的顶部端点
path.lineTo(cornerWidth, 0);
// 绘制折角斜边到左侧中间点
path.lineTo(0, cornerHeight);
// 向下到左下角
path.lineTo(0, size.height);
// 向右到右下角
path.lineTo(size.width, size.height);
// 向上到右侧中间点
path.lineTo(size.width, cornerHeight);
// 向左上回到右上角的折角端点，闭合路径
path.lineTo(size.width - cornerWidth, 0);
path.close();

内容的提问来源于stack exchange，提问作者user16304169