SQLite Database in Flutter | Tutorial || Clock App (Episode-6)

provide our snapshot which we are fetching from database dot data we got the record inside our list hello and welcome back to channel codex this is your host azil and you're watching clock app series in this episode i'm gonna talk about local database [Music] welcome back once again in yet another episode of clock app series this time we are talking about local database so let me tell you that there are different ways we can store user data in mobile application if you have fairly small amount of data like say for example username or some preferences of the application whether uh the terms and condition is accepted or not whether the application is launching first time or not those kind of stuff you can directly save inside shared preference shared preference is inbuilt inside each platform so you can access that with the help of package and write your data if you have number of records to be stored a big data then you can use sqlite or any other database available for mobile platform but sqlite is most preferred and if you have even bigger data like say for example pdf file or image or some profile something you want to store you can directly access file system for that so depending on the need of your application you have to choose one of those three type of storage in mobile application and you're good to go so without wasting much time let's begin with today's tutorial so here we are inside visual studio code first thing first we need a package to work with database and for that i'm going to use sqlite 1.3.1 so i'm just going to copy this statement from here and paste inside our pub spec yaml which i already did and restart the application so that all the dependency has been loaded properly so our package is in place now what we need to do is set up the database so i have divided this tutorial in two parts in first half i'll be talking about the basic setup how you can create the database how you can initialize the schema table and all those stuff and in second part we will do crud operation like we will do insert update delete on the same table so let's begin by creating a class a helper class i will say alarm helper dot dot and this class will be responsible for all the operation initialization everything so alarm helper so we need singleton instance of the database so i'm going to say database and this will come from sqlite api and let me name it database so the singleton implementation will go something like this if the database is now it's going to initialize it if it's already there it's going to return it to you now comes the important part where we have to initialize the database which means you are setting up the connection you are opening the connection and creating table all those stuff so let's define a method i'm going to say future of database so this method will give us database finally and let's name it initialize database just like this one okay now this is fine let's make this method a sink so that we can use a weight keyword inside and now let's create a database so first thing we need is a directory to work with and that will come from it database path this is already there in the package which provides you the path where database can be stored and then i'm going to define the complete path which will go something like this so you just have to specify the name of your database along with the directory and this is the place where we will open the database connection so let's write open database provided with path and few other properties we will also provide like version what is the database version and what happens once database gets created cool so now this database is there i'm just going to capture inside a variable database is equal to await open database just let's check the data type it's correct and return database so anytime user is going to initialize this database it will give this instance and because it's a singleton it will have only one instance at a time so this is fairly simple now what we have to do once the database gets created we have to create the table where we are going to store the data so using this db i'm just going to say sorry db.execute and we will provide the sql statement over here so let's define all the column name table name which we want because we don't want to change each time to this query we'll have this named over here so i'm going to say final string table name is equal to alarm like that and similarly i will add all the columns this is just to separate out our strings so that anytime we can make changes and let me just name it table alarm so that it makes more sense all right so now we're going to write this query the query is going to be multi-line for that you can use three times single quotes write one two three and hit enter and close that multiline so one two three and that will give you multi-line statement multi-line string inside dart and that's a real quick tip over there so you can write anything over there without adding plus symbol without adding double quotes and it works really great just like we use add the writ in c sharp and other language so here we will write the exact query and this is the query we have we are creating a table with the column title date time and data type we have specified you can copy paste the same query or if you want to go through details you can go to w3 schools and there are many sites or youtube tutorials which will tell you how to write sql query fine our database got created we created table as well now what we need the way to access this helper so let's create and let's also make this static so that it has only one instance and we also need alarm helper outside the class so i'm going to create a single turn for alarm helper as well this is a simple method which is checking for the null value and same same thing like if it's null then create an instance otherwise return the same and now let's write some operation to perform so what we want with this database is a way to write insert update delete and all those queries so i will say void insert alarm okay and that will accept alarm info so our method accepting the alarm info now using the database i will say db is equal to this dot database this is referring to this database if you can see it over here and now i will say db dot insert okay it's a a sync method so we have to write await and mark it async like that and now if you say db dot insert it will ask for the table name so we have table alarm with us and the value will be this alarm info simple isn't it now if you see this started giving error because if you point over the insert method it will say that it requires a table name and map of string dynamic so it doesn't store the object as it is it stores in the form of key value pair so we have to find a way that we can convert our object to key value pair and the best way to do is this website so i've just written a small json for my model this id there's a title and once you select the language it will automatically convert your json to this model and this we are going to paste inside our model which i have already done fine so let's move ahead and convert this alarm info to map either you can call it two json or two map it's one on the same thing the json works as a map inside that language so now it's storing the record inside the table perfect how we will come to know whether it's stored properly or not so let's capture the result and i will say like this and print the result okay result is this result cool now we have something to work with our database so we're gonna call this insert alarm once we set alarm so let's get back to the alarm page and let me minimize this one here so once i click on add alarm it gives you this interface once you select the time and click on save it will save it will schedule alarm basically so let's go ahead and modify that code right here here's the save button and here's the on press even just remove this schedule as of now because i'm demonstrating local database we don't need the notification to be triggering and here i'm going to create instance of our alarm info so why it's like that alarm info because we need to pass this alarm info to database so i'll create it first okay and here we can specify all the properties so what is the date time is this schedule date time what is the color index so i'm going to say whatever is the length of the alarm info so let me say like this so whatever is the current index then i'm going to store as a color index and other property id we don't need to define because it's auto increment property is pending it's a boolean that will work fine and title just gives alarm as of now you can provide anything from user interface if there's a way to capture that anything so basically what we did now is created an object which we're gonna store inside database so let's go ahead and create a way to access alarm helper so i'm going to create alarm helper at state level and using this alarm helper we have to initialize the database first so let's use this alarm helper dot initialize database and once the database gets initialized let's do some action let's just print that it has initialized so let's read on the application to see whether it's working or not but the database has initialized or not i'll recommend you to reinstall the application so that if there's any other table or if there's any other you know mismatch happening that will not occur so i'm going to stop the project and reinstall it real quick so our project is up and running let's move to alarm page and we can see that the database has initialized successfully congratulations before we move to database operation let me thank all my subscriber because of you guys i have reached 5 000 subscriber count thank you so much for that and i'm very excited to announce q a video which i'm going to premiere day after tomorrow on sunday or maybe saturday so make sure to watch that video as well and here's the comment of the week and channel of the week thank you so much for subscribing and writing your nice comment and if you're thinking how you can come in the next shout out you just have to write in the comment section below it doesn't always have to be the positive one you can write just how you felt with this video and anything which i like i'll put in the next shout out so without any further due let's get back to tutorial so we created alarm helper and using that we initialize the database now what we're going to do on click of save button which is here i'm going to use this alarm helper and with that i'm going to say insert alarm and we already have the alarm info defined fine so this looks nice let me just read on the application go to alarm page and click on alarm i'm going to schedule it for 8 13 pm okay save and comes here let me just play cool the result you can see here which we are printing from alarm helper is the row count which it returns so it successfully inserted the item in the table and here's the result we need a one more round of track we successfully inserted one record inside database and here's an extra tip if you want to visualize that database you can go to this website is called browser.org and download this for your windows or mac machine and then drag and drop that db file which you just created by opening up connection and there you can visualize your table records and everything fine so now let's move ahead in our tutorial and fetch this inserted item and populate inside alarm page so what we are doing as of now if i just dismiss this dialog this alarms are coming from hard coded data which you can see over here it's coming from this hard-coded value so we don't want that anymore instead of this alarms i'm going to fetch records from the database and for that again what we need is once the database has initialized properly we gonna request for records now there's a two way to do it either you can use alarmhelper.database directly over here and write a query or you can write a method inside your helper which is a preferred way to keep it separated and just say i want list of alarm info which you stored and which you own actually and say get alarms something like that will work and this should be i think a weight so i'm going to say async make it future you know the reason all right and how we access this first we need a db connection and it's going to give the same db remember it's not creating instance again and again and to fetch the result what we're going to say result is equal to a weight db dot query and on what table we're going to query table alarm fine so we got list of map of string so we got list of items now this is map of string if you remember we created these two methods so one method was to map your object to json or to map of string dynamic and the other method was to convert that map or json to your model so i'm going to say result dot for each element give me the alarm info first so i'll say alarm info is equal to so we need to construct alarm info from the json so i'll say alarm info dot from map or from json whatever you can call it and pass it element over here so each time we iterate through the result we'll just say alarms dot add alarm info cool so by this point we got all the alarms stored in the database we'll just return it return the alarms and we are done with the fetch operation it was that simple so let's get back to alarm page and use alarm helper to get the alarms here we have the alarms and it gives the future of list of alarm info so we need another variable at state level which will hold future of list of alarm info and this we can name as alarms over here something missing is one angular bracket and these alarms will get the value from here fine so we already performed insert operation now we are doing get operation which is a fetch operation we can also perform delete operation if you want you can leave the tutorial at this point but if you want to see me how i integrate it with my clock app series it's gonna take a couple of minutes you can stay tuned and watch me integrating the same inside our application so i'm gonna wrap this list view inside future builder i'm going to fast forward it little bit and say future is alarms and builder is this snapshot so here inside builder we are returning this list view if snapshot dot has data then do this otherwise at this point return text which says loading something like that let me rerun the application and now when i move to alarm page we got this loading label over here so first thing first let's make it center like that and when i go to alarm page again the loading is over here so now this list view is no more mapped with alarms we have to change that binding and provide our snapshot which we are fetching from database dot data and c we got the record inside our list so this is the alarm which we set it was at 8 13 perfectly fine so record started working we just need little bit of thing instead of getting this record over here what i'll do i'll create a method okay let's rerun once again go to alarm and here you have your record from db let's do one more operation real quick i'm going to go to helper and write one more method which is for delete so let's just copy it real quick and here you can find all the examples so i'm just going to copy this and paste inside here and i will say this db you know the drill we have to first get the instance of day b and we'll say table alarm where column id is this id all right and now if i restart we got this page let's go to alarm page and click on delete i think it happened so let's just reload and see whether the record is there or not if i go to alarm the record is not there so it deleted successfully i hope you people enjoyed the video write down in the comment section below what you felt about the video and make sure to visit the google forms link which is there in the description there you can provide your survey feedback basically i have asked five simple question over there in the nice multiple choice question format you can provide that and that will be helpful for my q a video make sure to hit the like button subscribe the channel if you haven't already and i will see you guys in the next one thank you so much for watching

Channel: CodeX

Views: 38,917

Keywords: design, flutter, tutorial, how to, android, ios, ui, latest, theme, app, Flutter ui, adobe xd to flutter, flutter tutorial, minimal design, flutter ui design, flutter ui, flutter animation, animation, layout, pagination, gradient, rounded corner, learn flutter, flutter dart, flutter custom paint, flutter sdk, provider, flutter navigation, clock app, codex, sqlite, database in flutter, local database, sqflite, flutter local storage, flutter sqflite, flutter sqflite tutorial, flutter sqlite

Id: WqQhJmwp5L4

Length: 19min 49sec (1189 seconds)

Published: Fri Aug 14 2020