Flutter中如何实现底部为三角形的自定义形状Container？

核心实现逻辑是通过CustomClipper自定义裁剪路径，配合ClipPath组件完成异形容器渲染，不需要引入第三方依赖。

具体实现步骤 #

• 第一步：编写自定义路径裁剪类，定义矩形+底部三角形的组合路径

import 'package:flutter/material.dart';

class BottomTriangleClipper extends CustomClipper<Path> {
  // 可配置参数：三角形高度、三角形底边半宽
  final double triangleHeight;
  final double triangleHalfWidth;

  const BottomTriangleClipper({
    this.triangleHeight = 20,
    this.triangleHalfWidth = 15,
  });

  @override
  Path getClip(Size size) {
    final Path path = Path();
    // 绘制容器主体矩形
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height - triangleHeight);
    // 绘制底部三角形
    path.lineTo(size.width / 2 + triangleHalfWidth, size.height - triangleHeight);
    path.lineTo(size.width / 2, size.height);
    path.lineTo(size.width / 2 - triangleHalfWidth, size.height - triangleHeight);
    path.lineTo(0, size.height - triangleHeight);
    // 闭合路径完成绘制
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

• 第二步：使用ClipPath包裹目标Container，传入自定义裁剪器即可

// 组件使用示例
ClipPath(
  clipper: const BottomTriangleClipper(
    triangleHeight: 24, // 自定义三角形突出高度
    triangleHalfWidth: 18, // 自定义三角形底边一半的宽度
  ),
  child: Container(
    width: double.infinity,
    height: 180,
    // 可按需替换为渐变、背景图等任意BoxDecoration
    decoration: const BoxDecoration(
      color: Color(0xFF2196F3),
      borderRadius: BorderRadius.vertical(top: Radius.circular(8)),
    ),
    padding: const EdgeInsets.all(20),
    alignment: Alignment.center,
    child: const Text(
      "自定义三角形底部容器",
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
)

参数调整说明 #

• 如需修改三角形突出的高度，调整triangleHeight参数即可
• 如需修改三角形的宽窄，调整triangleHalfWidth参数即可
• 如需调整三角形的水平位置，修改路径里size.width/2的偏移量即可
• 如果需要三角形和矩形衔接处带圆角，可在路径拐角处添加arcToPoint方法绘制过渡圆弧
• 如需添加阴影，直接在Container的BoxDecoration里配置boxShadow即可，阴影会自动适配裁剪后的异形轮廓

实现效果参考：

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