Learn FlutterFlow + Supabase In 1 Hour: Build A Reactive One Page E-Commerce App

so in today's video we're going to be making a onepage reactive eCommerce site that actually makes quite a bit of money now before we get started as always all the apps and all the resources that I mentioned on this channel all the apps that I make you will be able to get access to them meaning you'll be able to view Andor clone them via my patreon page and if you're still not a member of our amazing rapidly growing patreon community then you can learn more about it using the link in the description below the video now the other day I was reading an article titled how and ugly single page website makes $5,000 a month with affiliate marketing okay so here's an article that you can read yourself and the website that they're talking about is this website at DIS prices.com and if you open up this website this is what you see so as you can see it's a not a very uh beautiful website right it's not a very high-tech website right you can call it an ugly website if you want but it serves its purpose because on the left hand side we have various filters right various ways that we can narrow down the kind of products the kinds of products that we're looking for where on the right hand side we see all the products so for instance I can change the data source so let's say I want to look at um Amazon in Spain so I can click here and I can see the various products in this case these are hard diss uh available at Amazon Spain if I want to switch to Amazon France I can click here and now as you can see these are the French Source Products here okay I can also switch the condition so let's say I only want to see new okay I can just unclick used if I want to see both I can click both I can unclick new or I can check both of these and I'll be able to see both new and new used here I can switch if I want to see price per terabyte or price per gigabyte okay so as you can see right now it's pric per terabyte so this is a good metric to compare these products right or I can switch to price per gigabyte so there's the price per gigabyte and I can see it I can switch back to terabyte and now I'm seeing the values I can also filter by capacity so minimum uh maximum let's say I'm only interested in you know this drives uh from 2 terb to let's say 10 terab okay and as soon as I do it it refreshes right so if I delete that I have this minimum if I delete that again I'm looking at basically everything and it's the same case for these other filters so things like rotational solid state removable Optical and tape now let's think about some of the things that make this website special okay what makes it uh stand apart from some of the other websites or apps well first of all this is a onepage website okay there are no multiple Pages it's not like you know with Amazon or some of these other sites where you're browsing by categories you're browsing by different parameters you're reading reviews this is very very simple it's basically a list of products a list of items that you can filter via filters here and it's also reactive right so the minute I change something it automat atically updates okay you don't need to press refresh you don't need to press a button you don't need to do anything so that's pretty much it right there are a couple of things here it's one page right you don't need to navigate and it's got filtering that once you change some of these filters you change some of these options it automatically refreshes right so it's reactive and here you can click on the link and you're going to be redirected to Amazon okay so these are all Amazon links in that specific Amazon uh site in that specific country right so if I go to let's say Amazon Canada these are going to link to Amazon Canada so depending on where you are you can select it and you're going to be seeing the links that point to that specific Amazon store in that specific country and so at first glance you may be thinking oh this is an ugly site nobody uses it but now that I've used it for a couple of minutes I find it actually you know pretty easy to use and very helpful as well as fairly intuitive right this is a site that I can quickly come to and quickly find what I'm looking for and that's also probably the case with lots of other people and as a result this site is fairly popular and it also makes a good chunk of money as well and now let's go ahead and build out this site in flut flow which is my favorite no code Builder and actually you may be thinking that it's pretty easy to build out a sze such as this one in flut flow but that's actually not the case and as you're going to be seeing a little bit later in the video there's a bunch of gachas that you need to be aware of and so as I'm going to be building out the side you're going to be learning some interesting tips and tricks that you can use uh whether you want to build a site such as this one or any other site that needs to be very Dynamic that needs to be very responsive now before we jump into flutter flow and start building out the side you won't be thinking about where we're going to be storing this data right we need to store this data somewhere so that we can display it to the user and I recommend that we store it in super base which is my favorite backand because it does lots and lots of things and does it really really well and it's also very very easy to use and so here I am inside of my superbase dashboard I'm using one of the projects here and as you can see I don't have any tables I don't have any views we are starting from scratch and so let's go ahead and create a new table called products that we can seed with sample data so here's our new table and what kind of fields do we need well if we go back to this website these are the fields that are being used okay so we have a field called price per terabyte now this field is actually a calculated field it's going to be calculated using a bunch of other fields in this case is going to be calculated using these fields here and so we can ignore this field for now and create the other fields okay so we need a field called price capacity warranty form factor technology condition and the actual link as well as the name and the link where we are going to be redirected to if we click here okay so as you can see it has the name here that displays for the link but it also has a URL underneath so if you click on this link if you click here you're going to be redirect directed to Amazon okay so let's go ahead and create these fields so we're going to come here and we're going to start creating Fields so let's start with name name is going to be a text next we're going to be creating capacity capacity is going to be numeric next we're going to be creating the warranty and that's also going to be a number warranty it's going to be a number as well next we want the form factor that's going to be text followed by the technology and the condition just going to say Tech and this is going to be text as well as the condition just going to make it text right here next we also need the link that is going to be used for redirecting the user to the actual uh e-commerce store Amazon in this case this is going to be the link and here I'm going to make it text as well now looking at this table we are missing price so I'm going to put price here this is going to be numeric and I'm going to put it all the way at the top Maybe after name next I'm going to be adding a field that's going to be calculating the price per capacity okay so that it's going to make it easier to compare different products I'm going to call this price per capacity and this is going to be numeric let's go ahead and arrange it so let's go ahead and put it right here right after price and capacity here and this field is going to be calculated automatically by a trigger so anytime we enter data or the data is entered manually or the data is entered via an app this field is going to be automatically calculated via a trigger so let's go ahead and save our table here all right so now we have our table created the next thing that we want to do is we want to create this special trigger that will calculate this price per capacity after the data has been entered now there are two ways to add a trigger we can come here and we can click on triggers and we can create a new trigger but there's an easier way in my opinion and here you want to go into SQL editor and you can just do it by hand so we're going to open up a new query window here and we're going to paste a function that I've already created in Chad GPT that will automatically calculate this price per capacity okay so we're going to execute this function here okay success no rolls return and now that we have this function we can create the trigger and that is because a trigger needs a function that it will trigger and here's the actual trigger that will get triggered before data is inserted or updated and it's going to execute that function that we have already created so let's go ahead and run this SQL and install this new trigger here so as you can see success no rows return and now if you go into database here you're going to be seeing not only the triggers but also the functions as well so if I select functions we're going to be seeing this function here calculate price per capacity and you can edit it if you want this is the function here but also if you go into triggers you're going to be seeing this new trigger right as you can see before insert update insert it's enabled and here you can edit this trigger you can change the name or if you want to change how it works you need to generate a new SQL and update that trigger okay so now if we enter data that field that price per capacity is going to be calculated automatically so we're going to go into our table editor and we're going to try adding a record here so that you can see how it works so we're going to insert a new row and let's say the name let's go ahead and copi this from here so let's say I go into amazon.com and I copied this one right here this first record copy it here and paste it in here and let's say the price is what is the price the price is 19 bucks so I'm going to put 19 the Capac capacity is let's say the capacity is 3 terab everything is in terabyte so we don't have to worry about you know the um the units and price per capacity is going to be automatically updated okay so we don't have to worry about this the warranty let's say it's 10 years the form factor is what's the form uh it's internal technology is SAS and condition is you so we're going to come back here internal SAS condition is used and the link is let's say it's amazon.com okay we're going to click save and wait for this record to be created okay so now the record has been created and as you can see price per capacity has been automatically calculated for us and it's 6.33 3 if we go back to this prices here it's also 6.33 3 and so in our app we can format it to a specific decimal place okay so we can format it to two places probably because 6. 333 kind of doesn't make sense s it should be 6.33 really right and that's exactly what we're going to be doing in our app and so the next thing that we want to do is we want to create some more records here so maybe create nine more records and that way we're going to have 10 records and then we can start building our app and so what I'm going to do is I'm going to click on definition I'm going to select and copy all of this I'm going to give it to Chad GPT and I'm going to ask Chad GPT to generate nine more records for us okay okay so we're going to go ahead and paste this here and we're going to ask Chad GPT to generate nine more record generate SQL statements with sample data for inserting into our database create nine records nine nine sample records okay let's go ahead and see what happens and so Chad GPT is smart enough to understand that we don't need ID and created ad because these are generated fields and we also don't need price per Capac capacity because we have a trigger that will automatically calculate that field and so we're going to take this generated code copy it go back to super base open up a new query and paste this code here and we can take a look at it and see if everything is correct and so as you can see it has different ways of uh creating our Fields here okay so for instance for form factor it decided to use small medium large as opposed to other things right so as opposed to internal internal 3 and A2 etc etc that actually doesn't matter what matters is the way the app is going to work okay so we're going to go back here and we are going to run this query and see what happens okay so as you can see success no rolls returned that means that the data has been successfully inserted if we go back to our tables go back to products here we should see 10 records here okay nine records that were generated plus the first initial record here so as you can see this is our first record and these are the other records here okay and they're rather generic as you can see because the system did not know you know exactly what kind of data to generate so as you can see name is product ABC and that's absolutely fine that's absolutely fine you also can see that price per capacity field that is being generated using our triggers is correctly being generated it's taking the price here and dividing it by capacity okay so we get price per capacity 100 by 10 is 10 150 divided 20 is 7.52 5 etc etc so all of this looks great we also have the URLs here as well okay so now we have our data in the system and this means that we are ready to build our app and so I'm going to jump into flut oflow here I'm already logged into my account if you do not have an account you can simply sign up for a free plan they have a very very generous free plan that allows you to get started relatively quickly and easily and so for this I'm going to come here and I'm going to create a new app and I'm going to call it our Ecom app we're going to do a blank app here okay now we're going to uncheck this cuz we're not using Firebase start building and the first thing that we want to do is we want to we want to connect this new app here to our super base instance so we're going to click to on settings and integration we're going to scroll down to superbase enable super base and now we need two things we need the API URL and the non key and you can get that by going back to your super based dashboard clicking on Project settings API and copying this URL here go back to your app paste it in here do the same thing for a nonpublic come by here and paste it in there and click on get schema and that will allow you to load uh your schema right so you can see exactly all your tables and Views you're going to be seeing them here and here we can see all the data and this means that we have successfully connected our uh blank at this point uh flutter Flow app to our super base instance okay and so now we can go back here and we can start building the app okay so how does the app look well if we come here you see that you know the filters are on the left hand side here we have various filters and we have the data here okay so for this I recommend that we start off with a um tablet view okay so this is going to be more of a tablet app right there's uh you know lots of filters uh there's you know lots of lots of data the links the names big table etc etc and obviously you know you'll be able to view it in a mobile mode as well as the desktop mode it's just easier to get started in this tablet mode here okay so now let's go ahead and rename this title to let's say products and let's go ahead and start building the app so what exactly do we need to do well as you can see we have the main page and this this is essentially a column and then we have a row and then we have two more columns we have this column that takes up kind of the minimal amount of space and then the rest of this um you know the the view of the rest of the screen here is taken up by this column okay and that's important it's important to make that distinction because when you're going to be building the app you can specify all that so we have this column here let's go ahead and add a row that's going to be essentially containing everything and then inside the row we're going to add two more columns okay and I'm going to do licate this column now we have two more columns now what we want to do is for this column we wanted to take the least amount of space okay and for this column we wanted to take the most amount of space and so now as you can see we have this column that will be controlled by us all right we can tell it you know how much space and then this column will take the remaining space and this is exactly what you what we want we don't want 50/50 we want to control one column and then this column just you know it will take the rest of the space it's going to be greedy this is the setting it's it's a a type of expansion setting that allows it to take the the most amount of space if you have this setting then this setting is not going to be greedy it's going to be um it's going to take as less space as possible with the option to expand but here we just wanted to take the most space uh that it can now the next thing that I want to do is before I build the triggers let's go ahead and display the data okay let's make sure our data is loading up correctly and so in this next column in the second column here we're going to create a list View and inside the list view we're going to have a row and inside the row we're going to have various text Fields representing different columns okay so if you take a look we have a bunch of columns here so price per terabyte price capacity warranty etc etc so let's go ahead and display like maybe three of these columns just to get started with okay so I'm going to go back here and I'm going to do three text Fields okay maybe four okay now as you can see they're all kind of bunched in together and we want to space them out and for that you can just click on row and you can space them out some using this setting you can also have this setting but maybe this setting or this setting doesn't really matter they're all kind of similar you can also do something like that which is space between but that's that's not what you want to do in this case I think this is going to work space evenly space evenly looks good to me and now we can select list View and we can click here and we can add query and we can click on super base and now we can select our you know table products click confirm confirm and now this list view is being fed this data that we're getting right so now for each of the fields we can display the data so what do we want to display well price per terabyte price capacity and let's say a name okay we're going to be displaying these later okay so let's go ahead and click here products row price per capacity okay let's give it a default value of zero hopefully that should never happen the next field that we wanted display is going to be price followed by capacity and then name so let's do price we can even type it price let's give it a default zero followed by capacity you can just type capacity go ahead and give it zero and then last but not least is going to be the name okay so we're going to say name and there is the name okay all right so now we have four Fields one of them is a calculated field that's automatically calculated by a trigger that we created and now if you run this app we should at least see those 10 record so let's go ahead and do that right now all right so here's our app and the problem is nothing is being loaded okay and why is this well 99% of the time it has to do something with your superbase permissions so if we go back to superbase and we go back to our table editor here click on the table we will see that we have no active RLS policies and because we have RLS turned on we need to have a policy that allows us to at least read data so we're going to click here and we're going to create a new policy we're going to do get started quickly and we're just going to enable read access to everyone okay okay this looks good review and hit save okay so now this policy is attached to this products table and now if we reload the app we should hopefully see data all right and there you have it and now you are seeing data it's not aligned correctly but that is not an issue at all at least you are seeing this data here okay it's just a question of Aesthetics right making it look nice but it's still but at least the data is there and before we start working on the filters let's go ahead and fix these uh visual issues here let's make it look nice so if we go back to our app here as you can see because of the way that we have it um centered because of the way that we have it aligned we are experiencing a bunch of issues so if I click on Roll here you see this alignment here if I click on this and I expand it all the way let's see what happens let's go ahead and reload loow this and see what happens all right and now what you're seeing is these end rows are aligned correctly but these middle rows are kind of messed up and so what I recommend doing is I recommend using the following strategy is you can go back to row and what you can do is you can align it left and then you can control each of the field right you can control the space between each of the fields and so what you can do is you can go to each of the fields and give it a little bit of padding to separate it so something like maybe 100 maybe something like this and that usually works fairly well so if you do something like that you can even do 150 and so now let's go ahead and reload this and it should look a lot better all right we're almost there the next thing that we need to do is we need to make sure that it's properly formatting these numbers here okay so we're going to go back here and this price for capacity you want to make sure that it's being correctly formatted okay so we're going to click here and we want to create a formatting number formatting we're going to come here and we're going to be doing this decimal format here and here you can do automatic click confirm and now if you reload it it's going to look just a tad better all right so now that you can see it's a little bit better there's something else that we can do we can change the formatting and we can also do a custom format so we can come over here we can do a custom format and if you click here you're going to see various options so you can copy this right here that you see come over here and you can paste that here you can remove this this is not necessary and you want to make sure that you remove the quotes as well hit confirm reload your app all right so now as you can see the formatting looks a lot nicer and the the numbers and the values are being aligned a lot better and a little bit later in the video I'm going to be showing you a couple of other things that you can do to make it look even better as well but aligning and visual is not really the main challenge of this app if you go back to the original uh web page here this website the main thing about this app and the main challenge that if you're building an app such as this in flut flow that you're going to be experiencing is the filtering capabilities right because if you think about all of these are filters right so we have this data source which is a filter we have a condition which is a filter we have uh this which is not a filter it's just the way it changes the values but this is a filter right so if I want to display let's say 10 from 10 to 15 right capacity 10 to 15 it's only going to be displaying these two if I remove it's going to be displaying everything this is another filter this is a filter this is a filter this is and this so it's a lot of filters right and this is going to be a challenge uh you know building this kind of app with flut flow if you do not watch out for the gotas and so before we start building these filters let's go ahead and actually display them uh for the user for the user to pick okay okay so let's go back to our app and in this column we're going to be displaying our filters okay so we have a column and so let's go ahead and add a first filter which is going to display either new or used products okay so how exactly would we do that well we have this First Column here and what we can do is we can add a check box that the user can check on that is going to you know display the the the specific products okay so let's go ahead and add a container here and inside the container we can add another column and inside the column we can add you know many elements right one or many elements and so let's go ahead and search for a checkbox and let's go ahead and add this one okay here's first and let's say we want either new or used so I'm going to duplicate that and now we have two of them here okay let's go ahead and fix it up let's go ahead and make the container a little bit wider let's say 200 okay that looks better okay that looks better let's go ahead and expand it's or remove the height we don't need the height okay and here for these uh checkbox tiles what we can do is we can remove the subtitle cuz we don't really need the subtitle just the title so I'm going to remove the subtitle and it's going to look a lot cleaner okay so now we have these tile boxes okay and this is our first kind of option and so I can come back here and I can say well for the title I want either new or I want used okay and we can also do a little bit of padding on the container that's why I created a container cuz we can uh pad it nicely let's go let's go ahead and do a padding so something like this and let's make it um rounded Corners go ahead and do that right now border radius let's make it five now that's too little this container right here yeah let's go ahead and create a width of one border radius of 10 so something like this which is pretty cool it's a pretty cool effect and so now the question is how do we filter okay so let's say the user checks here how do we filter the values well if you are just starting out with flutter flow and you are thinking about it well one way that you can do it is by clicking on this list view coming here editing the the uh the original query right if you edit it you have a filter here so we can create a filter and so let's say the user clicks on new they just want to display the new and so we can come over here and we can say well we want condition to be equal to uh you know whatever you know if this check box is true not right so we can track that we can say well value is going to be new and maybe this is conditional depending on this or depending on that and so you can create these multiple filters right you can add a new filter and potentially what you can do is you can create multiple filters for all of these right but that's going to be very very messy and I'm going to tell you why the reason you can't do that is because um it's not you know there's no easy way to make these filters Dynamic okay and what do I mean by that well what I mean by that is if I working with these filters here right I am setting them but if I select all of these I'm essentially clearing the filter right let me explain to you again if I deselect used I'm only displaying the new I have an active filter but if I select used I don't have a filter because I'm displaying all of them I need to clear that filter right I need to clear the filter and so here in flutter flow this built-in way there's no way to clear this uh filter so if I create it it's going to be there right there's no way to you know kind of make it Dynamic right this filtering ability is great for very um kind of simple cases if you will it's not it's not designed for dynamic apps because you know these are static filters right if I create another filter based on price great that filter is going to be there I can control the value but I can't remove this filter which is exactly what I need to do you know if I deselect this if I select it excuse me if I select it that filter is gone I want to display everything there's no filter if I deselect it I'm setting a filter but if I select it I am basically clearing the filter I'm removing the filter and here there's no easy way of doing it okay and this is kind of the problem and so we won't be able to do it like this we won't be able to do it via a query type this built-in query type because these filters are not dynamic well fortunately superbase has another way of retrieving this data and that is via an API and so if you click on API docs and you click on products which is our table and you click on bash here and you even select your key if you scroll down you're going to see that you have something called a filtering right so you can uh read all rows but you can also do filtering all right and this allows you uh to set you know very powerful filters okay so you can set a bunch of filters and you can also control the kind of filters that you're working with dynamically you can do all of that dynamically and so what you want to do is you want to be using this API to get your data and you want to be setting these filters dynamically so let me show you how this works so let's go back to our app click on here API calls add API call here and we're going to say select data or select products okay and let's go ahead and copy our API uh API information here I'm going to copy this right here paste it in here and this is going to be a get request I believe if you come back here yeah this is a get request cuz there's no body here and the next thing you want to do is you want to copy your headers here there are three headers here so we're going to copy that off for our app here we're going to add a header paste that here and do the same thing for the other headers right copy this face that second header and last but not least copy this header here okay all right we're we're going to click on ADD call now we've saved it and this specific call gets row by a specific ID you see it says here ID EQ do1 which means that get me all the rows where ID is equal to one and this is a select that essentially gets us all the rows okay so if we go into response and test we should hopefully get one record and that record is going to be this here this uh you know whichever record has ID of one if we even have that record we should have that record this record right here that we created manually okay so I'm going to go back here I'm going to do a test API call and we are getting that first record here okay as you can see this is that only Amazon cuz the other ones are like example they were uh generated by Chad GPT and so this is essentially giving us back one record with aide one okay and so this allows us to get our data but allows us also to set the filter dynamic Ally so we can create our filters we can change them on the Fly we can clear them we can do all kinds of interesting things and I will show you exactly how you can do that but before I do let's go ahead and adapt our app to use the API so I'm going to go in here I'm going to click on edit and I'm going to say use API call Select products and later on we're going to be editing that API call we're going to be doing it all dynamically so we're going to be we're going to be clicking here and set a bunch of parameters but right now this is fine click confirm and now you want to click here and you want to generate Dynamic children from that from the results of that API call choose response here and here you just want adjacent body you don't want anything cuz the body that we're getting the body is essentially a list of objects so that is so all we need is a body and here you're going to say item record or something or actually product product item I like to call it hit save okay and now we have have that uh generated um thing here that means that you know it's it's it's getting multiple pieces of data and so now if you click here you're going to be clicking product item and now you need to create a Json query okay you need to create a Json path and what is going to be the Json path well for this um for this calculated field it's going to be I believe it's called it is called price per capacity so we're going to go back and we're going to say price per capacity so per capacity so this looks good and then this one what do we have what's the next field we have is the price capacity and then the name okay so let's try that this is going to be Json path is price this is going to be capacity and last but not least is the name okay come back here all right now we have the name okay and now let's go ahead and run our app and let's see if it's getting the data correctly and displaying it before we start working on the filters okay so we're going to come back here we're going to do a Reload all right and here's our app and as you can see we are seeing that one record remember we are filtering by ID where ID equals one and that gives us back only one record so we have some you know wrapping issues uh we still need to format this okay we need to format that correctly but at least we're getting the data we're getting the data via an API and we're able to filter it to get exactly what we want okay so this is great so now I can go over here I can pick my list View and let's say I want to change you know what what uh specific item I'm getting so let's say I want to remove this filter I'm going to remove that filter I'm just going to say select get me everything go back here rebuild my app and I should hopefully see all the records now cuz we're not filtering anymore all right and now you're seeing all the records here they're still kind of messed up we need to fix this we need to align it and I'm going to show you some ways that you can fix it but at least we are now displaying all the data we we are getting all the data successfully and now the question becomes well this is great and all but how do you filter this data using these things how can we do this dynamically how can we filter it you know when the user picks or selects or deselects or selects all of them well this is the main challenge of the app this Dynamic filtering is the main challenge you're going to be facing when you're going to be building apps such as this one and so let's think about how we can do it well first of all let's go back to our app app and let's go ahead and make this query dynamically setable okay so if we come over here you can pass variables to this query that are going to be dynamically set okay and so we're going to say query here and now this query is going to be passed via a parameter okay we're going to say query here and query is just a string it's not a list click save and that's it and now we can pass a query d dynamically so if we go into response and test you need to set the query cuz right now there's no query and so what I can do is I can say well condition equals to equal new okay and this is a way of telling superbase that I want to set a filter to display only the products where condition is equal to new okay so let's do a test API call and now we are getting a list of products and as you can see ID is 2 ID is 5 ID is 8 we're not displaying all the products we're doing filtering and we're doing it dynamically okay so this is the first part of the problem okay it's the ability to pass a filter okay so we can say query query but we can also remove this query okay and we can do a test API call and now we're not filtering by anything right now we're getting all the values and you see that was a problem before that was a problem because once you set those filters and flut flow they're there forever they're static filters they're not controllable at run time they're not dynamic But Here by creating our own filter via this API call in conjunction with this API call we can do a lot of great things we can do magic essentially because now I can display I can set this filter on a dynamic runtime basis while the app is running this is very very powerful and so this is the first half of the battle it's being able to pass the filter dynamically and have have the system have the app fil by things you know as the user wants okay now the next part of the problem is how do you connect this thing here to this right so if I say well you know if I deselect this or if I select this how do we translate that into something that this API call will understand well this is a slightly more difficult problem okay so let's let's work through this okay when you are filtering here you're passing a list of conditions essentially you know for instance you're going to say something like I only want new or I only want used or I want used and new or I want new or used right you're basically passing a list of conditions okay and so for that we're going to go into our app store and we're going to create an app State variable called conditions and this is going to be a list of strings okay each string is going to be a certain condition okay we're going to say create and how exactly will these conditions look okay what are they going to look like well they're going to look like this okay so we're going to say condition and then we're going to say New Rather new and then we're going to say equal okay and so this means that condition is equal to new I can also add another condition I can say well I want condition is equal to you used okay so now we have two conditions show me all the new ones or all the used ones right it's the same condition so it Auto automatically becomes or okay so we're saying show me all the new ones or all the used ones we can also do something like show me all the new ones and the used ones as well okay but that is not something that you want to do because that's not going to show you anything because there is no one product that has both a new condition and a use condition right this needs to be an or and we're going to take care of all of that as well okay so another condition you can set is you can do something like Source uh is you know Amazon instead of like amazon.ca or amazon.es Etc you can do equal and that becomes another condition and so these two conditions become an or condition okay because they cannot be you know they cannot be a an end condition uh anytime you have the same condition it automatically needs to needs to become an or condition so that way we can say show me all the products that are new or used and all the products with you know source amazon.com and this way you can create conditions on just about any field and you'll be able to filter all of that correctly okay and so what's going to happen is we're going to have this app State here which is a list of conditions and when the user selects the conditions when they click on something we are going to be either adding a condition essentially a string into our app state or we are going to be removing it okay so if the user deselects it we're to remove it if the user selects it we're going to add it and then when the user finishes picking these conditions we are going to create that long query string for the API call you know using a specific function and we're automatically going to refresh all of this and that way the user will pick their conditions and they'll be able to see the exact data that they want with all the filters set up okay so let me show you how this works okay so this new here this new checkbox let's create an action on it okay so I'm going to add an action in fact I'm going to open this here and so if the user toggles it on what we want to do is we want to add a new condition okay so we're going to search for app State we're going to say update App State conditions that's the only one we have and we're going to do add to list we're going to add a condition to list and the condition is going to be condition new equals okay so this is our condition and we also want to rebuild the current page and here we can copy this action go to toggled off and paste it here okay now when the user unchecks it we want to remove this condition okay so what we're going to do is remove from list a the same condition so this is condition new equals to okay and so when the user toggles it on we want to add it to the list if the user toggles off we want to remove it okay and the same thing we want to do for used as well okay so we're going to come into used in fact we're going to click here open the action the flow editor here and for toggle on we're going to paste it we want to add to list but in this case we want to do used and come back here paste it here in this case we want to delete it remove from list paste it here and we want to remove used okay and so now we have a bunch of actions that are tied to these new two elements here and when the user does something we're essentially manipulating App State we're either adding conditions or removing conditions okay so we're going to be having various conditions and one thing that I like to do is I want to be able to debug this right as I'm adding conditions and for that I'm going to add another text field here so that you can see what's happening above this thing here okay and in fact let's go ahead and left justify it something like this and this thing is going to display the conditions that we have and for that I'm going to click here I'm going to do a code expression cuz we have a list and we need to convert that list into a string okay we're going to add an argument this is going to be a list and this this VAR one is going to be these conditions that we're passing and what we want to do is we want to convert that list of strings into one long string so I'm going to say R1 join and just join on nothing check errors okay no errors confirm and this thing is going to be displaying the conditions this is only for debugging purposes only okay now at this point this API has not changed that's fine let's go ahead and run our app and let's at least see if our conditions are being correctly changed modified let's go ahead and reload our app all right so here is our app and as you can see we have some conditions that are set right now okay so as you can see we have condition new equals equals then condition used equal then condition Amazon equal okay and that is because we've set them when we created our App Store App State we have that here so I'm going to delete that so we start off with nothing we start off with an empty App State and so now as you can see it's completely empty it is it is not showing any anything and so if we select this we have a condition now condition new equals to so and if we select this now condition used equal to and if we deselect it that is gone if we deselect it that is gone so as you can see these app actions these um events here they work perfectly this is exactly what we want and now that we have these events generating our app State the last thing that we need to do is we need to generate the query correctly to display this data we need to be able to generate the right query and so what we're going to do is we're going to jump back into FL flow we're going to click on edit and what we need to do is we need to add a variable called query that is going to be generated from the App State okay and so for that we need a custom function so we're going to click here and we're going to create a custom function and this custom function is going to return a string which is our query string for the API but it's going to accept a list of strings and this is going to be called conditions okay and these conditions essentially are our app State remember our app state is a list of strings a list of conditions and here I'm just going to put return empty okay so that we can save it and now we can go back here and take a look at our custom function now this custom function I'm going to call query Builder Okay because that's exactly what it's doing it's taking a list of conditions from the App State and it's building a quer so I'm going to hit save here okay and now we need to write the actual function for us now here I use Chad GPT to write me this function and the result is it works really really well okay and so I've copied that function I'm going to paste it in here and I'm going to hit save okay and so now we have a query Builder whose job whose purpose in life is to take a list of conditions and convert them to a query string that our super base will understand okay and before you actually run your app one interesting thing that you can do is you can go to test function and you can actually test it out so let's say your first condition is just like what we have condition new equals another another condition is condition used equals and one final condition is let's say Source amazon.com equals to okay and now you can run a test and see the resulting query string so we're going to hit run and see what it generates and it should generate a completely valid uh query string and that's exactly what it's doing you see it's creating an or condition anytime we have two conditions by the same name because that's exactly what we need to do just like how I explained earlier and then anytime you have a condition you know by another name and it's the only one there are no other ones that becomes an N condition it essentially ands them together okay now let's say we have an another source and let's say this is amazon.de Germany equals to and if we run it it's going to create or here or here and it's going to end them together okay okay and this is exactly what it did it created two or conditions and it Ed them together and that gives you a filter it's a dynamic filter that we can use as you're going to see in just a second now a quick note for all my amazing patreon subscribers not only will you be able to clone this app that that I have here I'm also going to give you my Chad GPT conversation so that you can see how I generated this function the promps that I used etc etc all right so now that I know that the function does exactly what I wanted it to do I am going to pass that function I'm going to be using that function to create the query string for our API call so I'm going to click on edit here and so I'm going to set a variable I'm going to say query and here I'm going to be passing my query Builder right so I'm going to say query Builder and to query Builder we're going to be passing our app State confirm confirm and when query Builder gets our app State it's going to generate the query string and that's going to be the result here we're going to say confirm okay and so now let's go ahead and run our app and see what happens all right so here is our app and as you can see by default these two are selected so if I deselect them okay so now they're deselected if I select just the new you see it says condition new and this automatically only displays the new ones right these are new a d and g if we go back here we can see that a d and g and they are new right right here right A D and G new new and new so as you can see the Filter Works beautifully and if I select used it does an ore so now it's displaying a b d g and I believe there's some refurbished ones so if I add refurbished it's going to be displaying all of them okay so let's let go ahead and add refurbished as well click here let's go ahead and duplicate it okay let's go ahead and change this to display refurbished okay and now what we want to do is we want to make sure that we're actually setting the right thing so this should be refurbished and toggled off this should remove refurbished okay let's go ahead and reload this all right so check this out let's say I deselect all of that and I select refurbished okay so now it's only showing refurbished that's CF product CF and I okay so if we go back here to our super base c f and I so as you can see C is refurbished f is refurbished and I is refurbished and now let's go back and select used and it's going to be displaying the other ones new it's and it's displaying the other ones isn't that beautiful isn't that amazing this is exactly what we wanted and you can obviously deselect it and as a result it's only going to be displaying only the specific one so I can do new and refurbished new used and refurbished let's go ahead and add another filter here okay let's see how multiple filters work it needs to end them together so we're going to go back to our app we're going to select this container and we're going to duplicate it okay so now we have another uh container here another filter and before I do that I want to make sure that this second column here is properly aligned all right so now it's perfectly aligned here and let's go ahead and work on this filter here so what kind of filter do we want to create well let's go ahead and create something with the data that we have okay so if you take a look here we have form factors so we have small medium large let's go ahead and create another filter on form factor okay so come back here and let's do small here let's do medium and let's do large okay let's go ahead and fix that up open it right here this should be small I believe did we start with small yeah small is first small let's go ahead and copy that come back here paste that and do the same thing for medium this is medium and medium and let's do it for large as well okay and now we have this new filter and let's go ahead and see if it works in conjunction with the other filter so here's what we have let's go ahead and uncheck this and we're going to fix this Behavior okay so let's say I only want new now we have new new and used and let's go ahead and see how this works let's say I only want small okay actually we made a small mistake we forgot to change the type of field that we're dealing with so if we open this up see it says condition this should be form factor in fact just copy this right here and change that okay quick oversight minor oversight come back here open this up baste that there baste that there and do the same thing baste that there baste that there let's go ahead and reload our app all right so now we have this filter and we have this filter so this is the condition and this is the form factor let's go ahead and see how it works new used there we have it let's say and and let's say we deselect that let's say small and now we're only displaying new used and small a DG let's double check if that's correct it should be new right and used right we come back here we have D and G D and G so small and small and here we also have used new and and new here dng here all right so now that we all right so now we have an app where we have two filters here another thing that I want to do is I want to be able to create a filter where you can specify some field and you want to search for let's say the minimum is 10 but the maximum is something else okay so how exactly will we do that well if you want to create this kind of filter this is going to be a filter where you want to do an end right it's not going to be an or you want to do an end you want to say that you know a product where you know uh that's greater than 10 and last than certain amount so let's go ahead and do that real quick come back to our flut of flow and let's go ahead and duplicate this um this thing here this container uh to create another filter okay so here we are going to be getting a value okay so how do we have it here well we have it an input minimum and maximum that is exactly what we're going to be doing so we're going to delete this this is our third container in fact we can just say container three and we can rename this container 2 and this is container one okay and so now what we can do is we can remove these tiles here and inside we're going to be having a row and inside of this row we're going to have the fields right so we're going to have this input field here and we're going to have a text field so this is the input field this is the text field and what we want to do is we want to duplicate this row and this is going to be our um minimum and our maximum so we're going to say this is our minimal minimum and this is Max Maxum okay what exactly does it say yeah minimum maximum here let's make it a little bit bigger and let's go ahead and well first let's go ahead and change this thing here to what do we want to do well let's go ahead and try the outline outline is nice okay maybe we'll keep outline and let's go ahead let's just call it let's keep it simple Min okay and that's what we have let's go ahead and do a little bit of padding for this container okay in fact we can do a padding for the column something like this okay that looks better that looks cleaner and let's go ahead and change this okay that looks clean now and for this what do we want to do well if this field is set we want to set that filter okay so we're going to add an action going to open this and on change we want to do the correct uh App State manipulation for that I'm just going to come back here copy this come back here open this and paste it here okay so what do we want to do well well this is now the price and so here we need to calculate it dynamically okay so we're going to come here and we're going to do combined text and so we're going to say price here we're going to list the actual price and this is going to be greater than right so GT for greater than and so this thing here is going to be the price so I'm going to remove that and that way we can get it automatically okay we can get it from the widget State okay this thing here okay so now we have this value here and we can also copy it copy this variable so that we can use it in the second situation and here we're going to say add to list paste it in here copy this whole thing and do the same thing for this one right here open this here paste the action and now we have this combination but in this case we want it to be LT Which is less than and the second field second field let's go ahead and rename our Fields so it's a little easier to track in fact I don't need well I'm going to say input Min and this is going to be input Max okay okay and let's go ahead and remove that just going to have it empty okay remove that there okay so now we have this input here and input there okay let's go ahead and make sure that it is correctly set and I also had chat GPT modifi the function for me so we're going to copy this function here and we're going to paste it in go ahead and compile this function here all right function looks good and let's go ahead and take a look and see what's happening here so the idea here is when we input something it should also filter it by the values that we have that we have here this is going to be the minimum because we are adding this text combination here this GT which is greater than right we want it to be greater than or and we want it to be less than right you hear that n there right it's not going to be or in this case because now we have that end condition all right so let's go ahead and double check the app before you run it and as you can see for this input Min we have it unchanged but this input Max we have it on submit so you want to make sure that it's unchanged everywhere okay so we're going to come here here we're going to open this up and we want to make sure that it's unchanged so we're going to cut this come back here and paste it in here okay and so what it's doing is is adding a LT filter right we want to make sure that the max is an LT filter which means last than okay so input Max less than confirm all right now it looks good now this input Min open it up it's on change and the filter that we're using is GT which is greater than input Min greater than all right looks good looks good to me and let's go ahead head and reload our app all right here's our app and the second column is the price column so if you take a look here you will see this is the price column right here we need to have the headers there we're going to do that later so these are the prices so let's say the minimal price I want to see is 150 or maybe even 200 so I don't want to see any hundreds here so I'm going to put 200s here and that will automatically reflect it so as you can see we now have the filter and we don't see any hundreds anymore okay and let's say the maximum I want want is 400 okay so I don't want to see these two here so I'm going to put 400 and you wait a little bit for the thing to update and those two go away okay so now we have this filter working perfectly and obviously we still have these other filters right so if I only want new I can click here and that adds it now we only see one product and I can do the same thing for small medium large let's say I only want small and there's the small product and so product D is the only one that's left right it's new it's small and it and it and it's between these two price points okay so if we look at our database we have product D which is this product here okay so it's new it's 250 and it's small and so as you can see the filters are working really really well now there's one issue here if I delete this filter I wanted to remove this filter okay it's not removing the filter it's adding an empty filter and so we need to have a special condition that when you change a filter filter and that filter is empty we need to remove that filter just like how we do it with the other conditions here we are only adding and so what I'm going to do is I'm going to add a conditional and I'm going to make it first and I'm going to cut this and I'm going to say true and so what is true well the fact that we have a something in the field okay and so here we're going to have a single condition and we're going to say that wiget state of this input Min is actually it has something in there okay so we can say is it's actually is set and not empty okay so if it's is set and not empty then go ahead and add to list otherwise we want it to remove from the list if it's empty I'm going to paste this here and we want it to remove but before we do that I want to copy this variable so that because it's the same variable remove from list and we're going to paste this variable here and when we are removing this value we want to make sure that we keep track of the original value that we had because here we are remove removing the current value but we need to remove the old value and so in this case what we need to do is we also need to create page stay so that we can track of these minimal and maximum values okay before we change it okay so what I'm going to do is I'm going to add couple of uh variables here I'm going to say Min value this is an integer and I'm going to add max value okay and initially we are going to set them at zero because that's what they are initially okay hit save and then what we're going to be doing is when we are going to be working with these values we are going to be looking at the original value when we are removing it when we add it it's okay but when we remove it we need to make sure that we have the old value and so when we add the value we want to store it and that way we can remove it okay so I'm going to say page State here update page State and I want to do this is our input Min I'm going to set the value and this is going to be the widget state right the value that we inputed okay and here we need to remove that value okay because when the user enters it it's going to be zero or something else right uh if for this thing to work it's going to be empty but we need to remember the old value okay so what we're going to do is we're going to go to page State and we're going to pick up this Min value and so that should refresh it okay that should refresh it cuz we're also tracking the value we're when we are removing we're not removing the currently entered value we are removing moving the original volume okay which is why we're using this page State here okay let's go ahead and reload our app and see if this logic now works all right so let's say we are looking at minimum of 300 okay so far so good and now if you remove it we should remove that 300 as well you see it's gone now okay so this this logic works perfectly and we can clear it and that is something uh as I talked about that we couldn't have done it with these built-in filters okay so now let's let's do the same thing for maximum as well so we're going to come back here open this up and we need to create a condition as well so we're going to come in here add a conditional move the condition up on top and the condition is going to be if it's not set right so this is going to be uh our uh widget State input Max and we're going to say is set and not empty then go ahead and do your logic cut and we want to copy it paste it here and here you want to save that page State variable so that we can remove it later update page State Maximum set and this is going to be the widget input Max here and that way when we do it here we're not getting the currently uh inputed value we're getting from the page State okay so this looks good is set not empty we are adding and here we need to remove it okay so I'm going to copy this I'm going to do remove from list and because it removes the values we need to make sure that we copy it and this is from page State okay all right and we set the value to input Max this is Max okay let's go ahead and reload the app and that should clear the upper bound as well all right and here's our app and here are the prices let's say I want 300 minimum it goes ahead and creates this and now we're seeing this and let's say I want 450 maximum so I should see only one now this one right here and let's say I remove this that should remove the filter hopefully which it did now we're seeing all of them and if I delete that same thing here removes this filter and recalculates everything okay so isn't that beautiful we have these filters we also have these filters here it's really really amazing and obviously you can add more filters if you want it's just a question of getting that function right and you can use Chad GPT for that all right let's go ahead and fix this thing here it's a little messy it's kind of driving me crazy let's first add some headers and fix these columns okay let's go back here and let's add a column here for this list view okay so this is our row here let's add another row above it so what I'm going to do is I'm going to add a row here okay so now we have a row we have this thing but we're going to remove this thing here let's go ahead and display the headers here okay so I'm going to I'm going to add a bunch of text and let's say this here and the thing about it there's some padding here right there's some padding and I believe the padding we're using is 150 so we can do the same thing here 150 okay and let's go ahead and Define these values this is price price dollars per capacity gigabytes this is price this is capacity all right let's go ahead and reload our app see how it looks now all right so now we have this header row here it's still a little messy and that is because these things this these values are not formatted correctly let's go ahead and fix that now we can't format it directly because this is a Json path so flat oflow does not know if this is an integer or a string or anything else so we need to cast it we're going to copy this here come back here and what we need to do is we we need to have a code expression that takes the value and converts it into a uh double so we're going to create a code expression here and it's going to take a string and it's going to convert it into a double and after it's converted we can do a lot of interesting formatting for it okay and for the value we're going to paste the value that we have this Json path this is a string by default and we can take this value here and once we take that string we can convert it to a double okay so we're going to be using this function here this double triar and the value is this VAR one right so VAR one here we need to change it to a double all right it says no errors confirm and now what we can do is we can format it right so we can have any kind of format that we want we can do custom and let's take a look at our custom so we can do something like this here and paste it in there and now that's going to be doing this nice formatting there and we can also format as a currency as well if you want right cuz this is price per gig confirm okay and how nice is this and for this price we can do the same thing we can just copy that come back here paste variable okay and remember we need to change it right so this is not price per capacity per capacity this is just price here and everything is the same everything is exactly the same and we're still uh we're doing it display as currency okay let's see if that looks as we wanted it to look let's go ahead and reload our app all right and that looks a lot better as you can see now it's gigabytes it's all nicely aligned it's still a little messy here because of this but it looks a lot better now one last thing that you can do to make it look even better is that you can give it a fixed width and you can do that by removing the padding and putting it inside of a container or a card so here we're going to remove this padding cuz we just had that for demonstration purposes only so that we can see the content but to make it really nice what we can do is we can come here and we can remove all this and what you want to do is you want to put it in inside of something uh like a container so we're going to wrap this inside of a container here and then on the container you can control the width you can control the height so let's say the width is 200 something like this and you can do the same thing and now as you can see once you reload the app it's nicely aligned okay because the container is really really good for giving it the exact kind of you know width and the exact height okay so we can do that for the other text Fields here so I'm going to wrap it inside of a container here and let's go ahead and set it so what do we have 200 let's do 150 and let's do 150 here 150 here 150 here and do the same thing for the headers remove the padding okay so what are we using 150 for the width we need to remove the padding and last one make sure we remove the padding okay looks good let's go ahead and reload this all right and there you have it so as you can see it's now perfectly aligned the only thing that we have is the name right so for the name column we can give it a larger width okay and that's still going to keep everything aligned so if we come back here for the name this thing here this container here let's say we do 250 something like this and then for the text you can also control it at the text level maximum characters allowed let's say you only want to allow 200 and you want to do ellipses let's see how that looks all right so now as you can see it's filling up the rest of the um uh the field we give it the area and you can always shorten it more so if you go to the text you can do let's say I don't know 75 characters right how many characters you think is should be enough to make it look good all right so something like this as you can see it's filling up the rest of its space and we have the ellipses here and it's all perfectly aligned and obviously you can Pat it you can give it more space you can Pat this here that here but the most important thing is that we have this powerful Dynamic filtering Okay so so we can only display let's say new okay so then there you see the filter we need to remove that which I'm going to do in a second and we can also do something here right with this form factor display small okay now it's displaying small as well and we can remove new and I can do the same thing with the price as well so let's say I want at least from 250 and up that's going to remove this thing here that is gone and I went from 300 maximum that's going to remove this thing here okay so obviously you can add more fil you can play around and most importantly you can use this technique in some of your other apps as well I mean you got to admit this is really really nice it's amazing how it works it's not a pre website but it's very very functional it's an awesome website so if you want to build websites like this if you want to implement this functionality in your apps then you definitely need to be able to clone this app or at least view this app to see how I did it so that you can can you know play around with it test different things uh test different use cases or just learn this new technique uh that you may not have even thought that you need it right maybe you didn't even realize that you know filtering is tough filtering is not easy but that is how you filter you got to you got to use Dynamic techniques Dynamic filtering and this is the way that you do it and if that's what you want to do then you definitely need to join our amazing patreon Community because when you become a member of our rapidly growing patreon Community you're going to be getting access to not only this app right we're talking about viewing and cloning this app you're going to have full ability to do anything that you want with this app and you know modify it adapt it just learn from it whatever you want but you also get access to all my other apps that I have on this channel every single app that I have that I've done on this channel uh is available from my patreon page but that's not all you're going to get access to more content you're going to get access to things such as Q&A live streams behind the scenes content as well as our patreon supported Master Class Series where I do deep Dives of important topics of of key apps key tools that a lot of people in the community really really like and they want to understand better and additionally I'm going to be doing a big Q&A uh later this week or early next week it's a huge Q&A so if you have any questions you're stuck on something join our patreon ask your question and I'm going to be covering every single question I'm going to be covering every single question that you guys have they're all going to be covered plus we have a super amazing community over there that you're definitely going to love it's going to help you with no code and you're just going to have a lot of fun learning from others sharing techniques with others there's some awesome awesome people there and everybody is eager to learn learn and above and beyond that 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 you've got any amount of value from these tutorials from these videos maybe you've learned something new or maybe you've realized something that something that you can do that you didn't know that you could do before or maybe you're looking to you know build that you know next amazing app or a complex app or a simple app or just you know you know learn something new right maybe you're just interested in no code you want to learn something new then you're definitely going to get a lot more value inside of our amazing patreon Community as opposed to not being a member and so if any of that sounds like something that you're going to be interested in then I definitely urge you to check out our amazing patreon community and consider becoming a member

Channel: James NoCode

Views: 4,162

Keywords: supabase, flutterflow, supabase and flutterflow

Id: SZeYYrKPhcs

Length: 72min 48sec (4368 seconds)

Published: Wed Jan 31 2024