I have to create a rounded border with a shadow only on the border, like this:
(我必须创建一个仅在边框上带有阴影的圆形边框,如下所示:)
I have tried to create a container with no background color, a rounded border and a BoxShadow like this:
(我试图创建一个没有背景色,圆形边框和BoxShadow的容器,如下所示:)
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)),
),
The problem is that the shadow gets painted as if the rectangle was filled, so a solid shadow gets painted inside the rectangle, as you can see in this screenshot:
(问题在于阴影的绘制就像填充了矩形一样,因此在矩形内部绘制了纯阴影,如您在此屏幕快照中所见:)
I also tried this, but I got the same result.
(我也尝试过,但是得到了相同的结果。)
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)),
),
Is there a simple way I could achieve the desired effect?
(有没有简单的方法可以达到预期的效果?)
Or it is only possible with a custom painter? (还是只有定制画家才能做到?)
ask by Baalint02 translate from so