 Hello guys in this video, we are going to create the onboarding screen. So for that I will be using one dependency that is this introduction screen. So I just copy this go back into pub spec and just put it under the dependency. Just save it. Okay, so meanwhile it is creating. So let's create a new page with the name on boarding underscore page dot dot. So we will be designing our stateless widget over here for onboarding screen. So here what we will do we will just use the safe area first of all. And this inside which we will be using. So once it is installed, then you will be able to see this component that is introduction screen. So that's fine. So that said comma here and here we need to add a couple of properties. The one important is pages where we will draw our pages and then we need to have another let's say next. So next we'll ask for a widget. So whenever we will see some dots over there, I just show you. So let's add a quick icon over here and we will say icons dot let's go with the right side. Let's use this arrow. This one that uses way. So this is fine. And here inside the pages, we have to use page view model. So this page view model would have some properties like it would have some title. So let's say text and we can pass some text over here and the text actually this title I think is taking a string. So we don't need any widget. Let's quickly give it a string that say and same way we have another property that is body and for the body again, you can give some let's say description like say and the third one is we can use some images. So there is image property over here. So which is expecting one widget. So I have some images from a network. So if you have your local images, put it into the assets and you can use it accordingly. So I will use a network image and give it some source. So let me just show you a few images. For example, let's use this one and just save it. Okay. And what we need to do is just go to mean and instead of using this home page use on body screen. Save this and oops. Okay. So we have to use couple of more properties here. So you have to set this done property and okay, let's go back and here we need to use done property as well. So again for done we can use some text or you can use it icon as well if you want. So whatever you want you can choose. So let's say done is here. Let's try to check it out. So it is saying what you're done is going to scale to null or on done is not equal to one. So we have to use done and along with this we have to use on done as well. So these two properties are required. So let's stop it quickly and just go here and we just what we do once everything is done that is on done. What do you need to do? You can just simply navigate to something great function here and say go to home page. Okay, so we will define it over here. Just create this and here we just navigate simply use Navigator dot push replacement and just keep the context. And the route semicolon material page route and just use the builder and returning it to const homepage and this context we need to pass into this function. Let's pass it over here and done. So now we have done with done as well as on done. So it should not be showing any error. Okay, now you can see this design. So you can see one dot because there is only one this inside this pages. We have only one page view model. So what we do let me design one and we can design the rest of these. So we need some padding on the top. Let's go here and use some decoration that we have. Yes. So for this, we have this constant page decoration and insert the page decoration. You can use just is there any padding property your body padding. So we just need the image padding. So let's use an inset dot only. So from the top, let's give it something 80. Let's try. Okay, seems better. And same way we can use more decoration over here or you have this body textile where we can give some textile and here we can use this font size. Let's give it away for the body. And if you want, you can just use the color as well. Let's use colors. Colors start from let's give it to save this. And this is how it will look. And if you want to just give it purple, save it. So there's a body part and for same way, we can use as more property that is title textile. So here we can again use these and just copy this and put it over here. And this one we should make, let's say 24 and we can make font width to bold and the color we can keep it black. I think save this or you can make it purple and this one shouldn't be black. Okay. Oh, that's the design part for this. So on done, we have already done with that. Let me just click it and we will navigate home page. So let's restart and come back. The way this page is done, I will create two more pages, second, and just third one. And I just replace these images first, copy this, use it and the third one. Okay. So for third one, we just write well done and we'll say and second one. Okay, so after changing, you can just save it. And you can see now three words are coming over here. And this arrow is coming now, which was not coming earlier. So we just minimize this. Okay. So for three pages, let's keep it like this. And here you can see we have added the next arrow over here. So whatever you want, you can add it over here. And if you want, you can just use the color as well. Let's say color start purple so that it can have some matching. Fine. So now you can just drag like this, drag like this. And on the last screen, we are getting this done, this text as well. So on done, we have already navigating to the home page. And you can go back as well from the boards as well. You can go. And if you want skip, then there is a one more option. Let's go here. And there is a property. Skip. So here it is also expecting one widget. So let's give a icon. And for icon, you can say I can start we have an escape icon. Let's use this for the time being and save this. I just restart it. So we are not getting an escape next. Okay, so let's try to give it some color. Okay, so once we added skip, still it will not work because there is one more property show skip button. So you just need to make it true. And once you save it, you will be able to see your skip button. And if you don't want to skip, you can simply write this text and just delete this. Okay, so that is your choice. Now when you go for skip, it will take to last screen. I just show it again. Click on skip. It will take to last screen. And if you want to just you go to home screen on the click of skip, then you can just use one more property that is on skip, which is again taking one function where again, you can call this go to home page. So that is your choice what you want to do. So I just save this. Now you can skip. Skip is always there. You can see skip is always there. If I click on skip, then it will take you to the home page. So that is all for this video. If you have any doubt, do comment in the comment section. Otherwise like share and subscribe. Thank you.