How to add a neon glow effect to an widget border / shadow?
Solution 1
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,
),
),
]),
Solution 2
use boxShadow property twice inside Container widget decoration. for outer glow use spreadRadius positive value and for inner glow use negetive value. sample code is given below..
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),
),
),
),
Comments
-
alexpfx almost 2 years
Is there any way to create effects like these using flutter (a CustomPaint with a special shadder or something like this)?
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; } }
-
alexpfx almost 5 yearsyes, I know it maybe could be done with shadows but I don't realize how...
-
Praneeth Dhanushka Fernando almost 5 yearsgive me a code for a widget you want to apply glow.. I'll show you
-
alexpfx almost 5 yearsI don't have the code for now. But I would like to draw lines using CustomPaint and apply neon to that line. I will update the question with an example later.
-
alexpfx almost 5 yearsI could add the effect to a container, as you suggested. But Is it possible to draw lines in a custom painter using this effect?
-
NullByte08 almost 4 yearshow would u apply that inner glow? the one in the rectangle