有什么方法可以使用颤动(具有特殊阴影的CustomPaint或类似的东西)来创建类似效果?
例如。我有这个容器,我使用CustomPainter在其上画了一些线。我可以像图片一样使用霓虹灯效果画这些线吗?Paint类具有一个shader属性,我以为可以实现该目标,但是我不知道如何实现。
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和offset来实现所需的效果。
请注意,在示例中,我使用它来获得阴影。.但是,如果正确设置属性,则可以得到光晕。
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,
),
),
]),
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句