Flutter SharedPreferences Login | Flutter SharedPreferences Tutorial | Flutter Keep User Logged In

try to login inside the application with some password login cool you can see the data back of @gmail.com I can remove the cache and if I hard to start everything I should be able to see the login view hey everyone welcome to a new video in this video let's try to explore what is shared preferences and how we can use shared preferences as a local static database for a flutter application now for this tutorial I have created two views which is a home View and a login view now what will happen here once the user will be entering the information about him and once you try to log in the information will be saved and after pressing on Splash let's consider user opens the application again he should be able to see the homepage instead of the login page with the help of shared preferences right so before moving forward the first thing you have to do is go to pp. Dave and search for shared pref you can find the first result here which is Shar preferences itself and here you can see there are basic examples or how to use it that is writing some data reading some data and also removing that particular data right so what you can do is copy the following package name with the version number go into pup spec. amble file and simply paste that package here or what you can also do is open your terminal and here you can simply write flutter Pub add and you can just enter the name of the package you just have to remove the version number and the colon and simply place here enter after pressing enter the following package will be installed in your pup spec. AML file with the latest version so you don't have to copy and paste the name of the package and put it back again and again now this will this might take couple of seconds let's fit for it so now the first thing that I should be doing is creating a new service the service will be including all the functions features variables and everything that will be requiring in order to use a particular package now our package name is called shared preference so I'll be simply creating a new service called called shared prep service right now this service will be containing multiple functions variables and all data related for the usage of shared preferences so here I'll be creating a new future and we need to write create that is write read and delete the data whatever data we'll be saving in our database will be a cache that is small chunk of data so to do that I'll be writing a new function of write cache and make it a sync now here I have to instantiate a new variable of shared preference so I'll simply write and call shared preferences from the package it will be Auto imported and here I can simply say it to be a pref is equal to Shared preference do get instance we have to take the instance of the value I can make it a wait so we'll be getting the all data of the instance into the pref value so here if I simply go down and say pref dot you can see we'll be getting a bunch of functions from the package itself so here what I'll do I'll simply go down and and here you can see you'll be getting a function that is bunch of functions of set and also bunch of function of get Now set will be used to store data and and get will be used to get the data back so here what I can do I can set some value that is I can write some cache so I can simply set a new string because our data that is email and password will be a string so it's logically dependent for us to set them as a string now here we'll be requiring bunch of things that is a key and a value so here I can write a value of email and value which will be dynamic so I can simply add a required parameter of a string of value just like this and this will be saved as a value for now we have to also make the string that is the key to be dynamic so I can also say required string a key which will be dynamic and instead of email I can save it as a key now this thing will be a future and it will be returning us if you over over it a Boolean that is if the data is saved or not so here I can simply say bull that is bullan is saved is equal to AIT preference do set string and now I can simply print if the value is saved and here I can say is saved do two string to get it working now here what we can do we can go down in the shared preference view which require which represent the login View and here I can instantiate the service of shared preference service of shared preference service is equal to an instance of share preference service now here if you see on trapping on login I am doing nothing but simply uh pushing the entire View to a new view so instead of doing this what I have to do I have to call the share preference service and press dot here you can see we'll be getting a function of write cache now here I can uh add a key of email and a value of email controller. text just like this and uh this will be saving the data that is we will be getting is saved to be string so now if I go to debug console and if I write some value let's say abish at gmail.com and some password if I say login you can see we'll be getting an error here of no implementation found that's because whenever you add a package like share preferences which plays with our native mobile system we have to close the entire application and start the application again so what I can do I can simply press function and fi that will be loading the application again now until this application is loading I would like to show you one of the resource that I found to learn about technology about DSA about development which is gek for gigs now most of you people have already heard about this platform I have personally used this in my learning days and the good thing is this month that is for April this platform have bought a new challenge of 390 challenge now what is it if you go into any course let's say DSA for full St development with react node Java or anything you want you you can Avail 90% refund yeah that's true you can Avail 90% refund or a particular cost price no matter if it is 20,000 or 1,000 or 5,000 if you try to complete that course in 90 days which a percent of 90% you'll be getting a complete refund of 90% that is if if the course is of 100 rupees you will be getting 90 rupees back that's fun right so now if you want to learn about anything related to technology computer DSA node development anything you can simply go to gigs for g.org and you can Avail the following feature that is a feature they have availed for all the developers that is get 90% of your money back now I'll be posting a link of the following course in the description you can choose any course you want you can purchase the course you can try to complete that course within 90 days with a 90% and get your money back this will help you in exceling your skills and also saving 90% of your money so what are you waiting for just go in the following website of gigs for.org in the description box which is available and simply choose a course that you want to learn and start learning now once we have done that we can go back and you can see our login function is back in Action so now if I open debug console back and if I simply say some email at gmail.com something like this and Press login you can see we'll be getting a value of true that is the data that is the cache of email is saved in our small database as a cache so now if I go back what I can do I can try to read the value so to do that I can copy the function and paste it here and I can say read the cache so here to read the cash we can Ty here once back and you can see we getting a value of get string so now I will try to retrive the data back now here I'll be requiring a value which will be a string so here I can simply say the value now also here we will be requiring a key value so here we'll be requiring a key and to paste that we can use the value of key here so copy and paste that here and I think we will be uh yeah okay just let me get it back and this will be anable string so let's make itable and here the value will be key all right I can remove the a because it won't require the a parameter and here I can simply say if value is not equal to null you can simply try to debug the value right so I can simply say value dot to string easy so now let's try to read some cache so in order to read the cache I can go to home View and I can try to read the cash here so I can simply uh do one thing I can copy the class that shared preference service paste it here and I try to read the value right so here I can simply say shared preference. read cache and the key should be unique and if you remember we have the key of email so we can take it back so if I tap on here you can see we'll be getting the value of a gmail.com so let's try to save a different value of abish [e-mail] and try to read it yeah we are getting the value back that is aish [e-mail] now we can also delete the following cache so to do that what I'll do I'll change this visit into a column so I'll make it a column and I can say remove cach and we can try to remove all the cash so let's try to do that so here I'll be creating a new function uh that is to remove the cache so I'll say remove cach and here if I tap on back you can see we'll be getting a value that is we'll be getting a function of clear so I can say clear and it will be a Boolean of is cleared I guess if I'm not wrong it will be in a state right so I can simply say uh if is clear is not equal to null or it it will be not nullable yeah so I can say clear to string right so to use that we'll be using the same function again that is remove cache we won't be requiring a value here for now and I can delete this as well oh we have used this in a different function that is a different view so let's REO it and go back in home View and I can simply say remove cach right so let's try to remove the cash perfect so now if I reload tender application again the cash will be removed right we haven't seen the example because the value was gone so now let's try to see the everything that we have learned so far in action right so the first thing you can observe if I retrive that is if I restart D application we are seeing a small uh Splash view so here what we can do we can read the value if there's an email and we can say if there's a email value push the user back to the home view if not push the user to the login view easy so now the first thing I'll do is make this function to be asynchronous and here I'll try to read the value that is with the function of read cache so here the first thing is copy the class name paste it here and here I'll try to read the value so value is equal to Shared preference do read cache and the key will be nothing but email for now so it will be uh a wait statement because we have to wait for it so let's make it a wait easy now if I H over it the value will be giving a string so to give it back what we have to do we have to make this future to be a string format and I can simply return the value so I can say return the value if not if the value is not uh returnable simply return a null easy so I can make it a null LEL string so here if we have a value we'll be getting the value if not we'll be getting a null value if easy so let's go here and make it a value that is anable string so now if we have a value we'll be getting the data of the value if not we'll be getting a null value so now what I can do I can say here I can use a if for statement for now I can say if value is not equal to null you can push the user to the home view if not you can push the user to the shared preference view that is the login view right so let's try to see that thing in action if I how to start everything okay so now if I tap on back I'm getting a null value and the reason is because if I go back to my entire function of service I'm not wrting the value so I have to return the value and if I tap on it I'll be getting the value back so let's try to restart everything and see everything in action back so uh let's try to create a new account oh we have already saving the cash so I can remove the cash and here I can simply say uh if the cash is removed so I can return a Boolean here so I can say return is cleared so yeah it will be a Boolean yeah let's make it a Boolean cool so now uh let's go back here and I can simply say uh Boolean is removed is equal to the value so let's make it a sync and let's wait for it so now I can say if uh is removed simply uh go back for now yeah else I can do something else for now let's keep it in action I can remove this warning for now we will solve it in know some live project not for now so if I tap on it the cache is removed and it will be going back to the Uber Scrat so what I have to do uh I can do one thing I can simply uh copy the navigation and I can say uh push me back to the login page because now we are coming back from the splash screen so it is getting it is pushing us to the splash screen but I can how how start everything and if I H restarted I'll be seeing a login page because the cash was removed right so now let's try to uh start everything again so let's try to create a new account and I can add some password login cool if I uh try to see the value instead of now popping the value if I Tye on go back you can see I'm getting my cash if I hard to start everything we will be navigated to the home screen but not on login screen because the cash is there I can say remove cash and yeah so for removing the cash I can go to flutter share preference view instead of that view cool so now if I hard to start everything I should be able to go back to the login view let's try to login inside the application with some password login cool you can see the data back of @gmail.com I can remove the cash and if I hard to start everything I should be able to see the login view easy so this is how you can use shared preferences with flutter in the best way as possible I have shown the best practices to use shared preference that is create a separate service create a different layer and use the instance of the class in shared preferences instead of creating the service again and again now I hope you have loved this tutorial and if you have loved this please hit that like button also check out the course format of 90% free fund challenge of gigs for gigs and please use the following Link in the description box and let me know how did you feel after using that courses and also how did you feel about this tutorial see you soon

Channel: Abhishvek

Views: 496

Keywords: flutter sharedpreferences tutorial, flutter sharedpreferences, flutter sharedpreferences example, flutter sharedpreferences login, flutter sharedpreferences login example, flutter keep user logged in, shared preferences to keep user logged in flutter, keep user logged in flutter, sharedpreferences flutter login example, flutter sharedpreferences user logged in, sharedpreferences flutter login, sharedpreferences flutter, keep user logged in, flutter sharedpreferences login tutorial

Id: NBbQ0A03l4w

Length: 15min 45sec (945 seconds)

Published: Thu Apr 18 2024