Flutter Onboarding tutorial with GetX || 30 mins coding challenge 👨🏻‍💻

what's up everybody welcome back to channel codex i'm your host abzil and in today's video i'm going to show you how to create this onboarding screen inside flutter within 30 minutes yes in this video i have taken a challenge for myself like i want to create something really fast really important for you and what else will be better than starting something with onboarding right so let's see whether i'm able to do that in 30 second or not and if i can do that's well and good if not at least you will learn something out of this video so we'll be using a lot of shortcuts to create thing and you'll be learning all those stuff so make sure to watch full video and we're gonna start right after this intro all right so we have 30 minutes in our hand and we don't want to miss a single second so let's go ahead and fire up visual studio code and i'll create a new project for flutter okay let me save it somewhere inside yt folder where it went yes this is for youtube and i'm going to name the project as onboarding um onboarding demo yeah that sounds uh like what we are creating onboarding demo application all right so meanwhile our projects get created let me fire up a simulator so everything is up and running we are good to go and let's also fire up adobe xd where our design resides so basically we'll be creating this design like we have this vertical image like uh image after that there's a text for title there's a text for description and i'll be doing a little bit modification like i want this text to be in center which makes more sense to me and we'll be creating this design inside flutter okay so our project is up and running and let me see the timer as well just a second i i forgot to start the timer but i think we are still in good shape like we didn't started anything everything is just initialized so i'm going to start the timer uh right now all right so we have 29 minute and 54 second left okay that's a real advantage fine so first thing first i'm going to do some cleanup job i'm going to find out all the comments with this regex and replace with empty character so i don't want to work with those comments and because we are going to do this project in get x which follows mvc pattern so i'm going to create models then back to library views come on okay and then we'll create controllers so this will be the basic structure of our application mvc pattern i hope you people will like it and inside views we are going to create our first page which is onboarding page dot dart all right so this is the page where most of the time we'll spend and i'm going to import material so that we can work with widgets and i'll write stl which is the shortcut for status widget okay and name it on boarding page simple right and instead of container i will say scaffold perfect so this onboarding page i'm going to use from home i don't want to call the my home page and let's just resolve it perfect and then i'm going to delete this my detail page perfect everything is right and i'm going to give it a run i hope it doesn't take much time because we are limited on time this time limited on time this time what a time all right so just a nonsense of talking meanwhile the application is running and we have this sort of structure if because a lot of people ask me what is structure what is the folder structure you're following so this is what i follow generally i create folders uh for each separate thing for model views and controllers but obvious for themes for utils for general purpose all those stuff i create folders and keep it separate all right so our application is up and running and i also want my phone to be up and running so that i can see the timer in between all right so it's 27 minutes 16 second so let's go to scaffold and provide some body so what we want uh as our final design if you see at the exit design is this scrolling item so inside your onboarding screen you want to scroll the items and finally land to the page where it says start your application right so first thing we want is the page view okay so with help of page view we can provide this scrolling effect all right so i'm going to choose page view dot builder because i don't want to create each and every page again and again because they are all looking same thing so i'll use the item builder and generally builders take context and index all right this is perfect and i'm going to return a empty container as of now so all good we have the page view builder but we have nothing to show so we have to finalize what data we are going to show and to form the data we will use a model and this time i'm going to call it onboarding info so basically this model will hold information of the page like each page what data we have so i will say plus on boarding info and what information we need basically is one image name so i'll say image asset then we need title and finally we need description right and you can just create a constructor with a constructor with this all fills okay here we have it so we got our model ready with us now we need to create the data and where we will create the data that's a good question so i will as of now i will create inside a controller so i'm going to create a new controller right now i'll call onboarding dot dart perfect and let's call on boarding sorry onboarding controller and this will have a list of onboarding info i hope it all makes sense that first we created the model which will hold the page information and now we are creating a controller which will have all the pages which we are going to work inside our view so let's call it onboarding pages and it will be a list okay so far so good we have a good start we have only spent five minutes 24 minutes still left with us 24 minutes 30 second so we have item to work with what i'm gonna do is go to onboarding page and refer this onboarding pages from here so let's create an instance of final controller i know that you guys are thinking that i'm not working with getx controller it's a normal controller just wait a second i'll tell you when we need that so i'm going to say controller is equal to on boarding controller right this is what we want and now we can specify what is our list of item inside this page view so i can say controller.onboardingpages.length so now it will refer to those item residing inside the controller all right easybc so now we are in situation where we have to define how each item inside page view looks like okay so i will start with a column let's have a look at the design once so it's clearly visible that there's a column there's an image there's a text and another text and on top of that there are some elements in the bottom all right so let's minimize it as of now so i'm going to say what column all right and inside that i'll provide the children's first thing will be image from asset of course and where this image will be coming from it will be from the list of onboarding pass and we'll select the item at current index so whatever page is being displayed we'll select that so let me just copy this thing okay this is the list of items so at current index whatever page is being displayed will ask what is the image asset for your page all right it's very simple thing and then similarly we'll apply it for title and let me just copy it right from here title and for description as well just to save our time now we have all this information but still our item count is zero because we don't have any element inside our onboard onboarding pages right so nothing will show up now it's time to add some element here so i'm going to create real quick onboarding info the image asset we have to write the name of image then the title then the description so let's go ahead and add images real quick what you have to do is go to the root folder click somewhere here and create assets just to manage our assets properly and i'm going to add onboarding images which i already generated from this adobe xd design if you can see over here i have all the images with me so i'm going to bring this three image inside my assets folder so remember as soon as you bring assets or add any asset to your project initially like first one time you have to do the setup you have to tell the pub spec where your images reside and the easiest way is to scroll down till you find this asset command just uncomment these three lines so now flutter knows where your asset resides and of course it's not there in the images folder so what we have to do is delete everything and we are not going to specify each and every image separately we'll just say that our assets reside in this asset folder so this asset over here is the name of your folder you can keep it whatever you want okay these are some basic things but uh because it's a basic tutorial i want to cover basic point as well and let me check the timer we have 10 minutes like 10 minutes past we have 20 minutes left with us so we have to be a little bit fast all right all right so first onboarding page will have asset called order right this is our asset let me show you order.png the title of course i'm going to copy from here come on be fast be kind on me okay and the description is this guy oh there's a new line character uh i hope everything is fine perfect now first element got added and you can see that as soon as we added the first element the item also got updated over here right but we cannot scroll because there's only one element there so let's go ahead and add another elements second and third element oh what's wrong here okay and this time the image will be for the second page cook and for the third page it will be it will be deliver right and now hopefully you can scroll through it good progress right and the title and description remains same so we have to change that real quick let me go to adobe xd and copy this title so many clicks okay and then we'll copy the description [Music] come on again we have space over there in the design so i have to a little fast i don't want to lose in my first target even if i lose nothing is going to happen but yes i want to achieve that target done we have all the three pages in front of us perfect so it's time to give some style uh it's time to stylize the page uh stammer in between sometimes never mind it so let's go ahead in the onboarding page okay image is fine and first thing first what i will do is i'll provide the alignment so i want everything nice centered which is here okay and then in between i want some spacing so let's go ahead and give some size box you can use padding for that but somehow i like to give a size box in between personal preferences both works fine okay now it's looking fine and now it's time to stylize our text uh yes our text widget so let me give a font size of 24 let's see how it looks it's fine so same style i'll copy and paste to description as well here we can keep it something small say example say for example 18 yeah that looks fine and also let's make it bold so we can make a font bold or light by providing font weight and i can say weight of 500 which makes the font bolder and also you can see that the description text is like taking the full width and i don't want that i'm going to provide some padding and not in all direction i want in only symmetrically horizontally so many leaves symmetric padding in horizontal come on it's not giving me suggestion okay better or i can say 64. yeah much better and one more thing i think we should provide is alignment so text aligned i want this looks perfect so we have the onboarding screen partially ready like we can swipe through the pages we can see the different title details and everything and we still have 15 minute and 55 seconds so almost 16 minutes left with us and this is the time to add these little details like this indicator over here which you can see which will tell which page you are on okay so let's go ahead and utilize get x now to manage the state like we are on which page and how to update that circular thing stuff like that okay so inside body the first thing which we have like the only thing which we have is this page which is swiping so on top of that we want to add these three dots all right so i'm going to wrap the page view inside stack and we don't have that option directly so i'm going to wrap it with row so that we get this structure of children and then i'm going to rename it with the stack so if you have seen my basic uh videos you must be aware of the shortcuts these tricks and if you haven't you did a big mistake just kidding this is this shortcut is for you guys as a basic tutorial okay so inside the stack we have the first element which is our page view which is which will be behind and on top of that i want to add these three uh little dots and if you see closely like these are small circles in the horizontal direction so i'm going to create a row for that so let's go ahead and add row widget and children of course i'm not going to create three dots manually this time i will use list dot generate now what it will do you can provide the length of like uh item or length whatever you want to generate and it will generate each item uh based on that i messed up here but anyways so we have to provide how many items we want basically and we already have that we provided that in page view so i'm going to say onboardingpages.length this many items we want which is three as of now and for each item don't return null return something meaningful okay container okay now it's happy and now for the container i'm going to give some random width and height say for example 12 height of 12 let's provide some decoration [Music] color i want colors dot red okay just to see it's working or not and you can see on top here something got added uh i'm quite sure you didn't notice but i know because i have tried this before so what we can do is we can wrap everything inside this body thing inside a safe area so that it doesn't go inside the notch part okay if you're working on android you will not notice it but because flutter works on both android and others so you have to be careful about that okay so you got these three items over here and i think we have to be a little fast because only 13 minutes left all right so we can see this thing and let's give some margins so that we can see some spacing i think four will be fine okay and let's also make this rounded perfect so we got three dots but it placed on the top because uh because of this zero zero coordinates it starts on the top so we have to position that manually in the bottom and how we can do that inside stack you can use this widget called positioned and here you can position it like whatever x and y coordinate you can provide and it will position like that on based on the left and right and top and bottom so i want from bottom it should be 20 pixel away from the bottom so it will immediately come down and from left hand side i want again 20 pixel so this is coming on the right place which is fine but still uh we don't know like which page is selected so all are read so basically what we have to do is we have to find if the selected page is at the current index then we have to make it red otherwise it should be gray something like that so what we can do we can go to our controller and implement that functionality and now comes the get x in picture which for you for which you all guys are waiting all right so let's go ahead and add get x package and what you have to do is go to the dependency don't go inside dev dependency you have to use this one and say get and you can be specific you can go to pub.dev and specify the exact version but i'm going to say any version is fine with me all right so it will load the package meanwhile and let's import some classes which we are going to use so i'll be saying get state manager right and then we'll extend our controller with get x controller so this is how basically uh this is one of the example where you can see that without using any package how i was managing my code with mvc pattern and even if you add get x controller you can still use the same pattern so that is a coding practice or like organization thing you can say let me check the time uh we have 10 minutes of course we can do something good in that so let's create a variable and i'll call it selected page index so here we will have the information which page is selected so by default it will be zero and this is the important part i'll make it observable obs means observable so anytime the data changes it will notify to our visual so our views will get updated depending on the data change right so i'm saying selected page index 0 and now we have to do a very simple thing inside our view i can just close this model it's not required anymore okay simple thing is controller dot selected page index is equal to equal to the current index of this guy like the current index of this element okay if it matches then use red color otherwise use gray color or any other color which you want uh some suggestion here okay because it's rx in so we have to use a value property here all right makes sense so now you can see the zeroth page is selected that's why the zero is highlighted press two are gray if i move that nothing happens the reason because when we move the page we doesn't really uh like we don't really update uh the selected index so we have to do that mechanism to update the index count as well and we can do that very easily what you have to do is go to your page view builder and there we get one event which says on page change okay and that gives you the index in return so whenever the page changes it will inform you at what index currently the page viewer is on okay so here's the cool thing that you don't have to write in tam method to update the selected index and all those thing you can directly provide that selected index let me show you how okay it's that simple because our selected page index is of type rx int okay because we created with the zero so it takes rx int and that itself is a method so wherever you are having uh you know a function which returns you the integer you can directly link your rx into there so you don't need to implement on int and inside that call that method nothing like that so it will directly update selected page index okay we have still seven and a half minute so now we are updating the value as well let's see if we get something to see uh still not there the reason now we are updating the value but now what is happening is we are not looking for the change so we have to inform our user uh interface like we have to inform our widget that look for the change uh in this particular area so like entire widget tree we don't have to refresh we have to refresh only the part of it so what i'm going to do is i'm going to say that this container is going to update so i'll wrap with the obx and i'm not getting that option to wrap okay let me do a do it a dirty way so basically what you're gonna uh want to do is wrap with obx um this way this extension which unfortunately not working for me okay now basically i have wrapped this container inside obx and this doesn't take any parameter it's very straightforward and now let's give it a try you can see that the index has the dot has changed to page two and if i move like this it has changed to page three awesome right so we got this feature also done in within our time so now we are moving to the final thing which is the button like uh we want to implement a button inside our page which will basically move the slider to the next page so user will be able to handle that okay so still we have six minutes left with us so let's see what we can do in that okay i'm going to create another position widget so it's like continuously 30 minutes i'm talking and like i can feel i'm breathing very highly all right so we have another position element and this time it will be right position 20 pixel away from the right side and from bottom 20 pixel again and the children will be floating action button okay so we got our button here i don't want that shadow so i'll say elevation of zero it's fine and the children the child of course will be the text property and it will say next as simple as that okay but nothing happens when you click on next so we need some functionality over here so what i'm gonna do is add this on pressed event and what happens on on press that we will write inside our controller so on next we have to slide the page manually right like using the code we have to slide the page so what i'm gonna do is create a controller for our page view so you can create controller here but i recommend you do it inside your controller so that your controllers and views are separated so i'm going to create where page controller and this is for our page view not for entire page but that sliding page okay and this will be of type page controller this is in bill inside flutter so you don't have to create this you don't have to worry about that this is inbuilt controller of the page that slider thing all right so we just have to link hook it up with the page view so i will say on top i can say here controller of this page view is controller dot page controller okay so you guys should not be confused with this controller controller so i'm going to refactor not refactor sorry i'm going to rename the symbol and say underscore controller so our page level controller is this one okay so the page view controller is this controller dot page controller i know a lot of controllers you are hearing but it's very simple uh trust me now what we have to do is on click of this button we have to somehow change this control like we have to tell this controller that move next so i'm going to create a small little method over here forward action whatever name you can give which doesn't accept anything and what it will do it will say page controller dot next page right and duration i can give 300 millisecond okay let's import the utility also from get x package so [Music] get x utils okay now i can simply say 300 milliseconds you don't have to write duration and all those stuff and curve i need curves dot ease makes sense right now we just have to link this method from the button right from here and as our method doesn't accept anything and this on press doesn't emit anything so we can directly link controller dot where it went forward action perfect so let's give it a restart and see what we have so far we still have two minutes left with us next it's going next and it's changing the indicator as well again i click next it's going to the last page it's changing the indicator again if i again click next nothing happened it just tried to push that page so we can write that validation also in this two minute okay and what i'm gonna do for that is i'm going to create one property which will tell me whether it's a last page or not so let's go ahead and create a boolean property is last page okay and basically what it will do is it will keep checking whether the selected index is the last index of the page or not so i'm going to say selected page index is equal to of course we have to check the value is equal to equal to onboarding pages dot length minus 1 so whatever the length of the onboarding page is minus one will give you the last index of the page and that we have to compare with the selected page index so that will tell you whether it's the last page or not and also we can while doing the forward action we can do a check over here so i'll say is last page if it's last page do something else do this thing okay let's give it a bracket all right go to home page okay if it's last page go to home page otherwise move next right we still have 16 seconds left with us let's give it a restart and see ourselves what we have achieved so far so if i click next we have the next page next page and when you click next at the last time nothing really happens so we have successfully achieved our milestone like our goal yes now the application also ringing so we have done our thing in the time limit and one small thing got missed which i'll do right away this last button it should not say next it should say start when you are on the last page okay so that is very easy we'll make a check over here controller dot is last page if it's last page then say start otherwise say next it's that simple and will also make it observable for somehow i don't get that thing so i'll write it manually okay i hope i'm not mistaken [Music] okay perfect so the function written type widget but doesn't uh i think i missed something yeah i can say return here cool now i'm going to do a restart again to see that whether the start button comes uh or not so we are in the first page i'm going to swipe manually the dot change still it says next now i'm going to click on this button next it came to the last page and it says start perfect right so we have successfully achieved onboarding screen in like 30 minutes or so well that's it for this video i hope you people enjoyed we created something in less time and it was useful for you guys and if it was make sure to hit the like button write down your feedback in the comment section and if you want to check check out these two videos from platter topic and you will of course like it so make sure you hit the subscribe button if you are new to the channel and i will see you guys in the next one yep it's over see you in the next one

Channel: CodeX

Views: 19,081

Keywords: flutter, tutorial, how to, android, ios, ui, Onboarding, pageview, pageview.builder, carousel, slider, flutter basic, visual studio, shortcuts, getx, getx controller, page controller, page indicator, flutter tutorial, flutter tutorial for beginners, flutter for beginners, flutter onboarding tutorial, flutter onboarding, flutter ui

Id: 8bO1_saEwjw

Length: 33min 50sec (2030 seconds)

Published: Sun Dec 27 2020