Build A Real App Using FlutterFlow and SQLite

now in today's video we are going to be building a real app using sqlite now if you recall sqlite is an amazing high performance super reliable database that fits in just one file so unlike something like Firebase super base or pocket base you don't need a server you don't need any architecture you don't need to pay for a a different service apis and all that you can actually store all your data on one file and buy bundle it with your apps so anytime you're going to be Distributing your apps they're going to have that database so it's going to be always online always available you're going to have online offline access it's a very very cool solution for certain applications so in today's video we are going to be building a real app a real functioning app with sqlite as our backend now before we get started as always all the apps and all the resour sources that I mention in these video tutorials are going to be available to view Andor clone from my patreon page and so if you're not yet a member then you should definitely consider becoming one and you can learn more about our amazing patreon Community via the link in the description below the video now before we start building the app it's very very important to design your schema to design all your views to essentially talk about what your app is going to be doing and so this is our sqlite expense tracking app and so the idea here is that you'll be able to log various expenses in various categories and we're also going to have some extra features such as a budget management module and you'll also be able to set your expenses as recurring and so this app is going to have a homepage where we're going to be listing various maybe the latest expenses as well as some other links to different parts of the app we're going to have the expenses page and here the users will be able to add edit or delete various expenses you will be able to set and expense as recurring via this recurring expenses page okay on this recurring expenses page you'll be able to take one of the expenses here that you've previously entered and make it recurring and on this page here you'll also be able to uh manage it right manage all your curring expenses so you'll be able to add edit or delete an expense uh basically setting it to a regular expense turning it from a recurring to a normal expense and last but not least we're going to have a budget management page okay and so here you'll be able to set budgets on a category basis so essentially you're going to be linking various expenses to categories and on a specific category you can set a particular budget okay okay so this is how our app is going to be looking this is basic this is the UI here this is how the users are going to be interacting with our app so if we take a look at the SQL schema here we're going to have the categories table and we're also going to have a budget stable okay and so inside the budget stable we're going to have a category ID which means that we'll be able to link a specific budget to a specific category so that the budget is on a category level on the category basis next we're going to have the expenses table and inside the expenses table we are also going to be tracking the category ID for each of the expenses okay so that one to menu relationship essentially and last but not least we're also going to have the recurring expenses table where you can define a type of an expense that will occur over a specific period of time so an expense that's going to be repeating itself and here you can essentially Define find you know how often that expense will occur so if it's daily weekly yearly monthly etc etc and then once you've defined it here you can link it to a specific expense and that way you are essentially turning a regular onetime expense into a recurring expense so things something like a rent payment a mortgage payment a cable bill insurance bill etc etc okay now the next thing that we need to do is we need to create the actual database we need to have the actual file that we're going to be uploading to flutter flow which is the no code Builder that we're going to be using in order to build our app now in order to create the database I'm going to be using a tool called table plus and there's lots and lots of different tools that you can use tons and tons of different tools depending on what kind of platform you on and I'm actually using a Mac and table plus is built for a Mac and so I can use it here but there's lots of and lots of other uh tools that you can use to create your own database and so I'm going to click here and I'm going to select sqlite I'm going to click on Create and I'm going to give it a name so I'm just going to call it SQL sqlite database here and here I want to give it a database path and here you just want to select where this file is going to be stored so I'm going to go ahead and select a directory here we're going to call it sqlite database and I'm going to hit save and at this point we have created a file that's going to be storing our entire database and that is why sqlite is so special it's because all you need is just one file and you can bundle it with your apps you don't have to worry about online or offline connectivity or none of that it's just one file so now that we've created the file here we need to create our tables next and for that I really really like this tool called SQL light studio and I believe this tool can be used across all kinds of different platforms I know it definitely supports Mac and I also believe it also supports Windows as well as Linux and so definitely check out this tool it makes it super easy to manage your sqlite databases next you want to click here and add a database and here you can select where your database is stored so I'm going to select my database here click select open and now we have this database open here and so at this point we can start creating our tables creating our views and also have some initial data that we can have there for testing although that is an optional step so the next thing that I'm going to do is I'm going to click here and I'm going to create a new table and so what kind of tables do we need to create well we need the categories table okay so I'm going to say categories here next thing I'm going to do is add a column here which is a field and the field that we're going to add first is an ID okay so we're going to say data type is in integer and we're going to make this ID as the primary key okay so you can also configure it we're going to say Auto increment and that's about it update okay and so now we have our first field here the next field that we want to add is the actual category name so I'm going to click here I'm going to add a new field I'm going to say name and the data type is going to be text and we don't really need to click anything here click okay and now we have two Fields here okay and at this point you can add more Fields if you want but right now this is good enough for this table and so at this point we have one table called categories the next table that I'm going to be adding is called expenses I'm going to click on create table I'm going to say expenses now expenses needs to have a link to categories so it's going to have one foreign key that will enable us to figure out which categories the expenses belong to and so what I'm I'm going to do here is pretty much the same thing that we did previously except I'm going to keep that one foreign key in mind because we need to add it and so I'm going to create add a column right here and I'm going to start with an ID I'm going to do an integer here primary key okay so we have this is our primary key here next thing we want to add is the name of the expense we're going to do text click okay and last but not least I want to add a foreign key that's going to link this new table expenses to C categories so I'm going to add a column name and this is going to be expense uh category ID this is going to be an integer and I'm going to link it as a foreign key I'm we're going to configure it and the foreign table is categories which is the only other table that we have and the foreign column is ID hit apply hit okay and now as you can see we have three columns here or three fields we have the ID which is the record ID we have the name which is the expense name and we have the category ID for key as you can see it links back to this categories table so we're going to save these changes click okay and it says here committed changes for the table expenses successfully okay so now we have two tables here but we still need two more let's go ahead and add a budget table here so we're going to click here budgets we're going to add a column we're going to start off with id id is going to be an integer primary key next we're going to add another column and because budgets are set on a category level we want to add a category ID here okay so this is going to be a category ID and we're going to say this is integer and this is also a foreign key because this category ID is not just any ID it links to a record in a categories table so we're going to select this select categories and select ID right here now next I want to add another column and that is going to be the limit amount okay so I'm just going to say limit amount and this is the liit limit for a specific budget right for a specific budget in a specific category and we're going to select integer and we're going to hit okay okay so now we have our budgets table there's the record ID there's a category ID because each budget is on a category uh level on a category basis linked to a specific category and we have the limit amount so that we can set a limit on a specific budget I'm going to go ahead and save all this and now this has been successfully saved and and last but not least we want to create this table called recurring expenses okay so I'm going to add another table here I'm going to say recurring expenses and what kind of uh Fields do we need well we need the ID we always need the ID so that is going to be their primary key now when we initially talked about our schema we talked about having recurring expenses linked to an expense and so all the data should be here and this is going to be kind of this extra table that will specify some additional data but after thinking about it for a bit I decided to make this a separate table so we're going to have expenses and we're going to have recurring expenses as independent tables and so here what I'm going to do is I'm going to just add all the fields that I need for storing expenses along with another field that tells you know how often this expense occurs so I'm going to add another column this is going to be the amount the amount of the expense and I'm going to make this an integer we can change it to something else later hit okay next I'm going to create a column for the category right because this is an independent table and expenses need to be linked to a category so whether this is a regular expense or an uh an a recurring expense it needs to be link to a category so we're going to click here and I'm going to say category ID and this is an integer okay and this is a foreign key and I'm going to say categories ID apply okay and last but not least we need another another column that will dictate uh how often this expense occurs so I'm going to add another column and I'm just going to say frequency okay and the data type is going to be a text and that way we can simply describe the frequency whether it is daily weekly monthly by simply describing it so I'm going to say okay and now we have a recurring expenses table which is kind of like expenses but we also have another column that specifies the frequency of the expense so go ahead and save it here click okay and now it has been successful and at this point we have the four tables so we have the categories which is you know just a standard basic table we have the budgets that specifies the amount per a category here we have expenses which has ID name and category ID we do need another column here which is the amount so I'm going to add amount here I'm just going to make it an integer and next we have recurring expenses now for the recurring expenses we have ID amount category and fre frequency but we are missing the name of the expense so we need to add a column here just going to say name and that is text okay so expenses and recurring expenses should be almost identical except that recurring expenses has another um field here another column called frequency so we're going to go ahead and save all that click okay and everything has now been saved successfully and so at this point we have our schema for our expense app and so what I can do is I can add some data to it right so let's say I want to go into categories and I want to add some data so I'm going to click here and I'm going to create a couple of Records okay so I can so I'm going to click here and I am going to give this a category name so let's say this is travel expense I'm going to add another column and let's add another one let's work in threes and this is going to be Health some kind of a health expense all right so now we have three records in our categories table here next we want to go into budgets and create our budgets so here we are in budgets go to data and we can create various budgets for different category so let's go ahead and create a couple of budgets so let's say category ID is one and the limit amount is let's say 100 let's say another one category ID is two let's say this is 200 and category ID is three let's say this is 300 next you want to click on Commit that's going to go ahead and commit all your changes and now our budgets has specific budgets for various categories next let's go into expenses and add a couple of regular expenses as well as some recurring expenses as well so let's say this is Airbnb category ID I believe one is travel and the amount is let's say 100 let's add another expense let's say this is dentist and let's say categories three let's say it's 150 and let's go ahead and commit these so now we have a couple of regular expenses and let's go ahead and add a couple of recurring expenses going to data add one here and let's say this is 50 category D let's say it's two frequency is let's say monthly and the name is I don't know cable bill cable let's add one more 100 let's say category ID is I don't know frequency is monthly let's say Insurance okay and let's add one more amount is let's say 500 category ID is one let's say monthly let's say this is rent or something okay let's go ahead and save all that click here commit all that and now we have recurring expenses so if we go into expenses we have two records here we have three records for categories and we have three records for budgets and so at this point we have our database fully configured fully set up and we also have some initial data as well and so now that we have this phase done we can start designing our app and upload this data datase so that our app can take advantage of the data here next we're going to go into flutter flow which is an amazing no code Builder that we're going to be using to build our app so I'm going to go ahead and log in and here I am in my account looking at my dashboard and if you don't have an account you can simply create one it's uh 100% free they have a generous free plan we're going to click on create new and we are going to create an app we're going to call it sqlite expenses create blank here come in here you want to uncheck this start building now before you start building what you want to do is you want to come here settings and Integrations and you want to scroll down to SQL light you want to enable SQL light and here you want to upload the SQ light database file come back here and select the database here this is our database right here and that's going to go ahead and upload it you also want to give it a name so I'm just going to call it SQL DB that's good enough now the next thing that we need to do is we need to specify both read queries and update queries okay so when you're building your app you want to be thinking about how are the going to be the different ways that you're going to be pulling data as well as updating existing data so you read queries and you write queries now let's go back and look at our app that we have so this is our homepage and on the homepage we want to display maybe the last couple of expenses okay on the expenses page we're going to be displaying all the expenses on the recurring expenses page we're going to be displaying all the recurring expenses and on the budget management page we're going to be displaying all the different budgets that the user may have configured and so this right away tells you the different queries the different ways that we're going to be getting the data reading the data okay so now we can go back to FL oflow and we can add a query and so let's go ahead and add a query that's going to be pulling all the expenses so we're going to click here give this query a name get all expenses and here you need to specify a seite query okay so our query is going to look something like this select from expenses okay now your query can also have variables and you need to specify the output columns okay so what are going to be the output columns in this query and you know what are the output columns that we care about so if you go back to our schema here and you take a look at expenses here we have the IDE we have the name we have the category D and we have the amount so right now all I'm interested in is the name and the amount okay I just want to display the actual expenses I don't really care about the category at this point just the name and the amount and so here you need to add this column so this going to be the name column and there's going to be the amount column okay so the name is a string the amount is an integer all right so now we have one query here that pulls all the queries and makes two output columns available namely the name of the query and the amount that we care about right now now the next query is going to be listing the recurring expenses we're going to come back here we're going to name this query get all recurring expenses and we're going to say select from recurring expenses and the output columns are going to be very very similar except we also need to pull the frequency so the name the amount and the frequency right so name and frequency okay okay so the name is a string amount is an integer and frequency is a string and you can deselect these and add query okay so now we have two queries but we need one more and the last query is going to be the budget query right so this is where we're going to be pulling all the budgets that we have set up so we're going to come back here add a new query so here we're going to name this query get all budgets and if we take a look at this table here we have the category ID so we don't have the actual category and it would be nice to display the actual category and so what this means is that our query needs to be slightly more complicated we need to essentially link back to categories so that we can display the actual category name here and for that we can simply head over to chat GPT and ask chat GPT to create a join for us and that way we can join these two tables budgets and categories so that we can look up the actual name of the category here and so for that you can simply click on this tab here and you can copy all this here and you can paste it into chat GPT and you can say something like here I have two tables and come back to categories do the same thing here Bas it here create a query that displays the following okay and what do we want to display well what we want to display is we want to display the category name and the limit amount okay so category name and limit amount okay you need to do a join okay press enter and that's going to go ahead and create a join for you very very quickly and easily okay and there's your new join and so you can copy this query here go back here and here you can open a SQL editor right so you can simply paste this query here and execute it by clicking on this play button and when we do that we get the right amount you see how we get the right amount and you can use this exact query in lot of flow so this ghet all budgets you can simply paste this query here okay and for the output columns well what are the output columns the output columns are the name and the limit amount all right and here we change the limit amount to just the amounts to simplify things and now you can take this entire query go back to your flutter Flow app and paste it in here okay so now we have this query ready and what are the output columns well we only have two output columns one is name and the other one is amount so we're going to say name name here which is a string and the other one is amount which is an integer here you don't need that add query here and now we have three queries get all expenses get all recurring expenses and get all budgets okay so now we at least have a database uh here in our app uploaded to our app and we have the three read queries okay so that is enough to start building our app so now let's go ahead and start creating our app so this is going to be our home page here and what do we want to do on the homepage well on the homepage let's go ahead and just display the expenses let's just uh display the expenses and then we'll see if we want to do something else so we're going to add a list view here and inside the list view we're going to add a row and inside the row we're going to add two text widgets here we're going to Center the row and let's go ahead and style the row with a maybe a card so something like this let's go ahead and add a little bit of padding make it something like this it's starting to look better now for the list view you want to select it click here add a query and for the query you want to select sqlite query okay and here you can select all the sqlite queries that we have just defined so I'm going to select get all expenses here click confirm confirm and now for each of the fields we can select with the columns that we have defined for the query right so we have this first and last column and what do we want just the name and the amount and the amount here confirm okay so this should list all the expenses that we have okay and these are going to be just the regular expenses okay we can display both if we want but right now this should suffice the next thing that I want to do is I want to add another page that's going to be listing the just the expenses a page that's going to be listing recurring expenses and a budget management page okay so let's go ahead and create a couple of these more pages let's go ahead and duplicate these Pages go ahead and duplicate that and let's name this Pages homepage this is expenses this is going to be expenses recurring and last but not least we have the budgets I believe budget management page okay so something like this next we're going to go into expenses we're going to change this to expenses and we're going to load all this via a different query okay so we're going to edit this and we're going to say get all expenses so in this case it's actually the same but with expenses recurring it's going to be different so we're going to say expenses recurring here we're going to come in and we are going to change this to get all recurring expenses we we need to now change the fields so it's going to be name amount and also the type of uh recurring expense amount and we also need to duplicate this here because now we need to specify the frequency as well okay and last but not least is the budgets right so the budget management page budget we're going to come in here we're going to select get all the budgets confirm let's go ahead and list them name and amount and this is the category right so this is going to be the category so this is going to be the the category and the amount next thing I want to do is I want to create a Navar so that we can easily navigate um among all the pages here so I'm going to search for our navbar turn it on and then for each page I'm going to turn it on as well I'm going to go into homepage show a nav bar so we have one nav bar here for the homepage for the expenses have it here and let's see if we have something like expenses dollar so something like this expenses recurring also needs a Navar this is going to be this is going to be more difficult so let's go with money maybe another so something like this maybe okay and budgets also going to be more different difficult budget something like this I don't know money uh yeah maybe something like this okay you guys you guys can change it to something better I'm not really good at this and so now we have the the homepage we have expenses recurring expenses and we have the budgets pan where we can look at different budgets maybe modify them etc etc now when it comes to actually testing this app you can't really do this via this flf flow functionality so things like test mode or and run mode and that is because uh sqlite right now does not support the web mode okay so it's going to work fine in Mobile so iOS Android is going to work perfectly fine and it also supports desktop mode so if you're building a desktop app it's also going to work fine it does not support the web mode but I feel that's going to be fixed in the near future because it needs to support the web as well for testing and if you also want to build a web app and so what we need to do is we need to download the code and we need to run it on our own computer on a simulator or a real device and so I'm going to download the code and I'm going to run it on an Android simulator to make sure that everything works as expected so we're going to go ahead and download this code here all right so I downloaded the code and unzipped it and this is our flutter app that we can run we can publish we can give to a client we can do all kinds of interesting things but what I want to do is I want to test it out in a simulator in an Android simulator because if it works on an Android Android simulator or on an iOS simulator that you know it's going to work on a real device and for that we're going to open up visual studio code here and we are going to open this folder in there all right so I have the app open here locally on my computer and what I'm going to do is I'm going to run it in a pixel 7 emulator okay so we're going to select the emulator right here and that's going to go and load up our pixel 7 emulator which you see running here and now we're going to go ahead and run it in this uh emulator here and hopefully it's going to run just fine without any major issues all right and here's our app running in an Android simulator and as you can see this is our first page this is the homepage we have the tabs here and this data looks to be correct because here we are listing the latest expenses and if you recall I had the dentist and an Airbnb here and here we can click and we can take a look at the expenses that we have these are the expenses these are the recurring EXP expenses here and as you can see rent insurance cable and we have the numbers here and here we have the type of expense the frequency and if we come to this last tab we have the budget so we have a $300 travel you know 200 entertainment and a 100 Health budget so as you can see everything works as expected it's loading up our SQL database it's running the queries everything works exactly as expected and so the next thing that we're going to do is we're going to add more functionality to this app chiefly we're going to add the ability to add delete and maybe edit existing expenses here so that the users can add more expenses as well as ADD recurring expenses as well as ADD maybe different budgets or edit their existing budgets so here we are back in FL oflow and before we built out this new functionality that's going to allow the users to modify their expenses add new expenses delete expenses we need to go back to our SQL Light page and we need to create the queries okay because while we have the read queries right now for displaying the data we do not have any queries that will allow us to modify the data and so what kind of things do we want to do well the first thing that we want to do is we want to modify just regular expenses so we may want to delete an expense we might also want to update an expense and we might also want to create a new expense so there are several new queries that we need to create for each entity okay so let's start with regular expenses so here is going to be query for adding a new expense so add new expense here and how exactly are we going to be doing it well you can use a query such as this one insert into expenses and here you want to specify the columns followed by the values and so if we go back to our table schema here we go into expenses this is what the stru stru is right we have the ID name category ID and amount and so when the user is going to be adding an expense they're going to be adding all of these things except the ID which is going to be added automatically and incremented automatically so we're going to be adding things like name category ID and amount so I'm going to specify it here name category ID amount next you want to say values and here you're going to specify the values now these values are going to be dynamic we do not know these values at this moment but while the app is running you know the user is going to be doing this and that is why these values are going to be dynamic and so for that we need to add these variables here so we want to create a various variables that we are going to be using in this SQL query okay so the first variable is going to be the name of the expense the second variable is going to be the actual category ID so category ID here which is going to be an integer and the last variable is going to be the amount okay which is going to be an integer as well okay so now if you hover over this variable it's telling you how you can add these variables into your query so as you can see it says to use a variable simply use the syntax dollar sign uh open curly braces the variable name and close curly braces okay so that is exactly what we're going to be doing so dollar sign name next we're going to have category ID and followed by amount now now for the name here you want to make sure that you enclose it in single quotes here because this is a string so this is important and now we have an insert query here so you can simply click on ADD query and we have the first query here now the next query that I want to create will allow users to delete different items so we're going to click here add query and we're going to say delete expense okay and the way that we're going to be deleting is going to be like this delete from expense is where ID equals to some ID and that's going to be filled in by the variable this is going to be the ID it's an integer and you can simply specify it like this dollar sign ID add query here and a quick shortcut for generating these SQL statements that you need to be using is you can simply go back to your data in sqlite studio and what you can do is you can simply click on a row right click and you can generate query for select itself so let's say hypothetically you want to delete one of these records here you can simply right click and click on delete and that's going to go ahead and and generate a query for you okay you don't need to execute this query unless you absolutely have to but you can use this query when you are creating your queries in flat flow so as you can see this is the query that we needed to create delete from expenses where ID equals 2 and this is exactly what we did delete from expenses where ID is going to be filled in by this ID uh variable ID at runtime dynamically so now we have two queries to write queries for expenses let's go ahead and do the same thing for recurring expenses and also for budgets as well so here's a quick shortcut you can simply click here and you can duplicate this query so let's say we duplicated and now we can click here and we can rename this query so this is add new expense and we can do add new recurring expense and because this query is going to be very very similar to this previous query to this original query we can simply duplicate and we can say uh I believe it's called recurring expenses we can say recurring expenses and what do we need there we need we need amount category ID frequency name and so we have name category ID amount we just need the frequency what is it frequency frequency and this is going to be the frequency and frequency needs to be enclosed in single quotes here because it is a string just like the name here and now we can add a new variable and this is frequency frequency and string okay all right hit save and now we have this um this new query here that allows us to add a new recurring expense now we also want to have the ability to delete recurring expenses let's go ahead and duplicate this here click here delete recurring expense and here what's the name of the table recurring expenses recurring expenses ID is ID hit save okay so now we have the ability to add new expenses add new recurring expenses and delete you know the expenses and recurring expenses let's go ahead and add a new query for creating a new budget as well as deleting a budget so I'm going to duplicate this query right here I'm going to say add new budget insert into Bud budgets so budgets yeah budgets and what do we have ID category ID and limit amount so we need the category here in certain the budgets name category ID amount so all we really need is the category ID and the limit amount so so we're going to remove this name we need the category ID and the limit amount so we're going to say limit amount and we are going to remove the name category ID and the amount and that's it so category ID limit amount remove this and that's all we need to do okay that's going to uh add a new budget and last but not least we want to delete a budget duplicate this delete budget so simple pulling off and here you just need to modify the table cuz everything else is the same delete from budgets where ID equals ID here all right so now we have a bunch of queries we have six new queries that we've defined that we're going to be using throughout the app and the next thing we need to do is we need to start making use of these queries now the first thing I want to do is I want to have the ability to delete expenses okay let's say we made a mistake we didn't input it correctly we we want to delete it so for that you're going to add an i icon button here towards the end and this icon button is going to be like garbage is a trash so kind of this trash icon that's going to allow us to delete it we don't need a border color we don't need a we don't need a fill color okay that looks pretty good to me and now that we have this button we can attach an action that's going to be deleting this specific expens so we're going to click here and here what we want to do is we want to type SQL and we want to select update query once we update select that we can select the specific query so here we're going to be deleting an expense delete an expense and we're going to pass a variable what is the variable ID where do we get ID well from here but the problem is we're not exposing this variable okay so we need to make sure that we expose it as well so let's go back to SQL we need to make sure that here in these read queries we are exposing this variable as well so I'm going to say ID and this is an integer say save and I want to do it for all the queries cuz we may need these IDs we never know okay name is an integer save and the same thing here and here we're not actually you know listing it okay so what we need to do is we need to say budgets ID okay so that way we have this ID output it and integer okay and we and if we have any doubt we can copy this query here go back to sqlite Studio click here and we can paste it and run it just to make sure that we getting these IDE IDs and this this is good practice cuz we can't really test this app in flat flow so we need to test it here and as you can see we're getting these IDs so that is fine okay so now we're going to have these IDs so now we can go back and we can do it correctly so now the ID is exposed correctly we can just pick it up here and now we have this ID here and this will allow us to delete a specific um specific expense but we are not done we also want to refresh the page okay so we're going to add another action navigate to expenses and you want to do an instant okay and that way we're going to be refreshing the page and uh so that the user can see uh the new data and for the allow back navigation you want to disable because there's no need for them to go back because this is now the current state right we're modifying State okay so now we have this here let's go ahead and do the same thing for the other ones let's go ahead and copy this this uh action action chain here copy this expenses Rec curring let's add this icon here icon button and let's go ahead and make it uh yeah that is fine I'm going to clear this clear this and this should be a trash icon right trash icon let's go ahead and add open this paste our actions and here we're not going to be deleting expense we're going to be deleting a recurring expense okay come back here ID select ID and we have this ID exposed and this should be two expenses recurring perfect so now we have this and last but not least go into budgets come back here and we need an icon button and uh we can clear the colors here clear this make that trash again maybe use something else I don't know how about this that looks something maybe yeah that looks a little bit different go ahead and open this paste this change that to delete budget ghetto budgets ID here we want to redirect to budgets looks pretty good to me all right so at this Point we've added the delete functionality let's go ahead and download the code and let's try to test it out with our emulator so I'm going to download the code right here to our new app all right and here's our new app up and running so if we go to the second tab this expenses tab we have these new buttons here we go to the recurring we have these new buttons and we go into budgets and we have these new buttons let's go ahead and test this functionality and so let's say we want to delete this dentist here okay let's say we made a mistake we don't want this to show up we can simply click here and that went ahead and deleted it and it redirected back to expenses and when you're testing this app you can see some of the things that are happening here as well so it's telling us it's going to expenses so some useful logging informations okay if you get stuck now if we go to uh recurring expenses we can do the same thing let's say we've decided that we've cancelled cable we watch YouTube anyway we watch James no code we don't really need any cable we can simply click here and that went ahead and deleted it by executing that query that we have specified also past that unique query uh that unique record ID so that it knew which record to delete and then it refreshed the page okay and so now we don't have that cable do the same thing for budgets travel entertainment Health let's say we're not going to be traveling anymore we found a great City a great country we're going to be we're going to be living there so we're going to delete this it's gone and now we're only seeing the other two but so entertainment and health and so now that we've tested this functionality here that we are sure that the deletes are working perfectly fine next thing that I want to add is I want to add the ability to add new expenses because after all what what good is an expense tracking app if we cannot add new entries if we cannot add new expenses so that's what I'm going to be doing right now so let's go back into our flut oflow here and let's start with expenses now how are we going to be adding new expens expenses well we need a button that when the user clicks we're going to have a little popup with some input data and that's going to go ahead and add these new expenses okay now remember we already have the SQL queries we've defined the right SQL queries that create these new records so we don't have to do that right now so the next thing we need to do is add a button that the user can click on to add these new expenses now we can add this button here but I really like to be able to add this button here and so I'm going to go to this AB bar text I'm going to wrap this text in a row and I'm going to add a icon button and then I'm going to align it so that this button is all the way to the right so that it's completely right Justified so I'm going to go to this icon button and here I may want to change the primary text to something else maybe to White here so that it's easily viewable and now we have this button here now when the user clicks on this button we want to have some kind of a popup right so something like a drawer that is going to to move in from the bottom and for us to display this drawer we need to create a component so we're going to click here and we're going to create a new component so I'm going to click on create blank here and I'm going to call it add expense and I'm going to say com create this and now we have this component I'm going to add a column and inside the column we are going to be adding uh different fields now what kind of fields do we need well we need the name category ID and the amount now the category ID is going to be select it's not going to be an input field the amount is going to be an input field so we're going to duplicate this and we're going to say amount amount and that is what we have and next I'm going to add a dropdown here and I'm going to make it first and this is going to be the list of categories and when the user picks a category we're going to get the category ID so let's go ahead and give it a little bit of padding maybe something like this maybe do 10 that looks a little bit better and let's Pat it from the top let's Pat add it from the top go ahead and do that something like this and also let's fix that up a little bit yeah we want to make it a little bit more from the top so something like this okay so something like this please select a category we're going to say and we're going to be getting these categories here now we do not have a query that gets all the categor so we need to go ahead and do that CU it's going to be very very useful to us this read queries we don't have the query for the category so let's go ahead and duplicate one of these queries and we're going to say get all categories all right and what kind of data are we going to be getting well for the categories we have ID and name okay and so we are going to delete this amount and we have the name and the ID so this right here gets all the data and we only have idea name and that way we're just capturing idea name and that is fine click save and now we're going to go back here now for this drop down we're going to come here we're going to do a backend query we're going to do a SQL query we're going to say get all cat categories confirm and now this drop down will have the data that we can feed now for this drop down you want to make sure that you have option labels here okay and so that way you have your option values and your option labels okay so for the option values we're going to have the IDS for the option labels we want to list the names of the category so we're going to click here we're going to do get all category rows and here what we want to do is we want to map list items and here we're to select and what we want is just the names name name okay and this is going to get all the names uh of each categories now for the option values you want to make sure that you change this to integer okay so that it's expecting an a list of IDs which are integers next you want to click here and you want to select your rows you want to select this map list item select this and we're going to do ID confirm confirm okay so that way for the values we're going to be getting the IDS which is what the query needs and for the labels we're going to be getting the names of the categories and that way when they select a category we're going to be passing the ID so here we can just leave it as please select and let's do a little bit of styling here let's make it a little bit of padding from the top some more padding okay that looks a little bit nicer all right now it's starting to come together we have the select which is going to get the categories expense name expense amount next let's go ahead and add a button so the user can submit this little form here we're going to add a button here do a little bit of padding and we are going to say add expense and so when the user clicks on this button we're going to execute that insert query okay so we're going to come here add an action search for SQL update query we're going to add this add new expense pass the variables so we need a bunch of variables so things like the category ID things like the name and the amount Mount okay now let's go ahead and pull these values here so this widget State drop down and I need to rename these things so that I know what I'm talking about expense name and this thing is the expense amount okay and actually let's go ahead and rename this this is input category this is input expense name and this is input expense amount all right so now when they click on this we execute this add new expense query and pass all of these variables okay including the category ID the name and the amount here okay so now we have this thing here and let's go ahead and come back to our um expenses here and so and attach it to this action here so we're going to come back here add an action this is going to be our show bottom sheet select component add expense component let's also go ahead and set a background color so something like white would be nice and the other thing that we need to do is when they click on ADD expense we want to do that refresh that instant refresh back to the expenses page and so what I'm going to do is I'm going to close this close this and I'm going to do a navigation expenses and where this is going to be an instant okay we're navigating through State we're changing state so we're adding new expenses closing that thing and navigating back to expenses to display that new expense so that the user sees that that new expense is there okay so this functionality has now been built and before I go out and buil the same functionality for the other pages I want to test this app out I want to download the code and I want to make sure that it's being created properly okay so I'm going to come here download this code we're going to download this thing and we're going to do the exact same thing load this code up and test it in our um Android emulator okay all right so here's our new app running in this Android emulator here and so if we go to this expenses tab here we see this button here that will allow us to add a new expense if we click here we have this dialogue box here that should allow us to add expenses so if you click here as you can see it's loading the categories correctly okay so it's executing that category um query here correctly we can pick a category and we can also fill all of this out now there's some issues with the way this uh dialogue box has popped up it's actually taking up the entire screen and ideally I wanted to take up only a part of the screen and we're going to fix that later on but the most important thing is the functionality and so the categories are working correctly let's go and see if we are able to add these expenses correctly so let's say this is Health let's say doctor's let's say the amount $100 at expense and now it says doctor's appointment $100 okay so it was able to successfully add this expense so let's go ahead and add another expense say this is travel let's say this is trip and let's say the amount is $250 at expense and as you can see we're able to successfully add this expense and so this functionality works perfectly right so we were able to successfully uh add this expense we were able to successfully see that uh dialog box everything works as intended and so there's couple of things that we need to fix we need to fix this dialog box to make sure that it's not taking the entire screen kind of pops up from the bottom we're going to fix that and because it works as expected we can start implementing this add functionality to the other pages and that's what we're going to be doing right now all right so here we are back in flut oflow and one thing that we can do to fix that dialogue box is we can simply click on this add expense component here and you want to make sure that this column here is actually using as little space as possible okay and that way it's only going to fill up up the amount of space that it needs to and that should fix that issue with the Overflow now the next thing that I want to do is I want to create this functionality for the other uh features in the app so things like expenses recurring as well as the budgets as well and so what we can do is we can duplicate this component here and we can duplicate it a couple of times and we can modify it as needed so I'm going to rename one of these duplicates here to add recurring expense so something like this add recurring expense component and this last one add budget add budget component okay we're going to add this right here and now let's go ahead and change the actual you know look and feel of these components so this add budget component here uh let's go and see what kind of things we need so for the budget we do need a category so we're going to leave that so if we go back to budgets here and we take a look at the structure we have the category ID and the amount so we don't need this expense nameing anymore we can delete that and we can also rename the button add budget okay so now this is going to pull up the categories this is the amount this is the budget right here and we also need to change the backend call so we're this is no longer add new expense this is add new budget pass on the variables what do we need the category ID that we have here widget State input category and this is the amount which it State amount okay so we have this here and we also want to navigate to budgets okay dismiss just like how we were doing it before and for the recurring we may need another field so if we go back to our database here click on recurring we have the amount category ID frequency and name so here we have the category name and amount but we also need the frequency now for the frequency we can also use a drop down except this is going to have manual value so I'm going to duplicate this I'm going to rename it to input frequency quency and what I'm going to do is I'm going to remove all of this okay cuz we don't need all this we can just do it manually and in fact we also don't need this to have um values and labels okay so we're going to remove labels we just want the the options that are going going to be both uh labels and values okay so it's going to be weekly it's going to be monthly it's going to be yearly and we also need daily right we can we ar well we can't arrange it yeah want daily to be first so daily weekly monthly all right so that is what we have we have daily weekly monthly and yearly and these are going to be both options and labels okay so this is fine let's go ahead and do a little bit of padding what was the padding we had 10 10 at the top here and that is what we have and we also have this button here okay so now it says at expense and we're going to change it to add recurring expense so something like this this budget is is has a yeah this is fine this is ADD budget this is absolutely fine please select the categories and yeah please select we can change that as well please select category probably is uh the right wording here I'm going to do that as well uh select and budget okay let's go ahead and change this this is what this is category yeah this is category select category and this is Select frequency and let's go ahead and change the um the action right we need this is no longer add new expense this is add new recurring expense let's go ahead and do name category ID amount and frequency all right what's our name wiget State category ID is category amount is amount and frequency input frequency okay and we want to navigate to expenses recurring okay we need to double check that we have it set up correctly so expense was the initial one budget where we're using add new budget and we're navigating we're redirecting to budgets recurring expense uh add new recurring expense expenses recurring okay so this looks good at this point we still need to do one more thing and that is add this button here so I'm I'm going to this is just a bottom sheet so I'm going to copy this action here and I'm going to add this button here so we're going to do the same thing we're going to wrap this in a uh row add another icon button we're going to space it out correctly we're going to give it a different color going to give it white and we're going to give it an action and we're going to say add action and this is going to be show bottom sheet and what are we working at here expenses recur expenses recurring this is going to be white it's not transparent this is going to be white looks good do the same thing for budgets now come back here wrap widget in a row we're going to do an icon button okay we're going to send enter this going to come back here and go change the color it's the accent 4 or that's actually no it should be secondary which is white give it that open this add an action we're working with budgets add budget we're going to do a background color is going to be secondary background color so that it's not transparent looks good so now we have all of these except the homepage okay looks really good let's go ahead and double check so let take a look at our components here we have this frequency which is not correct cuz it's pulling it from categories so we need to remove this because we have it set manually okay all right so at this point it looks pretty good and let's go ahead and test out our app on an uh Android simulator let's go ahead and download the code first and do this same thing as we did before all right here's our new app and we have this emulator running right now and so we're going to go ahead and run it with the emulator selected and let's see how it goes all right so here's our new app and so if we come back over here we have that functionality but we also have this functionality for expenses recurring as well as budgets and so here we can add a new expense we can select let's say travel trip to Miami and let's say 250 bucks at expense and now we see that expense here we can do the same thing here add a new recurring expense so let's say this is an I don't know entertainment let's say this is a Broadway show and let's say it's 200 bucks add recurring expense and now we see this recurring expense here we can also delete it and now it's gone and likewise we can go to budgets and take a look at our budget so let's say we want to create a new travel budget click here select travel and the amount let's say say 300 bucks add budget and now we have this budget here and remember how we add a trip to Miami here as one of the regular expenses here and if we go back to our homepage we can see that here as well and if we add a new expense let's say health uh you know emergency visit or something like this 250 at expense we have it here we go back here and we see emergency visit here as well and so now we have the uh read query functionality we can read all the records we can display the records we can also delete them we can add new records and most importantly we can create any kind of relationship that we want inside of our database and using uh SQL queries we can display that data in other situations we can create actual views in our database if we go back to SQL Studio we have here tables we but we can also easily create a view here right so we can click here create a View using some kind of a SQL statement remember views are just saved SQL queries so in situations where we are pulling data using some kind of a complex SQL query well you can turn that complex equal query into views and this way you can create a simple or a complex app or anything in between using sqlite as your back and you don't have to work about paying a third party service you don't have to worry about server access you know complex dashboards online offline availability I know a lot of people are asking you know how do I make sure that people can access my app and actually use my app when there's no internet access or whenever you know I'm in a situation where there is no internet access to be had at all so it's not like internet access disappears reappears there's just no internet access maybe in some kind of an area where there's no mobile service obviously you're not going to have Wi-Fi service you might also have either spotty mobile service connection or no mobile service at all and in this case something like sqlite is going to be absolutely perfect because it's just one file that's shipped alongside your app and so if you're building a mobile app a desktop any kind of an app this database is going to be part of the bundle that you're going to be shipping to your customer so it's going to be essentially embedded with your app and that makes it so incredibly versatile and so if you liked what you saw the best way to get started when it comes to building apps with sealite and flat oflow or any other app builder you definitely want to join our amazing patreon Community because when you join our amazing patreon Community you're going to get access to this FL oflow app you're also going to get access to the source code that I used when I was building this app and you're also going to get access to this exact sqlite app and that way you can get started quickly and easily and not waste any valuable time getting all of these resources together and plus as a valued member of our amazing rapidly growing patreon Community you're going to get access to all the apps that I published on this channel that means you can easily view Andor clone them and get started very very easily without worrying about whether you got this line right or this widget correct or you're experienc some Mar you're going to be getting the exact apps that I'm demonstrating here and if you have any questions about any of the apps you can simply ask in our amazing patreon community and we will make sure to help you out and I'm still not finished because when you join our amazing patreon Community you're going to get access to some extra content so things like q&as and also our patreons supported a deep dive masterclass Series where I do deep Dives on specific products on specific tools on specific Concepts that the community is interested in and wants to know more information maybe somebody's stuck on something somebody's not sure how to do something well I do comprehensive deep Dives that point you in the right direction and above all when you join our amazing patreon community you're going to be supporting this Channel and supporting my work and that is greatly greatly appreciated so if any of this sounds like it's going to give you some level of value maybe it's going to help you build an app maybe it's going to help you start a new you know no code app business or maybe you're going to learn something that you did not know yesterday if that's the case then you definitely need to become a member of our amazing patreon community and you can do just that via the link in the description below the video

Channel: James NoCode

Views: 4,985

Keywords: flutterflow, sqlite flutterflow tutorial, sqlite flutterflow app

Id: oFl9uV2X4yA

Length: 62min 58sec (3778 seconds)

Published: Sun Jan 21 2024