One of the great thing about Flutter is how easy it makes creating custom UI. In this tutorial we are going to see just that.
First of all, lets stop and think for moment about what we need to build. So, we should have a slider, and display the percentage filled at the top of it.
Before anything, its clear that we would need to maintain a widget which displays kind of a progress bar which shows a given percentage filled. When building an UI, its better to think out the widgets which are not going to have any state of their own but will display something according to what they were given by their parent.
So, lets declare the widget
This widget is quit simple, we take in the percentage completed and the colours for the positive and the negative parts, the main container takes the negative colour as its background as we are going to draw the positive part overlaying it. Its child is a Row, though it contains just one child, I have kept it so that you can add another Container which would show the negative part explicitly or show some information in it (for example, the remaining percentage ). The width of the Container showing the percentage completed is calculated as by taking the same percentage from the total width of the container.
Next, lets start with the main App class.
Clearly, now we have to declare the MyHomePage class, now this class should be able to use the CustomSlider widget we wrote above and handle the gesture detection part, where the user drags to increase and decrease the percentage shown by the slider.
This has to be a stateful widget because we have to keep track of the percentage. Here we have declared the colors and kept the initial percentage to be 0.0. Also notice, now we have a Text displaying the rounded off percentage, which is centered on the screen along with our CustomSlider.
Now, notice we have surrounded the CustomSlider widget with a GestureDetector widget. Our next job is to breathe life into this and use the GestureDetector widget to catch the user’s drag events.
Let’s see the code to do just that.
This is again the full code with the drag part added. The GestureDetectorwidget takes in the onPanStart, onPanUpdate and he onPanEnd properties to handle drag gestures. I hope the names are self exclamatory on what they do.
To understand how much has been dragged, we store the position where the drag is starting from, and every time the user move his/her finger, a distance is calculated in the onPanUpdate function. The distance is then divided by 200, as it was our width for the slider. Then we simple add that to the percentage and clamp it from 0.0 to 100.0, which means the value wont be able to exceed these bounds, which are natural for a percentage value.
Just this would give you a custom slider… do play with this and show us what variations you made.
Click Here to get a copy/paste friendly version of the code.
