如何为小部件边框/阴影添加霓虹发光效果? [英] How to add a neon glow effect to an widget border / shadow?
问题描述
有没有办法使用颤振(带有特殊着色器的 CustomPaint 或类似的东西)来创建这样的效果?
Is there any way to create effects like these using flutter (a CustomPaint with a special shadder or something like this)?
例如.我有这个容器,我使用 CustomPainter 在上面画了一些线.我可以像图片一样使用霓虹灯效果绘制这些线条吗?Paint 类有一个着色器属性,我认为我可以设置它来实现这个目标,但我不知道如何实现.
For example. I have this container and I drew some lines on it using a CustomPainter. Could I draw these lines using a neon effect just like the pictures? The Paint class has a shader property that I thought I could set up to achieve this goal, but I don't realize how.
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;
}
}
推荐答案
你可以使用 BoxShadow 小部件.你可以设置颜色、blurRadius、SpreadRadius 和偏移来实现你想要的......
You can use BoxShadow widget.. You can set color, blurRadius, SpreadRadius and offset to achieve what you want..
请注意,在示例中我使用它来获得阴影.但是如果您正确设置属性,您可以获得发光...
Note in example I have used it to get a drop shadow.. But you can get a glow if you set the properties correctly..
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
boxShadow: [
BoxShadow(
color: Color(0xFF000000).withAlpha(60),
blurRadius: 6.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
3.0,
),
),
]),
这篇关于如何为小部件边框/阴影添加霓虹发光效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!