Elastic Slider in Flutter

I will only be explaining the process of creating an elastic slider here, you can find the complete code in the video below:

Alright, so creating an elastic slider wasn’t that hard. We just need a widget that can track mouse or tap movement and a painter that can draw according to the movement.

Simple? Of course…

Here is a sample code of the painter class.

‘dragPosition’ is being retrieved from the ‘GestureDetecture’ widget, which gives the live mouse or tap position.

Creating an elastic bar is that easy. Now, all we need to do is animate a few things and add a duplicate of the same bar and clip it to make it seem like a slider that has some progress values.

Check out the complete video for detailed info.

Well, that was short.

Hope you like it. Thanks