Flutter Onboarding Screen/Flow Tutorial - Onboarding Screen UI, Introduction Screen Guide

in today's video I'm going to be showing you guys how to create a stunning onboarding flow for your flutter application our application is going to have the following functionality we're going to be presented with a screen that is going to display our onboarding flow and then we'll have the ability to either swipe through our onboarding flow which is going to prefent different pages to us with different pieces of information and if we want to swipe in another way we can also use the buttons presented at the bottom to go from one page to the next and finally we're also going to be using the progress indicator at the bottom in the form of dots to actually signify that the user how far along they're in the onboarding process and they can click on these dots as well to actually move through the onboarding flow so with this said let's get into it so to get started the first thing that we're going to be doing is taking a look at the dependencies for our project the only dependency that we're going to be using for this project is going to be a package called Smooth page indicator and as a side though links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so we're going to be copying the smooth page indicator dependency from pop dodev coming back and then coming to our pope. yaml file and here I'm going to be pasting it under the dependency section for my project and doing command save once this is done the next thing that I'm going to be doing is adding all of the asset file that my actual project depends on so in this case the only assets that we need to import are three image files so to do that I'm going to be coming to my actual base folder here I'm going to be creating a folder called assets underneath of that I'm going to be creating a new folder called images and then underneath of images I'm going to be opening it up in finder or you're going to be opening it up in file explorer if you're using Windows and then here what I'm going to be doing is actually dragging and dropping in the actual images that I want to display so my images are going to have the name accordingly for each of the screens on the onboarding flow so for onboarding one we show this picture onboarding two it's this one and outboarding three it's this one so now that this is done what I'm now going to be doing is closing down the assets folder coming back to my pspec DOL file scrolling down to where it says flutter and then I'm going to uncomment the assets line and then I'm going to uncomment the next line after that as well make sure that the indentations are correct and then I'm going to say that flutter is going to make available all of the assets that are under the asset / images folder like so and do command save once this is done I'll let flutter PB gets do its magic make sure that all of the packages are downloaded there are no errors and after this I'll start debugging my application welcome back everybody so now that our application is running let's quickly take a look at the basic skeleton of our application in my main do. file I have my class which is my app which has a build function which returns a material app and the home property for that is set to my widget which is called onboarding page which is a stateful widget besides that there's nothing else the stateful widgets built function returns a scaffold so we're going to be starting from the ground up so the first thing that I want you to take a look at is the actual design of our onboarding flow we're going going to have some content that is going to change on our page which is going to be the stuff that includes the image the title the description as well as the actual button and the text on the button and then at the bottom of it we're going to have a indicator which is going to indicate to us how far along we're in the onboarding flow so this basically means that we can divide our UI into two parts the actual indicators and then all of the other stuff that we can swipe through so to begin building my actual onboarding page I'm going to set the body property for my scaffold to be a column like so and then I'm going to set the children for this column to be an empty list for now once I've defined my column the next thing that I'm going to be doing is actually wrapping it with the padding I'm going to be doing that by doing control shift r on my keyboard and then I'm going to be wrapping the column with a padding Widget the padding here is going to be ented S symmetric and then I'm going to say it's going to be 50 pixels from the top and bottom and this is going to be on the vertical axis like so so once I've done this we can now move on to our column for my column as I had alluded to before we're going to have the this top part which consists of everything such as the image title description and then the button and below that we're going to have our actual smooth page indicators so let's build that first so to do this the first thing that I'm going to be doing is that I'm going to be adding a smooth page indicator widget to my actual column and then we have to provide it with two things one is a controller and then one is the amount of actual dots it's going to be showing so where can we get this controller from well this controller is going to be of type page control so let's quickly create it so to create a page controller what I'll do is that I'll go to the top of my class and I'm going to say that I'm going to define a static variable on my class and you'll see why we're defining a static variable later on but a static variable final page controller called page controller then I'm going to be setting it to a new instance of page controller like so and then I'm going to say that the initial page is going to be zero and once this is done that's pretty much all we have to do so now I'll copy my page controller I'll give it to my smooth page indicator then finally for the count let's do three and we'll change it later and do command save so now I can see my smooth page indicators so quickly what I want to do is actually fix the positioning for my column so for that I'll set the main axis size main axis alignment and cross AIS alignment for my column like so and do command save and now that this is done we can move on to the next part which is to actually add all of the UI which constitutes the stuff that is above these indicators so if you look at our design you can kind of see that the actual layout of all of the content is going to be pretty similar only the stuff that's going to change is the actual content so we're going to be showing an image at the same spot going to be showing a title at the same spot but the title is just going to change so what we can do is actually create a reusable component that we can then use again and again within our actual widget tree to show all of these different onboarding screens so to do that what I'll do is that I'll come to my lip folder and here I'm going to create a folder called the widgets once this is done I'm going to create a new file under this and I'm going to call this onboarding card do dot once this is done I'm going to create a stateless class I'm going to call this onboarding card and then I'll do command save and for now for this class what I'll do is just return a sized box like so and do command save once this is done what I'm going to be doing is that I'm going to be coming back to my onboarding page and what I'm going to be doing is now that I'm going to be adding a expanded widget to my actual column before the page indicator and then for the child for this expanded widget I'm going to say that we're going to be using a page view and for the page view we're going to be defining a controller and this controller will be the same as our page controller and now you might have a question as to what is a page view well a page view is a vidget that allows us to embed children within it and then we can go between these children using a swiping gesture by defining our actual page controller so now we're basically using the same controller and linking our page indicators with our page view so all of the information shown is homogeneous and it reacts to the changes on the screen and you'll see how this works but for my page view similar to how a column might work or a list view might work it expects a list of children and these are the childrens that we can swipe between so for now it's empty but now what we're going to be doing is that we are going to be going to the top of our class and here I'm going to be defining a list of widgets list of widget and I'm going to say that the name for this is going to be called onboarding Pages let's say this and then what I'm going to be doing is setting this equal to an mty list and then within this I'm going to be adding our onboarding card like so and then doing command save so now if I go back to my onboarding card and I'm going to quickly change this to a container and then I'm going to give my container a color which is going to be colors. red and I'll do command save and then what I'll do do is that I'm also going to be giving my container a specific height and width so to do that I am just going to be copying and pasting these values in so the height is going to be 80% of the height of the screen and the width is completely to command save if we come back we take our onboarding Pages we go back to our page view and we set the children's list to be now our onboarding Pages list and do command save you can see that now our page view is being shown and our page view is displaying the first child in this list which which is our onboarding card which has a red color so now what we can do is actually style this properly and then we can reuse it again and again so the first thing that we're going to be doing is for our onboarding card is actually adding our image so to do that I'm going to come to my container I'm going to say that the child for this container is now going to be a column then the column is going to have a children's list and I'll do command save the first one is going to be a image so what I'm going to be doing is saying that we're going to have image. asset and then we're going to pass in a name so for now what I'll do is that I'll say that it's going to be an empty name so we're not loading anything and then what I'll do is that I'll come to the top of my onboarding card and here I'm going to say that I'm going to Define a variable which is going to be final string image and I'm going to say that this is something that's going to be passed as a name parameter to this class like so and then for the image. asset will pass it this image like so so this is going to be the path to our image to command save and then I'll stop running my application for now come back to my onboarding page come to where I have my onboarding pages list say that the image here and then I'm going to say that the image here is going to be assets SL images SL onboarding 1.png to command save and now if we run our application again hopefully this time the image should be displayed to us welcome back everybody so as you can see the image is being displayed so now what I want to do is just basically fix the style in for this image so for that what I'll do is that I am basically going to be wrapping my image with an actual padding widget so for that I'll do command shift R and then I'm going to say wrap with padding and the padding in this case is going to be padding ENT sets. all and then 50 pixels from all side to command save and there we go and then the final thing that I'm going to be doing is setting the fit property for my image to be box fit. contain once this is done the next thing that I'm going to be doing is tackling the title and the description so to do that what I'll do is that after my padding widget here I'm going to add a column and the reason I'm using a column here is because I want to actually Bunch the title and the description together so for that I'm placing them within a column by itself and this way they're both going to be treated as a child of the parent column so this is the reason for that what I'm going to do is for the children's list I'll add a text the text for now is going to say let's just say welcome like so and then I'm going to do command save like so we can see welcome I'm going to set the text align property for this to be text align Center and then I'm also going to set the styling property for this to be the following and do command save and then what I'll do is that I'll copy this text and I'll add it once more but this time it's going to be the description so for now we can do lurm ipsum 1 2 3 4 5 6 description something like that let's just do this so as we can see it looks like this then what I'm going to be doing is basically setting the styling for this to be a bit different so let me update The Styling text align will still be Center and then since I want some space between the title and the description what I'm going to be doing is wrapping the text with a padding widget so control shift R again wrap with padding and this time the padding is going to be ENT sets. all 10 pixels from all sides like so so now we have our title and description so now the last thing that I want to do is show a material button down below which we can use used to actually go between the pages and actually show for each of our onboarding screens so for that what I'm going to be doing is that I'm going to be adding that to the main column not the column that we just created for the text so I'm going to come and I'm going to be adding it here and I'm going to say material button then for the onpress property for now we'll leave that to be empty like so to command save and then I'm going to set the minimum width for this button to be 300 and I'm going to set the color for this button to be the primary color from our color scheme that's derived from our theme and then finally I'm going to set the child for this to be a text widget that for now says next and then what I'm going to be doing is that I'm going to set the styling for this text to be just white text and that's pretty much it that's all we had to do so now I want to quickly fix the actual positioning and sizing of our elements within our column so for that what I'm going to be doing is coming to the very top where I have my main column and here I'm going to say that the main axis size is going to be maximum since I want the children between this column to be evenly spaced I'm going to set the main axis alignment to space evenly so the main axis for a column is going to be the vertical axis and then for the cross AIS alignment I'm going to do cross AIS alignment. Center and do command save so now we have an excellent looking page that we can utilize but right now if I go back to my on boarding page all I have to do is basically take this onboarding card add it again change the image to command save and now if I restart my application I should be able to scroll between the pages as you can see but I also want to make the title the description and the text to be dynamic within the button so how do we do this well to do this what I'll do is that I'll come back to my onboarding card here I'm going to say that besides taking in the actual path to our image we'll also take in a title we'll take in a description and we are going to be taking in a button text and then besides this I'm also going to be taking in a function which is going to be the function that will be responsible for actually doing something when the button gets pressed so we're delegating the responsibility of something happening when the button gets pressed to outside of this widget and taking that responsibility away from this widget then as we had alluded to before I'm just going to add all of these parameters as named arguments that have to be passed to the onboarding card when it gets created we're going to come back to our onboarding page I'm going to remove the second instance of our onboarding card and just work with the first one for now and here what I'm going to be doing is just adding the title and everything other that like that so the title for the first page is going to be the following which is welcome to coin.io then the description I'm going to copy and paste that in which is going to be this then I'm going to paste in the text for the button so in this case the text for our button is going to be button text which is saying going to be next and then finally I'm going to set the onpress property for now to be an empty function now if I restart my application you're going to notice that nothing changes and the reason for that is because we now need to utilize these variables within our actual onboarding card so let's go down let's see for the text where it says welcome now it needs to be title then we are going to come down to where the text for this description is now it's going to be description then we're going to come down to a material button where it says next it's going to be button text and then finally where it says onpressed now it's going to be a call to our function onpressed like so and that's pretty much all we have to do in command save restart our application make sure that everything works so now what I can do is just copy this onboarding card add it again and add it again once more and now we have three different onboarding cards which if I restart my application we can go through so now let's change the content of them so for the second onboarding card the image is going to be two for the third one the image will be three and then the title for the second one is going to be create an account or choose a course I just created these random ones like so and then the description let me copy and paste that in is going to be the following and then I am going to come to the button text which will still be next on press Remains the Same and then I'm going to come to the third and final one where we had updated the image already so the title in this case is going to be learn personally and then the description is going to be this and then finally the last thing is going to be that the button text now will say done instead of next because we've reached the last screen and do command save so now if I restart my application you're going to see that we're going to be able to scroll through our onboarding flow and once we reach the final fin screen the button says done and everything seems to be working but now what I want to do is actually add the functionality to our next buttons so when we click on next we go to the next screen as well so to do that what you can do is for the onpressed call back function I'm going to do page controller Dot and then we're going to use a function that's available on our page controller which says animate to page this expects us to give it a page this page corresponds to the index of the child we want to go to for the list that we passed to our page so from my zeroth child or my first onboarding card I want to go to the next one so the index will be one the duration is going to be duration and you can add any duration but I'm going to do long one and then the curve is going to be how we're going to animate between these two pages so curve Dot and you can do linear or anything you want so in my case what I'm going to be doing is Curse do linear and do command save like so and that's pretty much it so now that this is done I'm going to do command save restart my application and if I click on next it's going to take me to the next page so now I'll copy this code I will come back to my other onboarding cards on pressed and I'm going to paste this here like so and do command save and that's pretty much it so now if I go and update the index here to be two because from the second card we want to go to third one so the third is going to be on index two restart my application we should be able to go from the first to the second the second to the Third and then here we can Define whatever custom logic we want to Define on our done button to maybe navigate the user from our onboarding flow to our home screen so it works as intended so one last thing I want to do now is go to my build function for my onboarding page for the actual smooth page indicator I want to change the C here to not be this hardcoded three that we've defined here but instead of this be the actual onboarding Pages lists length and do command save and then finally I want to update the styling for the actual dot indicators as well so firstly what I want to do is Define what happens when we click one of these dots because if you click on them nothing happens so for that we have a function call called on. click where we get an index passed to us and we can use this index to do whatever we want in this case I'm going to be doing the same thing where I'm going to do page controller. animate to page but this time we're going to be animating to the specific index that we clicked on to command save and now you can see that we can go between the different pages using the dots as well if I change the Curve to let's just say bounce in and out let's just say restart my application you're going to see that now the actual transition between the pages is going to be a bit different so you can experiment with these to actually use different effects to animate between your onboarding flow screens but I'm going to leave it to linear since I like that and that's pretty much all we had to do so the final thing I want to do is just update the colors for this so for that what I'm going to be doing is defining the effect property for my smooth page indicator the smooth page indicator allows you to use many different effects such as worm expanding dot scrolling dots scale swap so you can use whatever you want in my case what I'm going to be doing is using an effect called expanding dots effect like so and then here I'm going to be defining the active color for this so the active color is going to be the primary color of our color scheme that we're going to be deriving from our theme and doing command save so now you can see the color matches the color of the button and then the dot color which refers to all of the dots which are not currently active that's going to be the secondary color of our color scheme that we're also going to be deriving from our theme and doing command save so now everything is looking fantastic so let's restart our application let's give our onboarding flow a final test so I can swipe through the screens everything looks good I can use the next buttons to go between the screens that looks fantastic as well and I can use the actual smooth page indicators to pull between the pages and all of the UI is updating according to how I added anticipated so with this said that's pretty much it for today's tutorial I hope that you enjoyed and learn how to create an onboarding flow for your flutter applications as always if you have any question comments or concerns leave them down in the comments below and I'll try my best to answer them for you and stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 2,473

Keywords: flutter onboarding screen, flutter introduction screen, flutter introduction screen example, flutter onboarding screen example, flutter onboarding screen only one time, flutter onboarding ui, flutter swipable pages, flutter tutorial, flutter walkthrough screen, onboarding screen, flutter onboarding screen ui, flutter tutorial - onboarding ui screen, flutter onboarding tutorial, flutter onboarding screen tutorial, flutter onboarding screen animation, flutter smooth page indicator

Id: yfdcj7M83D0

Length: 21min 20sec (1280 seconds)

Published: Mon Feb 12 2024