Flutter Onboarding Screen Only One Time | Flutter eCommerce App with Firebase

and welcome back to coding with t today we're going to learn how to manage onboarding screen so it should appear only one time not again and again when our application loads so let's quickly first have a look what we want to achieve this is the application over here when we are going to run this we have to first await splash screen until everything loads at the back end and once done you can see the splash screen design is already created if you want to design this flash screen you can watch the design video you can get the link in the description so once done you can also so simply click on this skip button at the top to reach to the last screen and when you're going to click on this next button once you are at the last screen we want to make sure that this onboarding should not appear again and we are redirected to the login screen so let me now close this screen open it again again splash screen Waits until everything loads at the back end and this time you can see we have directly landed on the login screen instead of the onboarding screen so this is what we want to create want to be focused on that how we can use the authentication repository which is a single class to handle all these types of things so let's break down today's tutorial so the first thing is we are going to use the local storage to perform this action because we want to store the local state inside our mobile device storage for that we have two packages the first one is the share preferences package and the second one is get storage package get storage is also not dependent on the get State Management so it doesn't mean that if you're using the getex then only you can use the get storage but if you're using any other state management you can use any storage they are almost similar so we first have to load the package then we going to initialize that package inside our main Ro do and we also make sure that after the initialization of our Firebase or authentication repository should launch and as you can see we have to await the splash screen until our required screen appears and then we will create inside the authentication repository of function which will be the screen redirect function so that function is going to decide which screen should be appeared either login screen onboarding screen user is logged in or logged out so everything will be handled in that and at the end definitely we going to use the local storage to store a simple Boolean variable so as a overview we are going to learn how to Simply store a single value in the local storage how to fetch it so without wasting time let's get started with today's tutorial FL e-commerce application and we have already completed the design portion in top three sections and now we are moving towards the fourth section which is the back end of this e-commerce application definitely the back end is not dependent on the design so if you have any design you can watch these videos and also we are going to focus on learning Concepts not the rigid coding for that specific one single e-commerce application so if you want to download the complete code you just have to any of the video of this e-commerce application and heads towards the description click on this more icon over here which you can see click on it and a description details will be appeared over here you can see we have list of app playlists e-commerce app playlist the first one is the complete playlist then we have section wise playlist so we have the first configuration section then login app then e-commerce app login back end and e-commerce back end so all these sections will also be defined you can open any playlist over here and to download the code you just have to head towards the download source code link is over here from the coding with so you can download that code okay so without wasting time let's get started with today's tutorial and studio and we are inside the project main do which we have created in the previous tutorial we set up the Firebase and we initialized the Firebase package in the pubs speec over here which is the Firebase core file and in the main row dot we simply initialized our Firebase app using options and I already explained in the previous St but let me explain again that using then once this initialization of this Firebase is completed related to any platform web Android iOS using the then keyword we will initialize our our authentication repository so once initialization of the Firebase is completed we are going to use this authentication repository and let this authentication repository to redirect user to any screen if user is logged in redirected to the home screen if not redirect to the login screen if user is logged in but email is not verified redirect to the email verification screen and if user is new definitely redirect user to the onboarding screen so that all will be performed over here without doing anything when we are going to run this application you will see that as the main flow triggers this run app will be launched and inside this app which is app. do we will simply have this get material app and you can see the home home widget onboarding screen which will be triggered so we don't want any screen to be appeared manually from here so we have to add a simple nice loader over here because we have to provide any widget if you don't want to provide any widget it's your choice so let me run this application first when you run this application make sure to remove the authentication repository because we have not it created that okay so our application is running currently the splash screen is not loading as required and when you run this application you will see an exception or the error you can say it is the error is unhandled exception binding has not been initialized so what this error means that when you're going to initialize anything over here because Firebase initialization is running and meanwhile our design also loads So to avoid this because we first have to make sure that our initializations process is completed we have to do one thing you can see we have add widgets binding and to do that we have to create simply widgets flutter binding. ensure initialized so you can see it's also saying that test widgets flutter binding. andure initialized you can call so once you have called this we are going to receive this in a variable because we are going to use this value in the splash screen to retain that splash screen so now it's done it's no longer a Todo so this part is completed now the next thing is let me rerun this again and you can see now we can see the onboarding screen which is inside this app app. do which is over here at the bottom this onboarding screen of this home widget is being triggered so inside this pspec DML file the first thing we need to do to get started with a get storage you have to add this dependency of the package add it simply run flutter pubget and name this as it is getor storage hit enter and it will add the latest dependency make sure to go with the latest values head toward the ad and in here for the second to do we have to add the local storage or initialize the local storage so that we can use it in our application so let's remove this to-do and add the local storage import this storage make sure to add a weight sign over here and import the get storage. init this is going to initialize the gex storage not the gex again sorry get storage and after that once the storage is also initialized we want to make sure that splash screen should wait until we want to remove that one so before doing this head towards this app instead of showing manually the onboarding screen I want to display a simple loader over here and in here you can see I have added also a comment over here which is when you run this home it should create a scaold with the background color as the primary color of your application which is the blue color and as a body of this scold we going to create a center widget and in the center we simply want to run a circular progress indicator close this app do refresh the code and this time you can see blue screen with the circular indicator you can also add anything else but we will tackle this in a way that this loader should not appear and we will do that with the splash screen when we going to avoid the splash screen over here for that we have to call the flutter native Splash do reserve and we have to pass the widgets binding we just initialized at the top import this flutter native Splash by hovering over this click on import and we are done now when we are going to reload our application now when you stop and run your application you will see a white screen with a splash screen and it's not going to to remove automatically after a few seconds so you can see it's taking a lot time and it's not going anywhere the reason is that we have make sure that this flash screen wait until we remove it manually so it's preserving it straight now head back to the authentication let's add do then again and inside dot then inside this function we have to call get.put authentication repository the reason to do this to trigger the on ready function of this authentication repository will will be triggered only once at the start so first we have to create this repository so to start the backend go to the data and inside the data we have the repositories folder now inside the repositories first of all we want to create the authentication repository and all the repositories will hold the backend related operations so authentication repository is going to hold everything related to authentication let's say user repository is going to hold everything to fetch the data from the fire store remove the data upload the data so things like that so repositories are for the back end okay just to save the time I have created a folder which is authentication folder currently it's only one so that's why you can see repositories do authentication so once we add other repositories it will be the repositories then inside the repository we have authentication and in this folder we have created authentication repository. class this is a simple empty class which has nothing to do with the stateless and stateful widgets and it extends with a gex controller so you can see it's a gex controller and what this line is this is a simply getter method if you see over here it is a getter method of authentication repository it is class itself so again it's a static so we can directly call authentication repository do instance call the get. find method so we will talk about this in the upcoming videos so nothing to worry about over here simply create a simple gex storage variable right inside this class name it anything because we are going to use this device storage and in this we have to create the own ready method so to create the on ready method you have to press contr o and inside you have to write on ready because we have already created one like we have on in it and at the below you can see when we going to hit enter it is going to create an override method like this okay once created this one ready you have to perform the first thing which is we want to remove the splash screen over here right if you want to remove the splash screen later on in this redirect function you can do that as well but currently for the current scenario we are removing the splash screen over here and in the screen redirect this is another function which will be triggered right when this on ready will be triggered so this on ready will be triggered when this authentication repository will be called first time so when we call this on ready for the first time this screen redirect will trigger and it is going to tell us that which screen should appear and these all remaining functions are the functions that we going to learn in the upcoming videos like email authentication signin register reauthenticate user email verification email authentication which is a forget password then Google signin Facebook signin logout user or the delete user authentication so for the screen redirect in here when we start start working on the authentication first in the on ready we will load the user state from the Firebase and once that state is loaded in the screen read right we will simply check that if that specific user is not null means it's logged in then we will let other things to be performed but for today's tutorial let's take it with a simple approach and we are assuming that user is not logged in for the local storage because we have declared the local device storage over here the first thing we are going to learn is how to fetch the local storage variable so let's call the local storage variable which is device storage we declared at the top dot we want to write if null we can write it we can remove it we can read so the first function that we going to use over here which is write if null if there is nothing added already inside this key we want to add it by default so storage works with the two pairs key and the value pairs like we have the Json files so key will always be in string you can see at the top key will always remain string and value can be dynamic you can pass integer some models some list some booleans Etc so it's up to your choice so I'm going to create a variable which is is first time you can make it small you can make it large it's all up to you you just have to make sure that same variable should be used to get data back from this get storage so we want to write is first time make it true so this line will only be triggered if this value or this key is nullable so this function will automatically check that is first time does not exist in the local storage then it is going to add a by default value true in the database let's say if it is added or if it is null now here we want to check if device storage dot we want to read from the device storage and we will pass the same key over here and in the read you can see we can only pass the key because based on this key we can get the value we want to read this key and if result of this read key not is equal to true this means that it's not the first time of the user question mark means that it's if statement so if the first if statement will be executed means that it's not the first time of the user then we want to use get do off all method to redirect to another screen and remove all the previous screens you can use any other method navigation context to switch to other screen and we want to redirect ourself to the login screen else this do represents the lse section and in the else we want to display onboarding screen over here so what this is again doing this is checking that if it is the first time of the user we should directly go over here to the onboarding screen so if it is not true it is not the first time of the user then he will always lead toward this login screen so the reason is to add not is equal to True is that mostly we want to speed up our coding by providing the most success scenarios as early as possible so compiler will only have to check this and run this you don't even have to go for the else part so just for the speed up things okay once we have decided over here in the screen redirect that okay when the splash screen will be removed it is going to check that is first time is not pro it will be redirected to the next screen depends upon login or the onboarding let's head to the mro do import our repository which is authentication repository and now we going to rerun it again this time splash screen should remove and Device Storage should create a variable because first time it's null it don't have anything like is first time it should create this variable and pass through inside it okay now you can see when we rerun it we can see the onboarding screen so we can rerun it as many times as we want rerun it again you can see again the onboarding appears because it will always remain true is first time because we are not making this false anywhere so to do that it's a simple operation head towards the feature authentication and controllers where we have defined the onboarding controller or the event because when we going to click on this next button first time and second time and then when it reaches to the last screen and user presses it again we want to redirect user to the login screen like we are doing manually over here so this is the next page function which is checking that if the value is equal is equal to True redirect it to the login screen and remove everything from the previous screens else simply jump it to the next page so in here we want to again use the gex storage and we want to check that if it is last part we also want to make sure that is first time local variable should turn to false this means that now it's not the first time of the user user already passed his first time for that create another variable right inside this one simple get storage and using this storage dot we want to Simply write we'll use the same key is first time make sure the key is same otherwise it's not going to return anything we want to write is first time to false and that's it so when user reaches to the last part is equal is equal to two on the last screen and user presses the next button again we want to create the of this get storage and we want to write first time to false okay this time to test it because I've added some comments over here to print this results in the K debug mode so we are going to run this in the debug mode and try to see what we received over here also in this screen redirect and inside the next page I have added the same command to read the value of this is first time so let's see get storage next button and in the authentication repository so let let's run the debug mode add a breakpoint over here so when it is going to trigger we will see the results and also let's add the break point inside this next page button okay you can see we are currently on the splash screen and our breakpoint triggers and down below over here you can see it's printed get storage authentication repository to Pro this means that is first time variable is currently true that's why we should see the onboarding screen so let's click on this resume program and you can see the onboarding class appears and when we are going to click on this black button or the next button it should trigger the event which we have defined over here in the next button so it will trigger only when we are on the last page so let's go to this page when we going to no click it it triggers again and again it should printed where it is it printed the true this first time is still true so this means that user is having the first time and now when we going to wrun it to the false and we will rerun it I forgot to print it right over here as well so instead of executing this command let's print it one more time and rerun the application so that we can easily see the next state and currently when we rerun this again you can see we have this printed as false so this time we should not go to the onboarding but go to the login screen so resume this program and you can see after refreshing login screen starts appearing so this is how you can use the local storage perform your operations and this is how we can deal with the screen rir now from the next video we are going to add authentication so we will first check the user state if user is logged in using the authentication he's not logged in things like that so from next videos things will be start getting interested I hope you learn something new and that's it for today's video if you learn something new please like the video and if you're new to this channel don't forget to subscribe and hit the Bell icon to get notified for all the upcoming changes once again you can download the complete code link is in the description or you can get the complete playlist link from the description below from the right top corner so thank you for watching take care Allah

Channel: Coding With T

Views: 2,964

Keywords: flutter onboarding screen 2023, flutter onboarding screen example, flutter onboarding tutorial, flutter onboarding screen only one time, flutter onboarding screen getx, flutter onboarding screen, flutter onboarding screen tutorial, flutter onboarding screen animation, onboarding screen flutter, Onboarding flutter, flutter onboarding, Coding with t, AuthenticationRepository, flutter ecommerce app with firebase, flutter shopping app with firebase, onboarding, flutter onboarding ui

Id: GYtMpccOOtU

Length: 18min 38sec (1118 seconds)

Published: Sat Nov 25 2023