Flutter Onboarding Screen Design from Scratch without any library | Flutter Tutorial For Beginners

so if you are a developer or having installed more than a few apps on your mobile phone then you may have heard of an onboarding scheme or a getting started scale now if you are curious just like I was in feeling that a thing without using any package then you are at the right place so hello guys my name is Einstein and in this video we are going to learn how to create an onboarding screen for our flutter app in Android studio so let's get started so first of all we will create a new filter project you can do that through a GUI of your particular IDE which you are using or through or the terminal or CMD so I'm going to create a project and I'm going to call it app on-boarding then as I said I'm going to use Android studio I am going to open a new project so as I have already created one I will close that ok begin let me just have a screenshot of this so that will be easier for me to explain later and close that okay so let me open the newly created project okay so if we talk about the project and the things how we are going to go about this creating this then let me show you that okay so if you can see first of all this whole screen we have this bottom section and then we have this you can say a middle section so this is kind of a vertical arrangement of three things first is the image second is the text and third is this text so as we you may have already known that to arrange different widget in a vertical manner we use column so that is what we are going to use in that now there was an option that we can swipe and next same kind of container of widget will be shown so for that we are going to use page views okay we also have this option that at the bottom as well which is a horizontal arrangement of widget of next three containers next okay so that's how what we will do so for getting started what I am going to do I am going to get the asset images okay so for this project I have download the asset images from undraw which you can download as well so they are over here so for to import that to our project we will create an asset folder we will go to the root directory right click new directory I'm gonna name it assets we will go to abstract dot Yaman and uncomment this and this and remove that type assets slash so if you don't know about this basically this is how we are defined that we are going to use at assets from this folder the reason why I'm using the just slash not defining anything after that which means that we can use all the assets in this okay so that's how it works so I'm going to just take these I'm going to move it to them so we have the asset images now now we can start working on our main file so we can click on get dependencies so we are not going to use any of this boilerplate code so just ctrl a elite now first we will import material toward art and we will use void main this is the starting off over app we will say run app okay for this for the root we are going to use a stateless widget which is going to be my app and do the same here okay so that is done in Maya we will have a mud ad lab for title we can give something like app on-boarding then we will have a home we haven't defined anything for that so let's move a bit more we can have a trekker mode banner which I will set to false if you don't know about this this is basically at the right in our top right hand side there is a kind of red strip and there is a written like around at them or something like that okay so that is what is removed by this line okay so let's create our home so we are going to say stateless widget you can convert it in the starting as well because later on when we are going to use the page swipes we will be using a variable so whenever we are going to change any page for example I swipe to the next page that variable will be updated for the index and that will be reflected in this container if you don't understand it not a problem when I will do you will so yeah so we are going to convert this to a stateful widget I hope there is no doubt till this and if you do make sure whenever you have any doubt make sure to comment them below I will be happy to help you so for ever this home widget we are going to start with a scaffold okay in the scaffold as you can see there is no app bar so we are not going to use that we are going to directly move to body so in the body as I said this is a page view consisting of you know different you can say it a column with three widget image text index so let's clear it differently so that we don't have to write the same code again and again for each of the page view so we are going to create a new widget which is going to be called slider and tiled you can name it whatever you want this is a sport happening we will have a container I'm just using container so that later on I can provide it padding and all in container we will have a column in columns we will have children's inside children we will have initially image dot asset then the reason why I haven't given the name of the asset is because we are going to get it through here so basically we define them here so let me do it the table first sized box height let's give it around twelve so initially going to start with any height and when the our kind of a wireframe framing and all things are done then we can have it in design and you can see what is happening right so as you can see it consists of three things three widget one is the image text and text so this image will require the asset path name so I will call it image asset part the reason why I am defining it here and using it because what I want I don't want these to be set predefined something like that what I want is I will call them and I will give these properties to the widget and it will show those properties okay so then you will have another property title then we will have description now we will define the constructor I'm going to use lambda Prime at parameters which is basically this curly braces if you don't want to use that you can just remove that then we will say this dot title this dot description okay moving on now we have these hair but we want to also define these there right now I'm not providing any kind of styling not even the padding stuff because we just want to prepare the wireframe for us then we will work on those so if we go back to the body what we need is a page view right now the page view we can do it in different ways so the one way is like using a page you dot builder there is another way in which we can use page who can directly define the children separately I'm going to use page view dot builder it's a good practice reason being I am NOT going to you know give the data in this but fine what I'm going to do I'm going to create a new directory that is we going to be called data inside that I am going to create a dart fine I'm not going to name it you know something like data and in this we are going to initially create a class which is going to be a model okay and that model will be gone let's say slider model okay in that we will have three properties the first one to be image but then we will have a string title then we will have a string description now we will have the constructor image part item this description now the thing is I am going to use a list actually so I'm going to use list with slider model which is going to be named as get slides you can use any name you want over here okay so what I'm thinking is what I will do in this particular widget of mine where is a this home then it will start so there is a function in this in it so whenever the screen starts this is called okay so what I will do I will create a list over here list of types slider model not a model and I will call it slides okay and I can name it new list and slider model okay so we have slides okay so in the init state what I want to do is slide supposed to get slides now of course we don't have data in that so if you close this yeah in this list we are going to set the data and return the return the list of data okay now for setting the data to particular and then setting the data on the list we need to gather in settle methods so let's define them so void set image asset part it will take a string string will be get image you have to get image but ok and we will have image path sorry for that so image path is equals to get image to get image path put it after that this is the first similarly we will say void set title string and get title then we will say title is equals to be airtight book then we have the third property which is going to be set description train can get the description we will say description is equals to get Distortion okay so the setter methods are done now we will work on getting methods so if you don't understand these basically what I am doing I'm creating kind of a functions why I used void because it is not returning anything okay and in this why I use this thing because it will be the returning thing when I am saying I want to set a particular thing what I am doing I am setting the value when I am saying I want to return some value then I will be returning a value think so I can say it get image asset but now you can see we are not giving any kind of arguments or something here because we don't want to provide any value we just want to get that our value so what we will do we will return in there's a set path again image path sign then use a string and get title title a return title twin say string and get the description okay return description okay so these are all done I'll be a little bit quick as I think it's taking more time than expected or something but feel free to share how you feel about how fast I say something okay so now we are going to define this list and I'm going to call it slide same same name no problem because list and same thing over here sliders model okay now we will define the model over here so slider the model is equals to new slider model so what I will do I will do step by step so first step in get those texts actually so what we will do we use a slider model dot set image a set path so the images at path will be this okay so okay then it will say slide a model dot set title then we will get the title will say slider model dot set description then we will get the description okay done now as we have set it all these values to our model what next step is to give all these to assign this particular model to be added to our list so I will say slides dot add and slider model now we can just replicate or copy let me do one thing okay before that to make sure to call it after this because right now you can see our slide model have these values okay so what we will do we will remove all these values and then set these values and then add them to our list okay so that is done this is two this is three right now let's move on because I don't know things okay now this is a web page you don't build up okay in the scaffold we have h u dot builder page you tour builder will require some important things the first like item count which if you have to use something like list and all see it scheme same things will be happening over here so I will say slide start the length okay I can give the item count directly to be three because we know that that they will be three but what we want we will we want to make sure that this whole main file is not dependent on data so basically sorry kind of the kind of dependent on data I should say because what I want that if I remove or add any file over here it should be directly reflected on our page views and all we don't have to you know come in this main file and change things hope you got that now moving on to car in this builder we will have context and in index then we will say return now we have already prepared that tile which is it is slider type inside that we will say image a set path slides it's going to be index dot you get image acid part then we will say title slides index and dot get title description slides index dot get description okay let me save that and I think we are good to go for the first run anyways let it get built so I hope till now there is no doubts or something if you do coffee yeah so now we have a page view build okay so if image is open yeah so this is done we do need to like set the padding and some styling is there but now let's work on this so for this bottom section I am going to use a bottom sheet okay because at the last and least the last page view what I want this to be changed to get started you can call it a button but we are going to use a container for that okay so let's see if it's running was called on none okay let me see what I did wrong over here so we have it get slides okay we have to make sure that we are returning this go to run and restart okay so you can see it is there don't worry about the dad because it's just me in X's and I'm in mean X's alignment to Center okay now now let's move on to the next step which is the bottom section so for that where is the way this is and I can say bottom sheet yeah in the bottom sheet what I want as I said that initially when it is it is not the last screen then what we want we want to show these three options but if it is the last screen then we want to show the get started button so let's create available which is going to be current index and initially I am going to assign it a value of zero what is current in this current index will tell us what is the index is it first the screen is if the second is 83rd and so on okay so initially I have provided zero but to update it whenever the pageview are being slighted or something what we can do we can go in the page view and on page changed Val you can call it anything you want and I will say current state is equal to that in index for e equals two well so our index will be increasing now in the bottom sheet we will have a condition that if the current index okay we are going to use a conditional operator hover over here basically that if it is not equals two slides dot length minus one the reason why I used minus 1 is slides dot length if it have even one value it the length will be one right so what the current index starts from zero but the length starts from what so that's why we are going to use minus one so if the current index is not equals two slides dot length minus one then we will have this container or else we are going to have this container I hope you understand one okay next so in this container when it is not equals to the last one what we won't we won't this so what is it it's a row with three things so I'm going to say child row children's it will have next for this Texas say skip okay we are going to also give it rigid which is going to be a gesturedetector let seems in interval you can use whatever you want the difference between inkwell and gesture detectors these are actually used to get the on click kind of if you have used android studio we used unclick listeners on that right so if you want to know if that particular widget is being clicked or being tapped if we say for that we can use inkwell or gesturedetector both have this on tap property to that you can call a function or do something when it is clicked ok so in the difference is basically when you use inkwell there will be kind of you know when you click it's a splash color there is there right while in the gesture detector it will not be reflected over in the screen you can check both them out I will use the inkwell initial you know I will show it how it works okay so in the interval we will use on tab functionality and right now let's leave it there after that we require this so for this we can have a row with three containers okay now we don't want to write because these seems to be very similar when I will be in the six second page view this loop will be like the same size so all three of these are same so one option is we can write the code again and again for three times so on just creative widget differently for this so I'm going to create it inside this and we are going to call it a widget let's call it page index indicator something like that okay and this will take a boolean value that is current is last page so if it is a sorry is current I'm yeah is current is current page so if for example this one if we use this okay and we say it is a current then the size will be difference then compared to bit strong so this Ridgid will return a container that container will have obviously the width and height and all we will start with the padding because you can see there is a distance between these now you can see that at the horizontal sorry vertical level there is no need of padding because of course there is no object widget around it to be collapse or something like that but in the until their we have so we will go for an since it's not symmetrical we are going to use symmetrical and we will say horizontal around 2.0 will be enough okay now we will say about height so if it is a current page is current page we use a conditional operator over here once again we use 10.0 if it's not then we will use something like maybe six okay yeah now let's go with width it is current page ten point oh six point oh okay so we have to find height and width now let's use decoration why am I using decoration we want these to be circular initially all the containers are of rectangular in size or shape sorry right so for decoration we will use box decoration inside box decoration first of all let's define the color by the way you may already know that we can define the color outside s but whenever we are using decoration we have to define the color inside so sometimes you may encounter this problem that you have to find that color outside of the box decoration when you are using a decoration it will be an error okay so for colors we can see there is a difference in colors as well right so we will use that if is current page conditional operator if it is then we will use clay if it is not then we will use gray but a lighter shade of gray so let's say it to be 300 okay next as I said we need a border radius to make it circular so we will say border radius or circular around twelve will be fine now I can end this with a semicolon let's see wherever happens okay so do not be reflected right now but I can copy this okay now let's come back to here now there is one question as well as I said what we want to make sure that we can update the data in this file and this should be reflected in this space without any change in this okay so right now what we can do we can directly have something like you know row and the side row children's and we can directly say once to three and just giving the value I think you caught it like Falls or is current page something like that but we can directly define them like this but it will be very fixed like we can say three are there but if we increased one more in this for example it will not be reflected directly so for this what we are going to use we are going to use a loop of four as you may know for loop works like n pi equals to zero I sorry I smaller than slide Scotland then I plus plus okay okay so if this until this is happening what we want we want to use that page indicated and we want to see if this is the current page so we will have a condition over here that we have an index defined over here current index so we will say current index equals to equals to current index if it the current index is equals to equals to page indeed sorry if it is equals to the eye then we will say page indicator dot true if it's not then you'll see page indicator and false okay let me check that again for current hopefully it should work we'll see I'm gonna copy this skip and I will paste it same because these these are basically same but in Spain it's just that let me show you right now I will add one thing work you can see these are like are used like this for some reason the check it out okay this so the swipe is not working okay if you not haven't like what we did wrong was we have to set a state and then do this okay I know what why this is happened we need to have this child text so you can see this is working if we do go this right it's working but it's like at the corner hand at the left hand side we want to be we want it to be like covering the whole space for that we will use a property call me Nexus alignment if you don't know this already mean X is alignment means which this is the alignment of this X's so for row the me Nexus alignment is horizontal for column it is vertical so in the mean X is alignment what we warned there is a property which is space between if I say this you can see it have enough space between that right but now you can see like there should be some sort of padding or something because it's like doing it too much in that right so for that we can simply do one thing where is a container here we can give it padding or we can give it hide actually I'm gonna go hide and I will skip the platform platform make sure to use dot IO then dot is I so because in iOS we have this kind of you know black line that's why we are going to use bit more in this then compared with us so what did I get wrong okay so if I say no it looks fine right we need a padding as well so I will say agents X dot symmetrical we will say horizontal around 20 will be fine good it's looking good enough right now let me just change this to next sorry the next capitalized okay now we can see like the margin is not working for some reason so we will go back to our widget and see why it is not so horizontal to we have provided okay so what if I increase that to too much so it's not working properly right let's see what is the reason for that it is it's not symmetric horizontal okay it is a padding let's use margin then okay Martin works it looks good enough moving on now at the last screen we want to get started over here so you say get started now in this we will have by the way if you own that you know if I click on this you can see when I'm clicking on it it's having this kind of shadows right that is because of interval now right now according to the way we have given it padding that it's not looking good so what I'm going to do I'm going to change it to a gesture detector it's your requirement how you want to be to be set up now when little smart now let's work on this container now so like that we are going to assign it platform dot dot IO make sure this piece dot is fushia know I was platform God is iOS 70 and 60 okay so we should provide some colors as well so color start let's go with blue most use colors okay so it's not perfect we are going to go with it media query not off context dot size width and we want this to be aligned at the center so I will say alignment alignment alignment Center save that okay we want to give it some style it's a style colors color is to 5c I know if you just want to give it some font weight as well okay so for most part it is looking good and fine enough what we want now is when we click on next it should go to next page and when we will click on escape it should go to the last page so let's work on that now so to do that what we want we want to control the page view right so if we want to control the page view we will use page view controller this a page view controller each controller sign it control it comes to nucleus controller hopefully I'm not wrong in the name it's correct okay so page control we can provided initial page as well if we want from another page but hopefully it's majorly it's like from the initial page as well now we will do this page controller we will go to our page view and see controller and put this pH controller now let's come back to our on tap method and over there we will say page controller dot any made to page now which page do we want to go let's if we talk about escape we want to go to my slides so it slides start Len -1 why this this now basically we want to go to the last slide and because the length is actually going to be one more than kind of index and that's why we used minus one for the deviation we will use duration milliseconds and I'll say it to be 25 400 and we can use curves dot not linear you can play with these actually you know dot linear there are different properties I will see that we have some error somewhere where is it okay yeah sorry so if I save this now and click on escape good it's working let's do the same for this we will go up each controller dot any made to page in this condition we don't want to go to the last page we want to go to the next page so we will say current index last one similarly we will say duration milliseconds 400 you can change this very easily just change the millisecond if you want there to be you know if you feel that this is kind of bit quick or slower depending on your requirement okay so if I click on next next working perfectly fine just one thing left which I should do very quick just taking this and where is it there we go okay just a second it will not take much time for this and that's them sorry that's done and that is hopefully done now let's reload it so wrap okay it's not working what's the problem I should be loaded yeah one thing left which is giving this some kind of style so else I'll say it styled extra style the first thing which we need is the font size font size let's go with something like 20 oh wait oh wait dot 600 oh that's too much primaried good enough for a description we warned that first of all that extra lineman should be centered that's just what I want line it if you want like this you can keep it now that's what reformed wait for me it will not be too much for this because its description anyways and also we want the font size to be around 16 will be no good we need a padding as well and I think that's the last thing which we should do a horizontal 20 so if we see now we have this one problem this image is having a background of white so I'm just gonna go to yeah I think we can just do the colors to this itself right okay not the best option colors don't wait and we are done are we okay you know I have left a kind of a cliched for this if you want you can give it a background color and change it it just looks a bit different than the whole Aslam suspect okay so I feel it's done and we have finally created our onboarding screen for our flutter app in Android studio so hopefully you learned something today and if you have been following till now it's great to have you and I really appreciate the people who do watch the video because that's very important right so make sure to smash that like button make sure to smash their subscribe button the good content will be continuing to flow and I'll see you in the next one

Channel: Sanskar Tiwari

Views: 36,209

Keywords: flutter, flutter onboarding screen, flutter onboarding ui, flutter onboarding tutorial, flutter onboarding example, flutter onboarding template in flutter, flutter onboarding, flutter page controller, flutter page control, flutter onboard, flutter onboard tutorial, flutter ui ux, flutter ui tutorial, flutter user interface, flutter speed code, flutter speed design, flutter design, flutter swipe page, flutter swipe onboard, flutter swipable pages, flutter ui design, dart

Id: 4ECz8XSHF8c

Length: 39min 16sec (2356 seconds)

Published: Wed Feb 12 2020