Making a Custom Number Stepper in Flutter

Number Stepper in Flutter

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 StatelessWidget named NumberStepper, We will define some properties like width, curStep, totalSteps, stepCompleteColor, currentStepColor, inactiveColor and lineWidth inside the class.

Number Stepper Class

Inside build widget we defined another method _steps() that return a List<Widget> where we concatenate the Step Circles and Lines connecting them.

Then, the 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.

Number Stepper Full View

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

Software Engineer