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

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


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


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