Flutter has an awesome widget for making Stepper. Using which we can make both horizontal and vertical steppers. You can check from their documentation. But it doesn’t provide much of a customization. So, why not making our own like the gif? Let’s get started.
At first we will make a new class
NumberStepper, We will define some properties like
lineWidth inside the class.
Inside build widget we defined another method
_steps() that return a
List<Widget> where we concatenate the Step Circles and Lines connecting them.
getInnerElementOfStepper() method returns inner element according to current step of stepper. If the current step is greater than step index it shows checked icon. If the current step is equal to the index it shows the number of that step. And if the current step is less than the step index it shows blank circle.
We also define colors for different states of stepper.
So this is all for our
NumberStepper Class , now all we need to do is use it from anywhere in your application.
So, here comes our final output.
to handle the
currentStep value with those Back button and Next button, you can use this code.
This is how we can make a custom Number stepper. You can do a lot of customization if you want.
This is my first article on medium, Hope you enjoyed it. You can find the full source code here