Creating beautiful bulb animation with Flutter

1 min readJul 19, 2022

A few days ago, I saw someone make a similar animation using SwiftUI. Seeing this beautiful animation, I also think of giving it a try using Flutter.

Things covered in this article:

i. Custom paint

ii. Draggable

iii. Radial gradient text styling

iv. Position of the widget using render box

Let us start by creating the bulbs first,

After creating the bulb we need to make it draggable throughout our screen.

There is a built-in Draggable widget from flutter.

Now let us draw the wire that starts from the initial position and connects the bulb.

The final and most important part of this animation is text styling.

So let us provide text some styles.

Now keeping everything together in the stack,

And here comes our beautiful light animation made with flutter.

Feel free to connect with me on Linkedin or visit my site

Buy me a coffee