How to add neon effect in your flutter project.

Ojas Jain

3 min readMar 7, 2022

Does the above two images please your eyes? Would you like to add these effects to your flutter project?

Approach :

Let’s break down the above effect into different components :

1 : Light source i.e. the central part.

2 : Light. i.e. the area near the central part.

To create the light source, provide the border width of the container and for light spread effect provide a shadow to the container with a blur radius which is greater then spread radius to create a better effect.

Below is a example to create a container with neon effect. In this example, container color is set to black. which creates a sense that the light source is attached on a solid object. If the container color is removed then it will look as if just the lights are connected in a shape, and there is no solid object attached to it.

Code :

Container(
    decoration: BoxDecoration(// Light. i.e. the area near the central part.
// shadows creates the light spread part      boxShadow: [
        BoxShadow(
          color: Colors.deepPurple,
          blurRadius: 60, // soften the shadow
          spreadRadius: 30, //extend the shadow
        ),
      ], 
      color: Colors.black, borderRadius: BorderRadius.circular(10),   // Central part. i.e. light source
// border colors create the light source part.      border: Border.all(
              color: Colors.purple.shade100, 
              width: 5,
          ),    
     ),// Pass a widget to the child, to get the neon version of the same     child: Container(width : 300, height : 300,),
    
);

Result :

Image 1 is the result when container color is not set implicitly. Image 2 is the result when the container color is set to black.

Now if you want a neon point then simply set the child as SizedBox of width and height zero. like the below code :

SizedBox(
  width: 0,
  height: 0,
)

If you want a neon Line then simply set the child as SizedBox of width and height zero. like the below code:

Container(
  color: Colors.purple.shade100,
  width: 100,
  height: 2,
)

Flutter libraries for Neon Effect :

Now you got the concept behind the neon effect, there is no use of using same boiler plate code again and again and create different neon themed widgets. There are a few libraries that does the for you. You just need to call the methods.

1 : neon_widgets :

This package is the complete neon solution. It provides Neon widgets with and without flicker effect.

This package provides most commonly used widgets like chat components, search bar, buttons, containers, lines, points, progress bars/ indicators, add buttons, and many more. These widgets can be used with our without flickering effect.

License : MIT

pub link : https://pub.dev/packages/neon_widgets

GitHub link : https://github.com/ojasjain24/neon_widgets_flutter