Auto redirect to Login/Dashboard from Splash Screen in Flutter using GetX || Flutter || GetX

hi my name is amar i am making this video based on the request of my few subscribers here there will be a splash screen if the user is logged in then from this screen the user will be redirected to the home screen and if the user is not logged in then the user will be redirected to the login login screen right now here in the pubis pic.eml file i have taken this gate storage dependency right and here if you can see in the app inside the routes folder we have app pages inside the app page as you can see there is a home view there is a splash view there is a login view right and in the app routes i have created these routes home route splash route and login route and the initial route if you can see i have set the initial route to splash that's why when i have run the program the splash screen is coming now here in the main method i need to initialize the gate storage and to do that here i will write avet get storage dot in it right now i will declare this main method as async now let me move to the splash in the splash view you can see simply there is a app bar having the text as a splash view and in the center i have displayed this message splash view is working which you can see in the output right now let me move to the splash controller in the splash controller here what i will do is that i will create the instance of get storage and for that i am writing final get storage equals to get storage now after creating the instance in the on ready method i will check if get storage dot read if it has any key with the name id if it is not equals to null this means if it has any key with the name id then the user will be redirected to the home else the user will be redirected to the login screen right and the user will be redirected to the home screen after a delay of certain second certain millisecond and to achieve that here i need to write future dot delayed and here i will specify a duration in millisecond let it be sorry duration let it be uh 2000 and here i need to write what will happen after this time is elapsed here i will redirect the user to the home screen now instead of using this feature dot delay here you can write some server server side specific code also fine now to move to the home screen here i will use get of all named and after that i will call roots.home it will be redirected to the home screen okay now if the this will execute if and only if the value of this id key is not null but if it is null then i will redirect the user to the login screen and to do that here i need to use login okay so initially when the splash screen will be launched at that time the value of this id will be null and so the user will be redirected to the login screen now let me move to the login view in the login view you can see i have simply created a elevated button and whenever this button will be pressed then the user will be logged in instead of that you can create your own login screen now from the splash controller i will simply copy this and i will move to login controller in the login controller let me paste it and here i will create a method login to perform the login operation and whenever the login operation will be performed at that time in the get storage i will write some values with the key as id and in the idea will pass one and i will pass or i will say one more key having the key as a name and let the value be repulse code right actually these values you can get from any external api and after that once the login is performed successfully i will redirect the user to home screen now let me move to the home view in the home view you can see in the home view here in the body i have taken a center widget then there is a column widget and there is a text and there is elevated button and in the elevated button whenever the user will click then the user will be logged out fine so in the home controller here again i will paste this and inside the on init method or instead of that what i can do i can declare a variable where name let me initialize it with the value blank and when this on init method will be called then in the name i will write get storage dot read i will read the value from the name key and that value will be stored inside the name variable fine after that in the home view instead of this name i will take the value from controller sorry controller dot name right and whenever the user will click on this logout button at that time from the controller i will call the logout method this method i need to create so let me move to home controller in the home controller i will create the logout method and whenever this method will be called what it will do it will erase all the values from the gate storage and again i will redirect the user to the login screen routes dot login okay now let me run the project and you can see from the splash view the user is redirected to the login view since the user is not logged in now once i click on this login button actually i need to call the let me go to the login view and from the login view whenever this login button will be pressed i need to call the controller dot login method as well right now let me run this once again now from the splash screen it is moving to the login screen and once i click on this login then the user is logged in and you can see the repulse code is displayed here and there is a logout button fine now again if i run the project now since the user is logged in now the user will not be redirected to the login view it will be redirected to the home view if i run it once again then you can see that from the splash it is moving to the home view now let me move to the splash controller and let me increase the delay time okay by mistake here i have used micro second let me change it to millisecond and let me increase the time to three now let me run the project once again now you can see from the splash it will move to the home view and if the user is not logged in then the user will be redirected to the login screen right i hope you have enjoyed my video if you have enjoyed my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 15,282

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, auto redirect from splash to login or dashboard in flutter using getx

Id: sQpOTS01yZg

Length: 8min 42sec (522 seconds)

Published: Sun Jul 03 2022