flutter - 如何在Flutter中创建带有边框阴影的矩形？(How can I create a rectangle with a border shadow in Flutter?)

Question

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

Answer 1

You can do it using CustomPaint

(您可以使用CustomPaint)

Container(
  child: CustomPaint(
    painter: MyPainter(),
    child: Container(
      padding: EdgeInsets.all(20),
      child: Text('text', style: TextStyle(color: Colors.white, fontSize: 30)),
    )
  ),
),

const double _kRadius = 10;
const double _kBorderWidth = 3;

class MyPainter extends CustomPainter {
  MyPainter();

  @override
  void paint(Canvas canvas, Size size) {
    final rrectBorder = RRect.fromRectAndRadius(Offset.zero & size, Radius.circular(_kRadius));
    final rrectShadow = RRect.fromRectAndRadius(Offset(0, 3) & size, Radius.circular(_kRadius));

    final shadowPaint = Paint()
      ..strokeWidth = _kBorderWidth
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 2);
    final borderPaint = Paint()
      ..strokeWidth = _kBorderWidth
      ..color = Colors.white
      ..style = PaintingStyle.stroke;

    canvas.drawRRect(rrectShadow, shadowPaint);
    canvas.drawRRect(rrectBorder, borderPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}