如何在Flutter中创建带有边框阴影的矩形？

我必须创建一个圆形边框，边框上只有阴影， 这样地：

我尝试创建一个没有背景色、圆形边框和框阴影的容器，如下所示：

Container(
  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.all(Radius.circular(5)),
    boxShadow: [
      const BoxShadow(
        color: Colors.black,
        blurRadius: 2,
        offset: Offset(0.0, 2.0),
      ),
    ],
  ),
  child: Text('text', style: TextStyle(color: Colors.white)),
),

问题是，阴影被绘制时就像矩形被填充一样，因此在矩形内部绘制实心阴影，如您在该屏幕截图中所示：

我也试过这个，但我得到了同样的结果

Container(
  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
  decoration: ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(3)),
      side: BorderSide(color: Colors.white),
    ),
    shadows: [
      const BoxShadow(
        color: Colors.black,
        blurRadius: 2,
        offset: Offset(0.0, 2.0),
      )
    ],
  ),
  child: Text('text', style: TextStyle(color: Colors.white)),
),

---

有没有一个简单的方法可以达到预期的效果？或者只有使用自定义油漆工才能进行此操作？

您可以使用

CustomPaint

容器(
孩子：定制油漆(
画家：我的画家（），
子：容器(
填充：边缘设置。全部（20），
子项：文本（'Text'，样式：TextStyle（颜色：Colors.white，fontSize:30）），
)
),
),

const double\u kRadius=10；
常数double _kBorderWidth=3；
类MyPainter扩展了CustomPainter{
我的画家（）；
@凌驾
空心油漆（帆布，尺寸）{
最终校正边界=校正自矩形半径（偏移量0和尺寸，半径圆形（_kRadius））；
最终校正阴影=从矩形和半径校正（偏移量（0,3）和大小，半径圆形（_kRadius））；
最终阴影绘制=绘制（）
..行程宽度=_kBorderWidth
…颜色=颜色
…风格=绘画风格笔划
..maskFilter=maskFilter.blur（BlurStyle.normal，2）；
最终边界绘制=绘制（）
..行程宽度=_kBorderWidth
…颜色=颜色。白色
..风格=绘画风格.笔划；
画布.DrawError（rrectShadow，shadowPaint）；
canvas.drawRRect（正确的边框，边框绘制）；
}
@凌驾
bool shouldRepaint（CustomPainter oldDelegate）=>true；
}

使用自定义

形状订单应该是可能的

-请参见此处的示例代码：@pskink感谢您的回复。但我不认为这能解决我的问题。正如您在第二个代码段中所看到的，我尝试了

shapecoration

，使用

RoundedRectangleBorder

作为

shapeorder

。但问题在于阴影。我编辑了这篇文章，并附上了我的代码的截图。@pskink我明白了，谢谢！我来试试这个。