Hello in this video I'm going to show you how to implement the stepper class using steps. So what is the step class. So you've been on an application or website where you are performing some action, and he has small individual steps and the title 1234 ones, even the first one, you can click Continue submit something along the line will take to the next step, the next step Next up, so it's just a great way of easing the user through the process. And that's basically all the step is the step in each individual step. So what we're going to do is push data here. And in here we are going step by step, what we're going to do is create a variable so the fields can be live.

It can be a list of step, or steps. And I'm gonna call this stps. I'll just call St. I'll just call it steps equals and now what we are going to put in Alright, so we are going to put, like so you could put, you know, like so it's not really you know needed I'll leave it there. And what we do is put a step in here. And it's done in a linear fashion.

So the first step is step one, the second step is step two, etc. in here, there's a few different things that you can mess around with. And we are interested in the content and the title, this step state for us, you obviously is active. If it's not active, that means maybe it needs something else in the application before you can proceed. And subtitle very similar to title. So let's do these two.

So for the title, I'm gonna put text on literally step one. Gotta keep it simple. And for child, no child, it was content, because the more text, but there'll be like a visual difference along with the content of step on the same structure. Okay, so now I'm going to do is duplicate this so we got like five of them so 345 and then update on it. So to go by and let me do the same for here five and now we can literally put here, save that, let's see what we get. So there we go, we got, you know, five different steps.

As you see there's a slight format and you know, we didn't put any this icon in doting continuous Cancel button at the moment unless we actually We specifically programmed them, they will not do anything. So what we want to do is we want to do the current step. And the current step we are going to create a variable for this so that I create a variable, send me an int, and call it on the school current. Step equals zero. So zero is just the first step. Remember, computer started zero, and underscore current step.

So if I was to, let's say, make this a two, that would be the first step. I think these change but we want to know all on the bottom. So you go to answer continue, which is d continue. When this is clicked, we want to set the state and this is what we're gonna do with this is first, actually do this to underscore currents that cluster faders increased by one. Let's see, well, yeah. And I do want to change.

Let me just do a stop. Okay, so forget, continue. Because the next step goes in Next, I will not mention we're on the last step, boom, we get an error because we have not factored in the left, you have to do that ourselves. Luckily, because we created this other list, we can literally get the lamp. So in theory, if you say it on the score, current step is less than dot length. And remember, the length will return.

You know, in this case, five, because there are five steps. But remember, this stuff, you know, ranging between zero to 445. So we want it if it's less than four, and only then are we going to increment it needs to take away one If that is true, otherwise we won't come to. Okay, let me just do a kotlin slide that will fix the problem. There you go, click Continue. Click Continue, click Continue, click Continue.

And at the last one didn't do anything. For the last one, you could have an assignment as an extra testament to do that. So check if it is the last one. If it is, then you could potentially move to a different page. You know, you could get rid of all of this. You can do whatever you want, maybe submit the form whatever it is, at the moment, the no Cancel button implementation.

That's one way to do it. The next little clue here, on step cancel and on step, tap on step cancel, is when you click the Cancel button, I also want you to instead of taking or adding one, take away one. Remember when he gets to zero, you got to make sure you handle that accordingly. So as an extra tab, have a look at on step cancel out on step tap, which accepts an integer parameter is triggered when I literally just click on one of the steps. So what you could do is using that integer parameter, you could literally open up that particular step. And that is it for this video on the step by steps.

If you have any questions, feel free to drop me a message and unusual. I look forward to seeing you in the next video.