Custom sliders in FlutterDavid AnayaBlockedUnblockFollowFollowingMay 26In this article, I will explain what to do when you need to change completely the visuals for a Slider in Flutter and it is not enough with the options provided for customization by the theme.
One of the things I like the most about Flutter is the number of predefined widgets available to build really amazing UI and how easily you can customize them to your needs.
But even when this customization is not enough, you can still dive a bit deeper and make it happen without things getting too messy.
I need a slider in my lifeEasy one.
Every single UI component library has a prebuilt component to draw a slider (aka range).
Flutter, of course, also has its own version.
Behold… the sliderIt looks quite basic, but it’s very easy to customize by wrapping it with a SliderTheme.
Leaving aside the logic behind, there are three main elements in the widget:the track: the lone that the slider thumb slides along.
the thumb: the shape that slides horizontally when the user drags it.
the overlay: which appears around the thumb when this is dragged.
Pimp my slider!By changing some values in SliderThemeDatawe can change it quite a lot.
Let’s try something simple, just changing the colors:Best Design Award for category: “Sliders”Usually, by changing sizes and colors we can get really cool results, but sometimes this is not enough.
Back to the seventiesRecently at work, I had to implement a very special UI component in Flutter.
The Affective SliderThe reason behind this is uber simple design is very interesting, but to me, the question was: how do I replicate this?Checking the documentation for SliderThemeData it seems changing the shape for both the track and the thumb is not straightforward.
We could always implement the component from scratch, as I explained in a previous post for a circular slider, but we would be missing much of the work already done here that glues the thumb and the track (and the overlay) together.
Luckily, there is a better approach.
It’s all shapesYou probably spotted in the previous example that in order to change the size of the thumb I used thumbShape: RoundSliderThumbShape(enabledThumbRadius: 8.
0).
This class is the one in charge of building the thumb element.
We just need to implement our own version to have full control of this feature, and we can do the same for the track and the overlay.
If we check the source code for RoundSliderThumbShape we can see that it actually uses the canvas to draw it, which means that we can do whatever we want basically.
Let’s see the code I need for my Affective Slider.
RequirementsOur design is actually quite simple and in reality, simplifies the original implementations of the shape classes.
Let’s see what we need:no overlayno colors: both the track and the thumb have to be white, but we need a black border for each of them, but with different widthsthe track has rounded bordersthe thumb has rounded borders and it’s not a circle anymore, but a rectangleno need to care for the status disabledThe thumbOur class needs to implement (extend) RetroSliderThumbShape and override two methods: getPreferredSize() and paint().
We are in canvas territory now, so we need to draw.
As we need a border, we need to draw two different rectangles: the inner (in white) and the outer (the border, in black).
That’s what we are doing in the last two lines.
We usePaint class to choose the color and the width of the stroke, but the segment to draw is basically the same in both cases, a rounded rectangle that I build with a rectangle based on the radius provided.
The trackThis would be even easier than the previous one, if not for the rounded circles.
The same strategy, we need to build both the filling and the border.
In this case, I need to use drawPath() because of the rounded edges of the rectangle.
What we do is start from the top left corner position and draw lines and arcs until we have completed the drawing.
The overlayThis is an easy one.
I don’t need an overlay, so I can use the default RetroSliderThumbShape with thumbRadius as 0.
0.
The Affective SliderWe just need to use our new implementations in the slider.
To replicate exactly the design for the original picture we just need to compose our new slider with a few png files and layout widgets.
And sliiiiiideSummaryFlutter provides an out of the box solution for sliders which works perfectly fine and allows for color and size customization.
If we need more fine grain control we need to use the canvas, but we can still focus on the graphic elements and let the logic behind for Flutter, by using some specific options in SliderTheme.
That’s all.
Feel free to comment if you have any question.
Thanks for reading!.