How to add a neon glow effect to an widget border / shadow?

Question

Is there any way to create effects like these using flutter (a CustomPaint with a special shadder or something like this)?

enter image description here

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;
  }
}

Could you find a way to accomplish this for a custom shape painted container? Like the "Hustle" image? I am trying to solve it myself and I think it comes down to coding a custom shadow function using shaders. However I am lost and I could not see how Flutter is drawing its shadows under the hood. Maybe it is all the way down in the skia graphics engine? — aytunch, Feb 20 '20 at 14:55

score 18 · Accepted Answer · edited Aug 10 '23 at 08:39

18

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: const Color(0xFF000000).withAlpha(60),
        blurRadius: 6.0,
        spreadRadius: 0.0,
        offset: const Offset(0.0, 3.0,),
      ),
    ],
  ),
),

edited Aug 10 '23 at 08:39

Abdelftah Ahmad Zowail

3
5

answered Jun 03 '19 at 03:46

Praneeth Dhanushka Fernando

3,033
2
18
19

yes, I know it maybe could be done with shadows but I don't realize how... – alexpfx Jun 03 '19 at 17:14
give me a code for a widget you want to apply glow.. I'll show you – Praneeth Dhanushka Fernando Jun 03 '19 at 17:15
I 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 Jun 03 '19 at 17:19
I could add the effect to a container, as you suggested. But Is it possible to draw lines in a custom painter using this effect? – alexpfx Jun 04 '19 at 01:32
how would u apply that inner glow? the one in the rectangle – NullByte08 Aug 04 '20 at 01:41

score 9 · Answer 2 · edited Feb 25 '21 at 09:00

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),
      ),
    ),
  ),

How to add a neon glow effect to an widget border / shadow?

2 Answers2

Linked