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

Answer 1

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,
            offset: Offset(0, 0),
          ),
           BoxShadow(
            color: Colors.pink,
            spreadRadius: -4,
            blurRadius: 5,
            offset: Offset(0, 0),
          )
        ]),
    child: FlatButton(
      onPressed:(){},
      child: Text("submit"),
      
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
    ),
  ),

Answer 2

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