Neon Light 💡 effect — Flutter

Vijay R
vijaycreations
Published in
2 min readAug 4, 2020

In this article we will be discussing how to add glow effect for widgets in flutter.

Video Tutorial

Overview:

  1. In the above image the first child i.e., the container widget [login] is made to have a glowing effect around the edges using the box-shadow parameter.
  2. Next the text widget [vijaycreations] is made to have neon light effect by adding the neon dependency in pubspec.yaml file.

Dependencies:

neon: ^0.0.1

Implementation:

Let’s start implementing the widgets one by one.

Login Container widget:

Let us create a container widget and specify the width and height as required and then add the decoration parameter as follows.,

Text Widget

We will be making use of the above dependency (neon) for this text widget to have the lighting effect.

Thus we can apply lighting effect for any widget as desired.

Get the complete source code here:👇
https://github.com/vijayinyoutube/lighteffect

Other articles you may like.,

Image Filter in Flutter

Enabling Flutter Web

Animated Icons in Flutter

Best VSCode Extensions

AnimatedContainer Widget in Flutter

GradientText in Flutter

Custom Clipper in Flutter

Carousel Slider in Flutter

Flutter BLoC Pattern

Flutter Tutorials

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel vijaycreations🚩

Thanks.,

--

--

Vijay R
vijaycreations

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: calico.takeoff_01@icloud.com