Flutter Tutorial - SQL Database Storage Using Sqflite Package | Android & iOS

sometimes you may need to save some data locally from your application and if this data is structured you'll definitely need to use an SQL database we can easily achieve this using a small and self-contained SQL engine for flutter called SQ flight so we'll Begin by using the SQL flight package as seen here and we'll also use the path package which will help us in accessing storage locations in our device as seen here for this tutorial we'll see how we can carry out the simple create read update and delete functionalities using the SQL flight package therefore let's go ahead and create our task object and inside it we can put in the different properties that we want and for the task type we have created a simple task type inum which contains the elements today planned and urgent we have also added an extension tax type extension to get the name for each tax type element also don't forget to add the form string method which will help us in serializing the tax type when saving to the sqf FL database back in the tax class we can then add the Constructor for all our properties to make our implementation easier and our code cleaner we will also Define a table name for which I have defined it as stxs and we will also Define column names in the database which will correspond to the names of each property in the tax model class notice how we Define the ID field here as underscore ID also we'll Define all the columns in a list of strings which will help us later on in our code next we'll Define the different data types we'll use for the columns when creating in our database therefore I have created a bull type which is basically a Boolean that is not known next I'll create an ID type which is an integer that we set as the primary key with an autoincrement keyword so we can automatically assign an ID value for each element on the table next we'll Define the text type nullable which is simply a nullable text type and finally we'll Define a text type which is basically a text type that is not nullable for more data types compatible with the sqf light database you can check the official documentation as seen here finally don't forget to add your from Json method your two Json method and also your copy withth method which will enable for easy dis realization serialization and updating of the tax class it's time time to set up the actual database this next step is important because we cannot read and write any data to the database if we do not have an open connection therefore we create a class for which I have named app database and I have also added a private instructor inside it called underscore init next we'll also create a global instance for the class named instance which will also call the private construct app database doore init next we Define a new variable for the database instance which is gotten from the package after that we then create a database getter which returns a future of database inside it we'll first check to see if the underscore database variable created earlier is already initialized if it is we then return the same database instance if not we then assign it to an underscore initialize DB method to which we can then pass a file name for which I have created a file name constant here and I have named it as taxor database. DB finally we can then return the database instance as seen here now to create the initialized debut method we first create a method uncore initialize DB which returns a future database and takes in a string for file name inside it we first get the databases path using the sqf flight package get databases path method next We join the DB path and the file name so we can have the location and the file name of the database file finally we open the database by supplying the DB file path a version number and the uncreate Callback which is called when the database is created for the uncreate Callback we Define an underscore create DB callback which takes in a database and a version number as arguments inside the undor create DB callback we can then Define our specific database schema therefore We'll add a creation query to create the table for our tax using the db. execute method as seen here inside the method we can then create our multi-line string literal which will contain the query now to the query we first add the create table query with the table name variable we created earlier on in our model class file and inside the brackets we can then Define the different columns with their different data types for which I have done according to the tax model class properties as we defined in our class file now let's add our CW functions starting with the c for create therefore we'll Define a create typ tax method which takes in a tax argument inside it we get the database instance which we can then use to call the db. insert method we will use to add a new tax item to the table inside the db. insert method we then add the table name the tax that we want to create using the tojson method and then finally we return the updated tax object with the ID that we have just gotten from the db. seert method next we can add the r for the read function to do this we create a method called read all taxs this method will read or return a list of all the available tax stored in the DB inside this we get the DB instance which we can then use to call the dbquery method and inside the query method we Supply the table name and then finally we map and convert it to the tax object list using the from Json method if you want you can add an order by Clause to order the list in a certain way for this we are ordering by the due date in a descending order also don't forget to add a close method which basically calls the close method from the sqf flight package to close the database and free the devices resources when not in use now let's move on to the UI and Implement these two functions that we have just created for this tutorial we have a Floating Action button which opens a bottom sheet that has the form for our task containing the tax title the description the tax types the due dates and a simple switch to check if the tax is complete and also a button to create the tax therefore in our add tax bottom sheet let's start by defining our app database instance and assigning it in the state of our widget inside your unsubmit method we first of all check to see if the form is validated set the loading value and then save the form and after that is done we can then get the new TXS from the form data using the form Json method and after that we can use the app database instance and call the create task method and then we pass in the new TX we just created finally we can then stop the loading and pop the bottom sheet now to display the list of task from the DB will go to the homepage therefore I've created a simple homepage widget which extends a hook widget for which I am using the flutter hooks package as seen here now back in the homepage we have defined an app database instance called DB we've also defined some reactive variables for the task list and also the is loading State using the used state from the hook widgets next we'll also create create a simple body widget variable with a late initialization which we will use to set our body widget after that we create a refresh tax method which inside it first sets the is loading states to True after which it then sets the task state to the value returned from calling the db. read all tax method we created earlier on in our app database class and finally we can then set back the is loading state to force once that's done we can define a use effect method and inside it we call the refresh tax method we just created after which we can then close the database to avoid overuse of resources Now using the loading State we can set the body variable to a loading widget we have created if it is loading if the tax list is empty we can display a c custom empty list widget as we have seen here and if the tax state is not empty and the loading state is false we can then set the body to a list view which displays the list of tax item and then returns in the item view D the task tile widget which we have created and now in the scar fold we can set the body of the scar fold using the body variable we have just assigned and also we have added a simple Floating Action button which which calls the show add task bottom sheet which we have created here to call the add task bottom sheet we created earlier now before we can use the implementation let's go to the main. that file to make some changes first of all let's turn the main function to a future and inside it we first ensure that the widgets flutter binding is initialized then we can also initialize the app database instance calling the app database. instance. database then finally we can run our application now after starting up the application we can tap on the button to add a new task and after adding the different fields if we tap on the create button we can see that the bottom sheet closes and a new tax item is added to the tax list from the database and even if we carry out a hot restart we can see that the application still persists the data we have just created now to update the U for the update function we simply come back to our app database class and add the update tax method like this which returns a future int and the update tax method takes in an argument of task and using the DB instance we can call the update method from the sqf flight package and then we can supply the table name the tax to be updated using the tojson method a wear Clause to which we set it to the ID field as seen here and finally in the wear a list we add the tax ID now in the add tax bottom sheet widget we had created earlier let's start by adding a newable task property which will not be new if we tap on a tax item to edit it using this tax property we can then create a state using the used State method for our task and assign it to the widget. task also we can set the initial value of our form using the tax property we had just set for this tutorial we are using the formore bua package to handle form validations and other form data to learn more about this you can check out our tutorial on this topic from the description finally in the unsubmit button instead of just creating a new task by calling the db. create task we first check to see if the tax property is new if it is we know that it's a new tax and then we call the create task method otherwise we call the update tax method with the updated tax using the copy withth method as seen here and back in the homepage in the show add taxk bottom sheet method we can then add a nullable task object as an argument and after that we can pass it to the add task bottom sheet widget like this finally in our list view widget under the tax style widget we can add the unedit call back from our tax stle widget which simply calls the show at tax bottom sheet with the task item assigned to which we want to edit and then using the den method we can then refresh the whole list once the sheet is closed and after a hot restart when we tap on the task item we expect it to open the add tax bottom sheet which it did inside it we can make some few changes to the items and once we tap the save button we can see that our tax has been updated with our new values finally to implement the D for delete functionality in the app database class we create the delete tax method which returns a future int and takes in an INT ID as argument and using the DB instance we can call the delete method to which we pass the table name next we pass the wear clause and set the ID field as we have seen here and finally for the wear ARS list we can then add the ID argument inside and for the UI in our tax stle widget we have simply added a dismissible widget we have also set the key using the value key to the tax. ID we have set the direction to dis Miss direction. end to start we have also set some background customizations and then using the UND dismiss callback we then call the undelete call back and now back in the homepage under the tax style widget we can then add the undelete call back which then calls the db. delete tax with the tax ID supplied and then we can call the refresh task method to refresh the whole list once the delete is done and with that saved if we swipe on a tax item to delete we can see that it has deleted the item and even if we reload the app by restarting it we can see that the item has truly been deleted successfully and with this we can see that we have successfully implemented a crude functionality using the sqf light package if you found this tutorial helpful don't forget to like share and subscribe to this channel thanks for watching

Channel: HeyFlutter․com

Views: 2,754

Keywords: Flutter, dart, flutter and dart, flutter development, flutter sqflite, flutter database, flutter local database, flutter android local database, store data flutter, store data sqflite, sqflite flutter pakcage, learn sqflite, sqflite packge, sqflite crud operations, flutter store data, flutter local storage tutorial, flutter tutorail, learn flutter, learn local database, persist data locally, flutter persist data, flutter database local

Id: bihC6ou8FqQ

Length: 16min 0sec (960 seconds)

Published: Thu Apr 04 2024