如何为小部件边框/阴影添加霓虹灯发光效果？

Question

有什么方法可以使用 flutter 创建类似的效果（带有特殊着色器的 CustomPaint 或类似的东西）？

例如。我有这个容器，我使用 CustomPainter 在上面画了一些线。我可以像图片一样使用霓虹灯效果绘制这些线条吗？ Paint 类有一个着色器属性，我认为可以设置该属性来实现此目标，但我不知道如何设置。

Container(
          color: Colors.white,
          width: 300,
          height: 300,
          child: CustomPaint(
            painter: NeonPainter(),

          ),


        ),



class NeonPainter extends CustomPainter {
  Paint neonPaint = Paint();


  NeonPainter() {
    neonPaint.color = const Color(0xFF3F5BFA);
    neonPaint.strokeWidth = 2.5;
    neonPaint.shader = /// how to create a shader or something for that?
    neonPaint.someOtherProperty///

  }

  @override
  void paint(Canvas canvas, Size size) {
    drawLine(canvas, size.width / 2 - 50, size.height / 2, size.width / 2 + 50,
        size.height / 2);
    drawLine(canvas, size.width / 2 + 50, size.height / 2, size.width / 2 + 100,
        size.height / 2 + 50);
    drawLine(canvas, size.width / 2 + 100, size.height / 2 + 50,
        size.width / 2 - 100, size.height / 2 + 50);
    drawLine(
        canvas, size.width / 2 - 100, size.height / 2 + 50, size.width / 2 - 50,
        size.height / 2);
  }

  void drawLine(canvas, double x1, double y1, double x2, double y2) {
    canvas.drawLine(Offset(x1, y1), Offset(x2, y2), neonPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Answer 1

您可以使用BoxShadow小部件..您可以设置颜色，blurRadius，SpreadRadius和偏移量来实现您想要的..

请注意，在示例中我用它来获得阴影..但是如果正确设置属性，您可以获得辉光..

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    boxShadow: [
      BoxShadow(
        color: const Color(0xFF000000).withAlpha(60),
        blurRadius: 6.0,
        spreadRadius: 0.0,
        offset: const Offset(0.0, 3.0,),
      ),
    ],
  ),
),

Answer 2

在 Container 小部件装饰中使用 boxShadow 属性两次。对于外发光，使用 spreadRadius positive 值，对于内发光，使用 negetive 值。 下面给出了示例代码..

Container(
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(18.0),
        ),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.pink,
            spreadRadius: 4,
            blurRadius: 10,
          ),
           BoxShadow(
            color: Colors.pink,
            spreadRadius: -4,
            blurRadius: 5,
          )
        ]),
    child: FlatButton(
      onPressed:(){},
      child: Text("submit"),
      
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
    ),
  ),