Flutter自定义ShapeBorder显示异常：形状固定在屏幕顶部（已解决）

我为Container创建了一个自定义ShapeBorder，但使用时形状绘制在屏幕顶部。实际红色形状应该处于绿色与蓝色容器之间的空白区域。

原Shape代码 #

class BottomButtonShape extends ShapeBorder {
 @override
 EdgeInsetsGeometry get dimensions => EdgeInsets.only();

 @override
 ShapeBorder scale(double t) => this;

 @override
 Path getInnerPath(Rect rect, {TextDirection? textDirection}){
  Path path = Path();
 return Path();
 }

@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) {

Path path = Path();
path.lineTo(rect.width, rect.height);
path.lineTo(20, rect.height);
path.lineTo(20, 0);
path.lineTo(0,0 );

return path;
}

@override
void paint(Canvas canvas, Rect rect, {TextDirection? 
textDirection}) {
 }
 }

原Container代码 #

Container(
          height: 100,
          width: MediaQuery.of(context).size.width,
          decoration: ShapeDecoration(
              shape: BottomButtonShape(),
              shadows: [BoxShadow(color: AppColors.black, blurRadius: 20)],
              color: Colors.red
          ),
        ),

解决方案 #

问题根源在于Shape内的rect定位逻辑错误，所有坐标都应该基于rect的top、bottom等属性来计算：

• 左上角坐标应设为rect.left、rect.top
• 后续形状的位置需要用rect.top + 数值这类相对rect的方式来设置，而非直接使用固定的0或数值。

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