Flutter Onboarding Screen Tutorial - Flutter eCommerce App

today we are going to learn how to create onboarding screen in flutter we are creating flutter eCommerce application and currently we are in section two we already covered section one which we learn how to configure setup project add helper classes and bunch of other things in the last video of section 2 we learn how to set our flash screen in flutter how to remove it and how to customize it okay now let's talk about the onboarding screen okay let's run the application and you can see currently splash screen first which we created in the previous tutorial for both light and dark mode and same in today's tutorial we are going to create Lighter dark mode for onboarding screen so first of all you can see we have three type of pages and each page contains image title and subtitle and same in the second we have animation over the image title and subtitle and for the third page as well so first of all we have Pages then at the top you can see we have a fixed button skip which is currently taking to the last screen but at the bottom you can see we have navigation dots and also we have this nice button over here when we click on it we will be redirected to the home screen in or the login screen let's turn it to the dark mode now you can see when it's switched to the dark mode it's working pretty fine [Music] okay so let's get started open Android Studio okay the first thing to do is go to assets inside the images I have added three images or three GIF files which will be the animations inside the onboarding images you can get these images from icons right.com or you can get the code from the description below next go to pubspect.aml file and inside in the assets you can see we have to add the link of this folder right click click on copy path reference and click on path from content root instead of images now we have to create the reference of each folder so inside the images we have this folder all the files inside this folder will automatically be added using this forward slash okay once it's added let's head back to the packages inside this we are going to add smooth page indicator package check its latest version and import it click on forget to load all the new dependencies okay once done let's head back to features and inside authentication we are going to start coding inside you can see I have created a new folder called onboarding and inside I have a simple dummy controller and down below in the screen that you created an empty onboarding.dart inside you just have to create stateless widget you can just write STL and click on it it will create a class for you you can name it anything but we have onboarding screen and inside we have SIMPLE scaffolder and in the controller you can see again it's a simple glass but it's extending get x controller because we are using get X trade management which we have already added in the previous tutorials if you're new you can watch the playlist Link in the description and inside what we're going to do we are going to create variables update page indicator when the dot navigation is going to be clicked change the current index and move to the next page and when the skip button will be clicked this function will be triggered currently these are the empty functions now let's head back to the design file and let's start the designing as you can see the first thing we need to create Pages pages are not static but at the top we have buttons navigation dots and the circular button is static so to achieve this we are going to use page views for the pages to swipe and we will put everything inside the stack widget to stack or layout elements on top of each other if you don't know what a stack you can watch the flutter crash course Stack video let's add body we will add tag contains children's okay inside the stack we have to create four things we already talked about the first one is scrollable Pages then skip button dot navigation and circular button to create Pages or to create a swipeable Pages we have to use page view inside the page view the first property we are going to use the children which contains list of children's or list of pages let's remove this constraint from the top and now inside this page view the first thing that we are going to create is column because we have all the elements current stack in a vertical Direction the first thing is image so as a children of the column we need to create an image insert the image we have asset image and to pause the set image we have already added images in the T images in the T images dot onboarding image one where we have added all these images let's go to T images let's head back over into the constraints and inside you can see inside the image constraints I have just declared all the three images to do that go to assets go to images right click on that image copy path reference and click on this path reference just create a variable and you just have to paste it over here you can watch the last video of section one to know what's going on inside this constraints or inside the utility once the image is added I have already added a text strings as well for both titles and subtitles okay so once we have that no control alt L now inside this image we are going to add width for the width we are going to use screen width go to T helper functions dot get the screen width and we will only use 80 percent of the screen width so you have to multiply it with the 0.8 means 80 of the screen width and same for the height I will get the screen height and multiply it with the 60 percent means the 60 of the height and 80 percent of the width this image will have these Dimensions let's add constant now our image is created okay for the helper functions let's go to the helper function again I suggest you to watch the last video of section one inside down below you can see we have bunch of options dark mode screen size screen High screen width and bunch of others okay once the image is created the next thing we want to create is a text T text Dot onboarding title one because the first one is the title now to use the theme which we created previously we have to use the style property and to apply the theme we will use theme dot of context dot go to text theme and inside the text theme we are going to use headline medium and the last thing is to align the text in the center use the text align property Dot Center Control Alt l so we have the title text you just have to copy and paste it one more time to add some space we will write a size box which will contain a height of sizes dot phase between items and for the T sizes let me show this class as well again it's inside this constraints right over here and inside the sizes you can see we have bunch of options the one I am using is a space between items if it's more or small you can change it with the these space sizes and next down below we are going to add onboarding subtitle one extracts theme will be body medium and again it will be aligned as Center okay so the first page is ready Control Alt L to show the screen let's go to approv Dot and as a home we are going to call our design screen which is onboarding screen long Rush run the application okay as you can see our application is running and we have an error which is null check operator used on a null value to solve this error as we are using get x controller so we have to change this material app to get material app and that's it our error should be gone now let's rerun the application and in the screen you can see we have image at the top which is animating then we subtitle and subtitle let's turn it to the light mode and shame you can see the text has been changed just because we are using the theme over here which is headline medium and it's automatically deciding its own colors based on light and dark modes and one more thing let's wrap this column with a widget called padding and for the padding we are going to use our default padding inside the sizes we have a space default space so this is a space we are going to use for the complete application save it and you can see now we have spacing we're going to create multiple pages instead of just copying and pasting this code again and again three times just right click go to refactor and create a new widget extract flutter widget name it on boarding page click refactor and now you can see we have a page but we need to Define three things for each page image title and subtitle right above this function we are going to create three type of strings images also a string title and subtitle and now we have to import this add all as our required elements inside the Constructor and replace image the image property remove this constant title with title text and subtitle with the subtitle text now we have a separate class which requires image title and subtitle when we are going to use this inside this Constructor it's required so whenever we are going to use this class we have to pass image title and subtitle and these three things are set over here now at the top inside this function you can see the error which means that we have to pass the image image has onboarding then title will be from the text onboarding Title 1 and same with the subtitle text Dot onboarding Title 1 Control Alt align the code let's add a constant at the top we can easily duplicate it three times we just have to change the text to two and three for the third one now let's save the code and when we are going to swipe it you can see text is changed image is also changed same for all the three now let's head back and we will try to add rest of things first of all let's add skip button because we are inside the stack so we will use position widget to position our all the elements so child will be the text button it's on press currently null and as a child of the text we are going to use the text widget named skips our button is created let's save and see where it appears currently it's not being appeared but it's right over there at the top left corner because we are using the position widget we have to first assign its top position go to device utils and get a bar height property let me show you as well so it's a simple variable which is K toolbar height you can directly use that as well if you're not using these files and then we are going to make it to the right side so right will be the default space now let's save it and you can see the skip button is right over here and a comma Ctrl alt L we can also extract this widget as a separate widget because this button is not going to reuse so just to clean the code we are going to extract it and we extracted two files over here down below inside the screens off let's create a folder called onboarding now inside we are going to Simply cut it and paste it inside the onboarding once refractor inside down boarding let's create another package for the folder I'm going to name it as widgets and inside these widgets we are going to paste these two things so let's create a new file onboarding underscore onboarding page dot dot make sure it's does not contain any capital letters or spaces first import the material.dot and then paste the class import all the files okay once imported close it let's do the same for this button onboarding skip.port material Library paste the code add required Imports remove this comma Control Alt L and it's done now you can see we have to import that class as well inside this package it's imported also import skip button okay next we want to create smooth page indicator we're going to use the smooth page indicator package so first of all let's add smooth page indicator as a controller for the time being let's add page controllers the error should be gone and then as account we are going to use three dots for three pages let's save it and currently you cannot see it but on the left top corner you can see we have three dots so again because it's inside the stack so we have to wrap it with the position widget because we want to place it at the bottom so we will first add the bottom property we will again use the device utility class T device utils dot get bottom navigation bar height and we will add 25 more space in it let's save it and you can see we have dots right below where we want and then to add small space or the default space we will use the T sizes dot default space from the left okay now it's looking good now for the design we have a property called effect and you can see we have basic indicator effect color transition effect and bunch of other effects but for this tutorial we're going to use expanding dot effect and as a property the first thing we are going to use active dot color it depends we have to use light and dark modes so for now let's make it colors dot dark and we are going to reduce the dot width to 6 add a comma yeah I'm adding inside this position widget sorry for that let's cut it we have to add it inside the smooth page indicator let's paste it over here Ctrl or tell to align the code add a constant let's save it and you can see the style the first dot is active which is selected dot height has been reduced color is also changed now again we first have to extract it onboarding dot navigation extract it and in here to turn this active color to light and dark modes based on the mods of the screen so first of all go to helper functions and inside is dark mode or you can directly use theme dot off contact dot brightness is equals equal to dark if it's dark we have the variable as a dark value true if the value is dark we have the value true inside this dark variable so right over here I am going to add dark question mark means if it's true if it's the dark mode I will use T colors.light and if it's the light mode I am going to use the dark color let's remove the constant let's run the code currently you can see it's in the dark mode Let's Open the dark mode sorry previously it was in the dark color and now it switched the color to the light mode Okay add a constant at the top let's extract it and shift it to the new class again inside the widgets create a new class onboarding dot navigation import the material.dart and inside let's paste it import the required Library series okay once done let's import that new class inside the main class for connection we want to add or to create a circular button so again to align first thing we need to add position as a position child we want to add elevated button and we will turn this elevation button into circular first let's add the position first I've added right and bottom position because we want to align it to the right side so from the right we have a default space and then let me also show you that fourth place which is 24 default space from the right side and then get bottom navigation height which is K bottom navigation bar height from the bottom and now inside this elevated button we have to add the required properties currently on press is going to be no as a child this time we are not going to add text but we will use the icon and the icons we have added which is the icons x dot Arrow right three you can use any other icon it's all up to you import this package add a constant let's save the code and on the screen you can see we have a nice square button with an arrow as we wanted next to style the button we have to use the style property style some button we will use elevated button dot tile from and the first thing we want to make this shape to Circular so we will use the shape property and we will simply call Circle border and that's it save it and you can see it's turned to the circular button at constant and if you again want to change the background color because we have the primary color which is this color you can see for the dark mode but for the light mode let me just switch it to the light mode and in here you can see it's still a primary color but I don't want to use that primary color as a background color when it's in the light mode so let's add black color for here and again it's instead of adding dark mode utility first thing we need to extract this as a separate widget go to extract extract widget onboarding next button refactor now inside this widget build method let's again add final dot device utils dot T helper functions dot is dark mode if it is a dark mode it's going to return true otherwise false now let's add dark question mark if it's the dark we will use primary color from the colors class and else we will use the black color so these are the colors primary secondary accent this is a gradient we are not using this gradient but I just show you as an example let's remove this okay now let's save the code currently we have the dark color when switching to the dark mode you can see we have a primary color of the button let's switch back okay now our design is ready let's talk about the back end now to create a backend the first thing we need to do is we need to get the instance of our onboarding controller we will use the get output method import get or Dart okay here you can see I have added get dot put onboarding controller which means that we are creating an instance of onboarding controller which we usually create using a new keyword new onboarding controller because we're using gettex State Management so that's why we're going to use get dot put method this put is going to create a new instance of this onboarding controller and whenever later on we are going to use get dot instance or get dot find we can easily get the already created instance in any other class so we don't have to create new instance again and again now we have this controller over here we will use this controller inside this class and inside the other classes first of all let's open the onboarding controller once we have the onboarding controller already defined using get dot foot method later on we can directly use onboarding controller.org instance this instance variable is simply calling get dot find exact and returning onboarding controller okay for the variable the first thing we need to create is Page controller is equal to page controller and the next thing we need to get what is the current state of the current index current page index is equal to 0 dot OBS what is this this is actually The Observer which is another widget which is going to change the design without using stateful widgets right so what is this this is again an RX type of integer you can write it in this way you can write simply a final keyword it's all up to you because it is an integer but it is using the RX type which is the getex method to Define variables which can easily be changed and which state is going to be changed on the design as well okay once the variable is created let's go to onboarding and inside the page view as a controller we will pass the page controller so use controller Dot Page controller this is the variable of the controller of downboarding and then inside we have created page controller over here we have to assign the page controller to page view to get to know what is the state of the page which page is currently visible and how many pages we have and next we have another keyword when the page is going to be changed either by swipe method you can see when I'm going to swipe page is changing so this change is going to trigger this on page change method so simply use controller dot update page indicator you can also pass the index over here but if you are not going to pass any index it will automatically detect and pass the index because when you hover over this on change it is giving us some integer so when we are going to pass this integer we also have to create a function but if we're not it's directly going to pass the integer to this function now this function means that update page indicator as well when the page is going to be swiped so when I'm going to swipe this you can see the page indicator is not moving not changing so what I want to do is when I am going to swipe this that function is going to be triggered and it should update this dot navigation as well so on this update I am just going to update the current page index is equal to index we have received from here next for the dot navigation click let's go back go to the dot navigation and inside the first thing we need to do is create the instance of the controller so we have just created a simple controller inside you see we don't have to call again get output but instead we can simply use get dot find and in here onboardingcontroller dot instance so this line is again going to call get dot find so most of the cases it's a best practice to keep the code clean so copy this controller again in the smooth page controller we have to remove this page controller controller Dot Page controller and next to this controller we have another method which is on dot click when someone is going to press that dot this function will be triggered and we will simply call controller dot dot navigation click again it's going to pass us an index so by removing this that index will directly be passed to this dot navigation function now that dot navigation is clicked the first thing we want to update is current page index dot value is equal to index what this value means this current page index is actually an RX type to get the integer updated or to get the value of the we have to use the dot value sign again at the top we have to use the dot value so we have the current index assigned to this current index and next we want to shift this page controller or the page to we'll use the jump to method and we will pass the index so when the dot is going to be clicked automatically our main screen will be jumped to that specific page and now first talk about the skip button inside the skip button I directly added current page index to 2 because we have only three screens first one is zero then one and then two this means that directly go to the last page view and again jump the controller to the last screen so this is going to keep the state and this is going to jump the screen to the last screen let's head back go to the skip button and inside this we can directly call onboarding controller dot instance dot skip page so this is going to trigger this function again you can see I don't have to again create a new instance of this controller but I will directly write dot instance we'll use the old instance and directly call the skip page now for the next page let's go to the next button and inside again we will do the same called onboardingcontroller dot instance dot next page now whatever we have to do on the click of this next page will be handled inside this next page okay first thing we need to add if statement if current page index dot value is equal is equal to 2 which means it is at the end of the screen we want to let's say direct our app to some other screen maybe which we are going to create in the next video login screen so we will simply call login screen over here and that's it okay because currently we don't have any login screen so let's comment it in the l section if it is not in the last screen we want to Simply move one screen at a time to the next screen first we have to update the current page index dot Value Plus One and again we have to jump the page controller dot jump to the page we have created at the top jump to requires double so we have to use jump to page and we have to pass the page which is plus one which will be the next page of the onboarding screen because we have changed inside this controller so let's do the hot restart okay so our application is running let's do the swipe and you can see the bottom navigation is also taking effect we have successfully changing the dot navigations as well on the swipe now let's try this skip button and you can see current is taking to the last screen but you can also inside the skip method instead of going to the last screen or the last page you can call login screen or the dashboard screen or whichever screen you want to use so it's all up to you skip is also working now let's again test the next button it is taking to the next screen and then on the next definitely currently it's commented but it will take us to the login screen so that's it for today's tutorial I hope you learned something new if you learn something new please like a video if you have any questions you can ask me down below in the comments also you can get the code from codingwitty.com link is in the description once again thank you for watching take care love face

Channel: Coding With T

Views: 22,385

Keywords: flutter onboarding screen 2023, flutter onboarding screen example, flutter onboarding ui, flutter onboarding screen ui, flutter tutorial - onboarding ui screen, flutter onboarding tutorial, flutter onboarding screen only one time, flutter onboarding screen getx, flutter onboarding screen, flutter onboarding screen tutorial, flutter onboarding screen animation, flutter smooth page indicator, onboarding screen flutter, Onboarding flutter, flutter onboarding, Coding with t

Id: bu_s2sviuck

Length: 23min 41sec (1421 seconds)

Published: Mon Oct 02 2023