Sqflite Tutorial | Flutter plugin for SQLite | CRUD

hello everyone today we're going to talk about sqlite [Music] in our last two videos we have been working on a grocery list app both apps had a list of grocery items a method to add a grocery item and a method to delete the grocery item in the first version though if you closed the app and reopened it the grocery list was no longer there in the second version we connected it to cloud firestore so your data would still be there but you are required to have good internet access to interact with firestore and if this grocery list is just for you and will only be used on one device then that's an excessive step that may be best to be avoided so we are going to connect it to a local database on your device instead specifically sqlite this app will have an app bar a floating action button and a list view to show the groceries our grocery item will be simple it will just have an identifier and a name and then we will have a database helper that will help us with all of our database actions when you first start the app it will attempt to get the groceries from the database since this is our first time to run the app it will just show no groceries in list when you type a grocery item into the task bar and press the save button it inserts the grocery item into the database and then on refresh it grabs the groceries from the database again and since it found some it shows them and when you press on a grocery item and hold it the grocery item will disappear and to round out full crud operations will do a quick and dirty update option that will allow you to change the grocery item plus a few bonus items along the way let's go ahead and start by doing our typical tutorial boilerplate i'm going to import material [Music] i'm going to set up main and run app [Music] we're going to do a stateful widget here by typing in stful we will do material app and scaffold and an app bar [Music] we'll go ahead and run that and see what it looks like and there we go looking good so far so now in place of the text in the app bar we're going to add a text field so we will start by creating a text editing controller called text controller now we'll replace the text here with the text field and add the text controller to it now we will add a floating action button and when it is pressed we will just print the text from the text field to the console [Music] so now when i type test text up here in the text field and i press the save button you will see test text in the console now we will go ahead and add sqlite to the application which is what connects sqlite to it we'll click terminal down here at the bottom and we're going to type in flutter pub add sqflight and now that we've done that we're going to go ahead and install path provider as well which is a plug-in that helps you find commonly used locations on mobile file systems we're just going to type in flutter pub add path provider all right now that's done we should be able to go into our application and look at our pub spec yaml file and you should see sqf lite and path provider in there i'm going to go ahead and hit pub get one more time just to make sure everything did get installed correctly now let's go ahead and create our grocery model we're going to go down here to the bottom of the page i'm going to create a grocery class we're going to add an id and a name we add the question mark to integer because id can be null if we're creating it and we'll go ahead and make name required so now we're going to add a factory called from map and we're going to add a method called two map [Music] okay that should be it for our grocery model now we're going to create a database helper class which helps with you guessed it the database so let's create the class and let's make it a private constructor which will create a singleton or a class that only has one instance we will put this at the very bottom after the grocery model now we will set up the variable that will hold the database initialization first we need to import sql lite into the file [Music] now we'll go back to the database helper class and add a few lines so what this is saying is if this variable doesn't exist then it's going to initialize the database otherwise it's just going to use the set variable but we're missing a net database so let's go ahead and add that now before we do that let's import a few things at the top [Music] so now we will come back down to the database helper and create our init [Music] database [Music] so to explain what the imports at the top are doing the dart i o import at the top provides support for directory path provider provides support for git application documents directory and path.dart gives support for join so init database opens the database which is groceries.db version 1 and if it doesn't exist we can run the oncreate method on creation of the database so we need the oncreate method now we'll put it below init database [Music] so as is probably self-explanatory this will create the groceries table when it creates the database so now we are going to get the groceries from the database and display them inside a list of you let's put the get groceries method inside the database helper class [Music] then up here inside main we need to ensure the widget's flutter binding is [Music] initialized [Music] now we are going to add a future builder into the body of the scaffold [Music] [Music] so loading this so far you'll see it just says loading so we're going to add a ternary operator or a simplified if then statement to show a message when there's no data to display and now it says no groceries in list so obviously our list is empty at the moment so let's go ahead and add the ability to add groceries to our database down here below get groceries we're going to add an add method [Music] and now we will add the text on the text field to the database when the floating action button is pressed so now i'm going to type in apple's up here and i'm going to hit save and there it is in the list now we will add the ability to remove a grocery item we're going to make it to where if you long press on a grocery item it will delete it from the database and remove it from the list first we will put the remove method at the bottom of the database helper class [Music] and now we will add the long press entry in the list tile [Music] so now i add a few more things to the list here i'm going to add some bananas and i'm gonna add some oranges and now i'm going to delete bananas by clicking on it and holding it and there we go so normally i would just stop here because you really don't need the capability to update a grocery item you can just delete it and recreate it but let's go ahead and do a quick and dirty update so you can see full crud capabilities we'll go ahead and add the update method to the database helper now what we're going to do is when you short press or tap on the list tile it's going to put the text in the text field so you can edit it and save it let's put a variable at the top called selected id so we know when an entry is selected [Music] again we put a question mark on integer because selected id can be null if a grocery item isn't selected now we will add the ontap call to the list tile so all this does when you tap on the list tile item it set the grocery name into the text field and then tells the app the current selected id is the id of the grocery item you tapped on so we'll give it a test by just tapping quickly on oranges and we now see it's in the text field let's put some code in the floating action button for it now so what's going to happen is when you press on floating action button it's going to see if the selected id is set if it is it's just going to update the grocery record in the database using the selected id if selected id is null though it's going to add a new entry let's give it a try i'll click on oranges i'll add in edited i'll hit save and it updated it i'll go ahead and type in bananas and hit save to show you that the ad still works correctly as well so that's all the functionality but as a bonus we're going to go ahead and clean it up a little bit and make it a little bit easier to understand let's start by adding a card around the list tile i'm going to right mouse click on it show context actions wrap with widget and we'll add a card that looks a little bit better there and then what we can do is add some coloring to where when a grocery item is selected it's highlighted [Music] so what this is going to do is if an id is selected it's going to change that record to gray otherwise it's just going to be white so we will click on orange as edited and you'll see it is now gray so what if you start editing a grocery item and change your mind we could add a close button up here or we could add a cancel button but i'm just going to make it to where if you click it again it unhighlights and clears out so in ontap here we'll do an if then statement [Music] so if you click on the list tile and an id is not already selected it will add the grocery name to the text field and set the grocery id to the selected id if there is already a selected id it's going to clear out the text field and mark selected id as null so you'll now see clicking on it again clears it out and removes the selection now it's not perfect you'll notice that if i select this and put that up there and then i select bananas bananas will even clear it out in a real life scenario we would probably either want to make sure that this one is just unselected or it goes ahead and selects bananas but we're just trying to do a quick and dirty update example so that's going to do it for this tutorial we could write it a different way we could also do it to where it stores into a list which would be fewer rights to the database if y'all would like to see that way let me know and i'll do a version of that as well so you might also like this video if you want to check that one out and also if you're liking my videos and would like to see more please consider subscribing thanks and i hope to see you in the next one you

Channel: Learn Flutter with Me

Views: 49,169

Keywords: flutter sqflite, flutter sqlite, sqlite in flutter, flutter sqlite database, flutter sqlite tutorial, flutter sqlite crud, flutter sqflite tutorial, flutter sqflite crud, sqlite tutorial, flutter sql tutorial, flutter tutorial

Id: noi6aYsP7Go

Length: 15min 47sec (947 seconds)

Published: Sat Jun 19 2021