Build A Production-Ready Complex App With FlutterFlow, Supabase, BuildShip and Stripe

in today's value packed video we are going to be building a production ready complex app now we're going to be also leveraging all kinds of tools and apps to add some very very powerful and practical functionality to the app and we're also going to be including some very very interesting and Innovative uh features in our app to make the app a lot more user friendly and add lots of value to our users now make sure you watch this video Until the End you're going to learn a ton of things lots of things that I've never really talked about before on this channel and do let me know if you have any questions below the video now before we get started as always all the apps and all the resources that I talk about on this channel you can view and or clone them from my patreon page and this definitely includes this app right here and so if you want to get access to this app as well as all the other apps definitely check out our amazing patreon community and consider becoming a member oh and one really quick thing I'm offering a flash discount to my amazing mastering flutter flow and mastering superbase training so if you're serious about taking your no code knowledge to The Next Step then definitely join our amazing Community you can learn more about the trainings and the amazing flash discounts which is only going to last for the next 24 hours in the description below the video so definitely check it out and come join our amazing private Community all right so in this tutorial we are going to be building a grocery delivery app okay so we're going to be covering lots of things we're going to be using lots of interesting tools and we're also going to be showcasing some very interesting functionality that I really haven't covered before and that is because the app that we're going to be modeling upon has some really good interesting functionality that I want to include in this tutorial and so our app is going to be a grocery delivery app it's going to have you know things like product display order processing order fulfillment uh real time order tracking we're going to be using a super based back end and we're going to have some build ship integration okay so things like for payment processing push notifications lots of interesting functionality and so the tools and the apps that we're going to be using FL flow for our main app super base for our back end build chip for Integrations as well as stripe for uh order processing okay now let's talk about the different uh Pages the different flows that we're going to be including in this app so we're going to start out with our homepage okay so here we have our homepage on the homepage we are are going to be you know just showing um you know different things so on this page there is some price drops um some different suggestions so as always homepage has a lot of things and we're going to decide later uh in the app when we start you know building the app what kind of things do we want to show okay we'll see next we have the categories view so in this categories view we have search products and you know we have our categories right so you can click on the category see all the products in that category here we have a view called My Essentials okay and so the idea is here they're they're basically suggesting different products uh based upon your orders right so if you've made a couple of orders and you have let's say uh you know products that you're constantly ordering right so in the in those two orders you have like what's say 10 products that you placed in both orders right so you may want to include in this my potential so so we'll see right maybe we'll use some AI for this view to recommend some products maybe we'll show some you know price drops we'll see next we have the main profile page okay and so this is this account page right here remember we're going along the tabs here so this is the four tab this is the account page and we have things like personal data addresses payment methods my orders you know help privacy and data etc etc this is going to be our standard account view now let's say you click on my orders this is what you're going to be seeing right so if you click on my orders you're going to see a list of orders and depending on what's happening with the order so this is a delivered order but let's say there's another order that's pending or processing uh you may see something like this right so I guess this this is this is going to be the view if you click here okay so you're going to be seeing like you know that was delivered on this date etc etc now uh depending on with what's happening with the order right so if you come back here on this homepage uh it's not showing the order but let's say you have a pending order then your homepage is going to look something like this so you have a pending order it's currently being prepared but once it's delivered it's not going to show here right so this is kind of this um you know that it's going to show this order widget if the order is you know from you know being placed until delivered so if it's delivered it's not going to show up here so this is another little area and um if you order is being prepared or it's anything but delivered right so it's you know you're actively tracking the order you still haven't received the order you're going to be seeing a page that looks something like this it might say prepared your order is now prepared and charg but it hasn't been delivered yet okay so something like this all right so let's continue on next we have the order detail view okay so always an important page always important functionality and here uh you know you have your order image you have the title Maybe the you know the the the packaging of the water if it's you know by kilo if it's by pound if it's by slice in this case this is bread it's 14 slices uh this is the price Etc and so now what's interesting here is we have our first very cool UI effect so this uh this page here is showing an order is showing a product that has not been added to the shopping cart so if you add this to the shopping cart you're going to be seeing this so this is going to change so now you have one unit and you see these these two buttons okay so instead of seeing this one button you're seeing these buttons here okay and obviously you can add more and if you add one more instead of seeing this thing you're going to see a minus and this is going to say two units so there are like three different states this is the state when the button when this product hasn't been added to the shopping cart this is the state when you have one of these units it's added to the shopping cart and then there's another state that you know kind of looks like this right it's going to say like two units or you know two plus units right two or more units and you're going to have minus and plus so this is going to be minus and plus right so keep that in mind it's going to be an interesting kind of uh effect that we're going to be doing there so keep that in mind now the next thing that I want to show you is this interesting uh UI effect so we have the homepage here but if we have an item in the shopping cart we are going to be seeing this little kind of um overlay you can call it kind of this over overlay H showing us how many items we have in the shopping cart okay so we have one unit uh and then we have the estimated cost and then you can click on view card so the idea here is it's the same UI it's the same effect but we are essentially going to be seeing this kind of um overlay okay now we have never done this before and you may be wondering how you can do it right how is this accomplished right how is this achieved and actually uh it's it's very very easy to do but there's still a couple of things that you need to know and so if you want to see how this is done you're going to see this when we're going to be building this page now when you click on view cart you're going to be looking at a screen that looks something like this so you're going to have this view card but this is not going to this is not going to be a separate page this is going to be kind of this fly over right I think it's called I forgot what it's called in in flutter flow uh it's called a I don't know some kind of a drawer that pops up from the bottom I forgot the exact name but this is not a view this is kind of like a popup essentially it's it's a it's a special kind of popup Okay now what's interesting on this page here is that uh you have that same effect that you had on the detail page okay and so you're seeing these items so if you have one item this is what you see but if you have more than one it item right so two and and over right two and more 2 3 4 5 etc etc you're going to be seeing this flow here okay so you have your item here uh you have the picture you have the name and if you have you know one item you're going to be seeing this uh trash icon okay so you can delete this whole thing remove this item from your shopping cart but if you have more than one you're not going to be seeing a trash icon you're going to be seeing a minus icon and that means that you can you know decrease the units and once you get to to one unit you know when you have one un unit of this thing of this product in the shopping cart you're going to be seeing this trash icon okay so another really really good effect very very similar to this in fact it's the exact same thing but in a in a different view okay so you're going to be seeing how to do that and last but not least we again have a homepage with a confirmed order okay so this is this thing here what I was talking about right so if the order is anywhere from confirmed so like the first stage until uh almost delivered so you know out out for delivery let's say you're going to be seeing the order here okay and if the order and you know if the order is delivered you're not going to be seeing it here okay all right so these are our UI flows now the next thing that I want to talk about is our database schema so this is as important as as you know designing the actual app because your schema essentially grows along with your app it's kind of you know the flip side of your app if you will on one side you have the actual app on the other side you have your schema so it's kind of this coin with two sides right heads and tails essentially and this is kind of what we have for the initial stages of the app and like I say all the time when I you know start building an app is you know I I I reserve the right to kind of change the schem around as I'm building the app okay this is kind of what we have and I think this looks good this looks good just to kind of get started with so we have the product table and this is going to have you know all the products okay so very self-explanatory we have the categories table this is going to have all the um the categories right so this is a top level table this is going to have a one to manyu relationship right so you're going to have um you know a product that's for category okay so a category might have multiple products but a product can only belong to one category so that's a classical one to menu relationship here next we have a shopping cart now this here is a table that may contain shopping card information okay the idea is here you know we don't want the user to to to you know start kind of using our app add items to the shopping cart and then close the app and they lose all the items so it's good practice to save items to the shopping cart as well but maybe this is something we are going to kind of let the app handle cuz you know with flut oflow you can do um persistent app storage app state which means that you know your app State might get saved along you know with with the uh app information so we'll see maybe we're going to be storing it here as well or maybe we're only going to be using it uh you know just just doing it with the apps um persistent App State we'll see next we have the orders here right so this is a main orders table and this is going to contain information for Just orders as a whole right so you might have you know you placed an order today you might have like for 20 items 20 products but it it's all part of a single order okay next we have order items and this is actually kind of the specifics for this order so you have one order but that order has you know 20 products right so you can think of these order items as a essentially products right it's say a onetoone relationship to products CU that's what order items are they're essentially products product IDs next we have shipping info and this is going to be kind of onetoone relationship to order where for each order once the product you know the order is ready to be sent uh we're going to have various shipping information so things like you know like the address uh The Courier the shipping company the tracking number the the stat the the uh the uh the shipping status is it out for delivery has it been delivered you know maybe the owner is not is not is not home when it was uh attempted uh when there wasn't a delivery attempt etc etc so this is kind of going to be a onetoone relationship to an order because for you know one order you're going to have one shipping info to that specific order next we have my essentials and the idea is for this thing here my essentials where we're displaying recommended products essenti so we'll see how we're going to be doing that maybe this is we're going to be using AI maybe it's going to be just a simple view of you know frequently added products we'll see and last but not least we have the user profile that we're going to be storing information here so things like personal data addresses um payment methods maybe um you know stuff like that right my orders is going to be stored in in the orders table but this is going to have things like personal data addresses things like that and so that is all that we have for now for our uh super base schema all right so the next thing that I want to do is I want to set up my super base back end with these tables here so we can start building the app so here I am in my super base account uh I'm using the free plan so I have a project here without any tables that we're going to be using to set up our um schema okay so let's get started let's start off with uh categories right because products is going to be linked into categories so we need to start with categories first I'm going to create a new table I'm just going to say categories and I'm just going to add one column and that's going to be just the name okay and this is going to be text here and that's it so we have ID created at which are uh fields that are created for us with pretty much any table that we have they're they're like automatic Fields you can delete them if you want right but I would just recommend leave them there right these two fields are very very useful so it is a good thing that they are being included automatically next now let's go ahead and create products so I'm going to click on new tables table products and now we can create a link okay so we're going to do a forign key but before we have this relation I'm just going to say category ID right and now we can create this relation so we are linking to categories and we're saying category ID and this is going to be to the this ID here okay so now we have this relationship here this category D to public categories. ID all right so that's our second table next I'm going to do shopping cart and shopping cart is that table that you know the purpose is to save the shopping cart information so that it doesn't get uh deleted if the user you know exits the app or the app crashes so let's go ahead and do shopping cart now what is shopping cart going to have well shopping cart just going to be have products that's it it's just basically uh it's just going to have different product IDs so I'm going to put product ID here product ID and also the quantity right so it's not just the product but also Quant okay so this is going to link to another table okay and quantity is going to be just numeric okay so we're going to create a relationship uh we're going to link to products and we are going to come in here product id id okay hit save and it creates this relationship here this ID to products. ID okay and so that way it's not just you know anything right it's a it's a it's an actual product that we can look up and so you can say something like this this bread product ID you know one and quantities three and then you can have all of these you know have more and more rols and that's your shopping cart essentially uh also very very importantly we need the user ID as well okay so very important so I'm glad I remember that right because if you think about products and categories there's no user ID these are just general table but once we get into shopping cart orders etc etc we need to link them to a user so I'm going to come here and I'm going to say user ID and I am going to say well we're going to do a foreign key and in this case I'm going to do off and I'm going to say users okay and this is going to be this ID here save okay so now we have this relationship user ID hit save okay and so now what I like to do I'd like to put it right here so that is the first thing I like to have my relationships kind of in the in the beginning so now we have user ID product ID quantity so that way you can create multiple rows and each row is going to be a product quantity linked to a specific user ID next let's do orders and we're going to do new table orders okay so now for orders um there's really like we're not going to be storing the actual products right cuz that's the order items that's the next table orders is going to have just general order information okay so we need the user ID obviously I'm going to put user ID I'm going to create a relation I'm going to say users and I'm going to say um order user ID this is going to be this here so we have a relationship and what else do we need well we also might need some kind of order information so when you're placing an order typically you specify when you wanted to have delivered right so that's how this app works and with this app you can specify like a window of time there's like a 2hour window so like from 10:00 a.m. to 12:00 p.m. from 12:00 p.m. to 2 p.m. etc etc so what I'm going to do is I'm going to add two Fields so I'm going to say time from and I'm going to say time to okay and I'm going to say I'm going to link I'm going to save them as you know as a time stamp Z so Z includes the time zone and this one does not include a time zone okay so do we want to include a time zone well that depends if you need time zone and information right I know a lot of people ask question which one should I use well if you're building like a local app that's only going to be available in a certain city uh with a certain time zone then you don't really need time zone right so you know if I live in New York City and this app is only going to serve New York City then obviously the time stamp is going to be local to New York right all the time is going to be local to New York on the other hand if I'm building a an app where that doesn't serve just New York City it might serve the entire us class or it might be available worldwide then we definitely need time zone so I'm going to keep it simple okay I'm just going to do time stamp no time zone okay so let's say we're building a local app and we have like a chain of stores and that's only local to us so I'm just going to do the time stamp okay and here I'm going to put time stamp as well time stamp here okay so now we have user ID we are going to get order ID as well and we have just you know from two now later on we might add more fields we might link it but I think right now the is good enough I'm going to hit save and we're going to go ahead and create this specific table here okay so what else do we need next is the order items okay so this is these are the actual items in the order right the actual products so new table order items and the first thing that we need is we need the order ID okay so we don't really need the user ID because the order ID has that so that's enough uh we do need well the product IDs I'm going to I'm going to be linking them in a second so let's link this to here and I'm going to say order ID and this is ID here okay next we need the product ID right so you know order items right your order contains the items and these are going to be the um the products and the quantity right of that product right it's just like with a shopping cart except a shopping cart is this temporary State an order is is a permanent State once you place the order unless you've cancelled it and we're assuming that you know that's not the case right now people typically do not cancel the entire orders although we might include that as functionality as well so I'm going to put order ID here and I'm also going to put quantity okay so we have different items and then the quantity of that product right so quantity is going to be a numeric whereas a product ID is going to well it's going to have a relationship so we're going to say here I'm going to do products and I'm going to say product ID this is ID right here save it and now what we have is we have order ID we have product ID and we have quantity and that looks good to me for order items this is I think this is enough for now right Never Say Never we can always come back and add a couple of things but right now it looks really good all right so this is done let's keep moving along shipping info so shipping info is going to be a onetoone kind of an extension of orders right cuz when the order is created and hasn't been shipped there's no shipping information later on we might want to add shipping information when we have it when the order has been shipped or or in is in the process of being shipped so we're going to come in here and we're going to say shipping info and what what kind of things do we want to store well we need the order ID very important and we're going to create the relationship a little later but now let's think about the shipping information so this is going to be the um delivery um Courier Courier right delivery company whatever you want to call it uh you want to have the tracking number uh you also want to have estimated delivery date estimated date and um maybe a status right or actually status should be on the order right it's not directly linked to shipping but I think this is enough for now let's create the relationship with the order ID so I'm going to link that to orders this is order ID and that's it right so the Courier or shipping company let's do Shipping Company actually Shipping Company tracking number estimated delivery I'm just going to do estimated delivery so this is going to be um this is going to be text tracking number is is going to be also Tex right cuz depending you know depending on the company it might have um letters as well as digits right so some companies have the estimated delivery we are going to be doing a uh which is going to be doing date okay we're just going to be doing date Okay calendar date okay all right looks good let's go ahead and save that okay that's done and we have two more tables My Essentials which are basically a list of recommended products and a user profile okay so let's create my essentials U My Essentials so my essentials is basically a list of products okay it's just it's not even like there's no quantity or anything like that basically just list of products but it needs to be linked to a specific user so I'm going to put user ID and we're going to create relationship basically product ID okay and so that way you can see you know um you can link specific products to users that want to menu relationship okay so let's see um let's create a relationship the first one is to or and we're going to say users this is user ID to ID here and one more relationship we're going to do um products and this is going to be product id id here so basically you know list of products linked to a specific user that's really what my essentials essentially is hit save all right that is done and last but not least this user profile here now what is this user profile table what's the purpose this is something you're going to be creating in most of the apps and the reason for this is you know we have some information we have a users table right so if you head over here and you hit both you can go to users and you're provided the table this is your main authentication table now the issue with this table is that you're kind of limited on the fields and this table here it's a um it's a readon table okay it's a secure table here right uh you can't really add stuff to it right because it's in a different schema and uh even if you could add different fields you don't want to do that right you just want to leave this table as is and you want to create another table this is something you're going to be doing all the time in like 90% of the apps right if you're building you know a complex app or something close to a complex app you're going to be adding an uh specific table so what I'm going to do is I'm going to call it user info table and this is a classical onetoone relationship so for every record in this table that's going to link to exactly one record in the users table or shall I say it another way for every record in your um users table that off table you're going to have exactly one record here you're not going to have many records it's not a one to many relationship it's not a many to many relationship it's a strictly Ono many relationship and if you come over here we have this user profiles and there's personal data there's addresses payment methods my orders stuff like that and uh right now what I'm going to do is I'm just going to add a couple of fields okay we'll see exactly how much of this do we want to store because if we have multiple addresses that should be another table right it should be a separate table right that becomes a one to many relationship and so what I'm going to do is I'm just going to add a couple of fields just to get started with and uh the field I'm going to add is maybe like a username just to get something started with in um we have emails I'm just going to add username and a phone number so maybe like a phone number okay so for username this is going to be text and phone number I'm just going to make text as well I'm just going to keep it simple okay so something like this and later on we'll see maybe we'll add more Fields oh most importantly we need the user ID right cuz that needs to link to user ID I like to put it right here and I'm going to create a relationship uh to or and I'm going to select users and user id id okay so now this table has a you know has a one to one one to one relationship back to the other table okay so user ID username and phone number and maybe we'll add more things here and I'm going to save this table and so here you can just add records that are essentially going to be an extension of the original off users table okay all right so now we have all the tables here but we're not done yet there's one more thing that we need to do and so if you take a look at the tables here all of these tables uh there's no RLS policy and if you hover over if you hover over this you see that it says RS is enabled for the table but no policies are set select queries will return an empty array of results and so what this means is that we have Ro level security on this whole database right on this whole this database essentially and that means if you do not create any rules then there's no way to access this data because uh these uh rules are uh you know they you need to create rules if you want to get access so it's not the other way around you it's not like you're creating rules to block access you're creating rules to have access right it's it's kind of this policy here and so what we need to do is we need to create RLS policies for these tables and what I'm going to do is I'm going to click here and I'm just going to create uh just a permissive kind of RLS policy where you can add data you can read data just to get started right so I'm going to select all here and I'm going to create an expression called true which means that you know you can just do anything right and later on we'll see if we need to kind of modify it but when testing this is a good idea all right so and I can also provide the name I'm just going to say all all okay so everybody can do anything essentially right all right so I'm going to hit save and I need to do it for all the tables cuz otherwise we won't be able to access this data all right so now let's go ahead and find uh the other table so we have this category I'm going to select this thing here I'm going to add an RLS policy create an RLS policy I'm just going to do all I'm going to say all and I'm going to do true all right and let's go ahead let's keep going order items okay cuz if we don't do this we won't be able to get to display this data in our app and you might you know a lot of people uh will be wondering why that is right so I'm just going to do this real quickly all and we're going to just set true for both of these conditions what else do we have Waters okay so as you can see select ques we will return an empty array of results so we don't want that obviously want to get data and I'm just going to create new policy save policy okay we have this we just have a couple of more tables policy create new policy all righty and three more tables all less policy all right all right so now all the tables have policies and that means we'll be able to access this data from our front end app all right so now that we have our schema set up we have a general kind of idea what we're going to be building let's go ahead and start building the app so I'm going to jump into FL oflow we're going to create a new app and I'm just going to call it delivery grocery delivery app okay we're going to do a blank app and we are not going to be using Firebase right we're going to be using super base so we're going to deselect that and now we have the app first thing that I want to do is I want to connect my super base to this app so I'm going to search for super base and I'm going to enable super base next I need to enter this API URL and this Anon key so I'm going to jump back into super base I'm going to click here API and I'm going to select this URL paste it in here and select this non key and paste it in here as well get schema and now we see our schema table so everything looks good here and the next thing that we're going to be doing is we're going to start building the app so let's take a look at what we're going to be building first so so first we're going to be building this thing here which is the homepage now for the homepage uh you know it has a lot of things here so we're going to start out simple we're going to start out really really simple and for that I propose that we're just going to list the products for now and then maybe later we'll we'll kind of add some of the the um uh some of the functionality in there but right now I just want to do followup products and I want to do search so products is going to be easy to do search is going to be tricky okay as you're going to see in just a second so let's go ahead and do a list View and for the list view can we do tiles I really like these tiles here I think tiles can work right so for the products I'm actually looking for something like this maybe right kind of like what my essentials has so tiles might not actually work okay so let's just do uh let's set up a custom um custom UI okay so when you look at this you should see immediately that this is a row with two columns right this is the First Column the second column then you have a bunch of other rows okay so let's do that we're going to start off with a row we're going to do a column and we're going to duplicate this so now we have two columns now one of the columns this second column is taking up a lot of space right it's kind of maxing it out right so that's what we need to do and the way you do it is you select the column and you come to this expansion and you click here and that's going to use this it does kind of this greedy thing right it makes it greedy now one thing I want to do is I want to do do a little bit of padding and let's do a padding on the row level let's do a padding of 10 okay that looks better and now let's go ahead and fill it in with different things so we're going to put an image here now this is a big image I think maybe 75 by 75 looks looks about right and now let's go ahead and put a bunch of rows here okay so there's like a ton of rows I think there's like four rows I believe so we have four rows one 2 three four and this is a about so these are all text R okay I'm going to do text I'm going to do text I'm going to do text and I'm going to do a button all right and yeah looks good they are left Justified which is kind of what we have so looks good to me let's do a little bit of padding on the on the actual these inner rows so we're going to do a little bit of padding I think 10 sounds a bit right it's probably too much it's too much but uh let's make it a little bit less I think that's that's a little too much it's a little too ambitious I think five is better now let's come back here looks it's about right to me let's put a so we have the button here we have the text and um yeah it's starting to come together I think the buttons going to be a little bit wider maybe not a little bit but a lot so maybe like 200 300 okay that looks better so something like this there's the button there and I think the colors are different right so it's say seethrough right it's kind of this white button with a border and let's try to mimic this style here so let's say the fill color is going to be the text is going to be um it's not going to be white anymore it's going to be something like this and we need to have a border radius of yeah I think 8 or 10 looks good and let's give it a border so the Border color is going to be this okay and there's a little bit of um let's do 250 275 okay that looks better and yeah looks good there's no um elevation right so we remove that and we also need to re uh take take a look at what else we have elevation zero okay so there's no kind of that 3d effect right that drop shadow so now the buttons starting to come together and we're going to we're going to fix all of this so the only thing I want to do is I want to make this a little bit bigger and yeah this is going to be large and we'll fix the padding in a little bit the next thing I want to do is I want to load it with um with the actual products right so we're going to go back to list few come back here at query we're going to do super base query we're going to do products okay we're going to say confirm confirm okay so now the products are going to be shown and right now I'm just going to list the product name and in fact our products there's no product name why is that did we forget to put it in a name of the product here let's take a look yeah we don't have anything we just have the category ID okay we forgot the name so we need to add the name and we're going to add the name here text okay that should be good to go name text and actually there's a couple of other things that we need to add right so there's the price and there's also um the unit and there's kind of the amount of the unit right so this is 450 G and this is unit right cuz you can have a different things like for instance or maybe the unit yeah maybe we'll just leave unit as this for everything but we definitely need the the amount right so like the weight I'll just put the amount okay so cuz I think with like different things it's 14 in slices so uh we're going to keep this unit but I'm going to put them amount right so sometimes it's going to be you know Gram sometimes it's going to be slices so let's go ahead and add a unit and I'm just going to keep it simple I'm just going to say text all right and uh we don't have any products let's go ahead and add some products I like to do it in threes so let's go ahead and add a couple of products so category idea we don't have any categories okay let's do categories first let's come to categories what kind of categories do we want to add well it depends on the products we're going to be adding right so if we uh jump back here let's do dairy let's do vegetables and let's do uh grains like for bread okay cuz that's the products that I'm going to be adding next so I'm going to jump back here I'm going to add a so there's a filter here ID is one we're going to remove all filters and we still don't see anything so if you see that filter and you're not you're not seeing anything make sure you remove that filter cuz that filter might be limiting uh in terms of what products are visible so I'm going to add a row here here and I'm going to do grains Okay that's the first one I'm going to add another row I'm going to do um what are we going to do we're going to do vegetables or maybe even like fruits and vegetables just to keep it simple and I think the last one was Dairy all right so cheeses milks milk things like that so Dairy okay all right so we have three categories here right here looks good now we can jump into products and we can add three products so let me add a cheese I'm going to do a um GAA cheese and the unit what's the unit the unit is 450 G right so I'm just going to do 450 G and we forgot the price we also need the price let me go ahead and add a price and the price is going to be numeric Let's uh I like to put the price here let's put the price what's the price for the GAA 3 uh 330 all right let's go ahead and add another row this is going to be uh bread so bread uh what is the unit and what's the price so it's $290 and it's going to be 14 slices we still have these grams here so I'm going to put 290 and I'm going to put um 4 470 G so the unit is 470 and the price is again 290 290 okay and last but not least we're going to be doing like vegetables veggies insert row uh let's go ahead and do fruits and veggies name is like carrots and what do we have for carrots well it's 1 kilogram and 1.09 Okay jump back here unit is 1 kgam 1.09 all right here we go so now we have three category items and we have three products and so now we can jump back to our app and we need to refresh it cuz we refresh our schema now we can go back and we can fill it so now if we come over here we see all everything right so this is going to be name and the default value is just blank cuz we should you know we should have a default BL uh value we should have a value in the first place this is the units and then the price so this is going to be units and this is going to be price you can even type price directly we're going to be formatting as a currency and here you want to do custom format right so you want to copy this so that you have that that se two Place decimal okay so you see this right here confirm okay now the what does the button says the button says add one unit so that's what we're going to do add one unit okay all right and this should say homepage all right let's go ahead and run a w and make sure that we we are seeing those three products okay let's go ahead and uh uh set up a test mode here and hopefully this should at least show us the products it's always a good idea to keep testing as you're developing all right and there's our app and as you can see we are seeing these three products okay the only thing we're not seeing is this formatting it's not set up correctly this one looks good but these are minor minor things and the other thing is the image right we we are not storing images this is something I'm going to do later but right now at least uh you know we we are showing the products now the next thing that I want to do is I want to do a search functionality right so if you take a look at this app in the homepage everywhere we have the search products search products search products I really really want to do that that's going to add some very helpful uh piece of functionality to our app so in order to do that we can just come in here and we can just add a container and we're going to put this container all the way to uh to the top right here and this container is going to have our input text field and let's go ahead and fix this container up size it and let's give it a little bit of padding all right and this text field what I like to do is I like to change underline to outline I really like this outline okay now it's starting to come together okay uh this container I can also uh do rounded border radius so something like this okay so that uh let's go ahead let's do a little bit of padding on the text field so that's going to fix it so if I do a padding here okay so we have this container in fact you I don't know we probably don't even need to do padding on the container level right so we can do something something like this and then for this list view what we can do is we can give it a white background later okay we can give it a white white background and that way everything has a white background but I think this looks really good now right here what I want to do so it says label I'm going to say what does the app say search products search products and there's an elipses no there's no ellipses uh and the other thing that I want to do is I want to see see if I can give it an icon so there's some icon properties here so we can do a leading icon and I can just find search and that's going to do this really nice leading icon you can do a trailing icon right so something like maybe clear yeah okay that looks cool so you can clear it this thing I can actually do something right this clearing icon I think we can let me see show clear icon that's what I want show show clear icon so we don't really let me see so we have deleting yeah this is kind of what I want show and this icon color is going to be this okay let's go ahead and fix this so if I remove this we're going to clear I'm going to clear this and I'm going to do show clear icon icon size okay now we have it okay that looks really nice all right so we have this thing here and we don't really need a button or anything like that because if we click here we have all of these callbacks here on submit unchange un Focus change and we're going to be using this unsubmit now there's a there's an issue that we have right so if somebody types something right what you're going to be doing is you're going to come in here and you're going to set up a filter so what I can do is whatever they type I can do a filter I can just do name equals to and I can store the value of whatever they're typing as a page State a variable and then I can just use it here but there's a problem and the problem is if they clear this filter meaning that okay they're they're not searching for anything anymore they don't really care they just want to see all the products right which is a common scenario right they're going to type here um and that's going to clear the filter in their in their in their eyes right in their mind but the problem is we can't uh programmatically dynamically remove this filter cuz once we have this filter we can't do anything so even if you know even if we say equals to and this thing is empty it's still not going to work right this filter is still not going to is still going to be active and so this means that this standard superbase query is tricky because we can't dynamically remove filters that we are setting here we can dynamically set or remove filters okay we can set them here we can remove them here but we can't do them dynamically while the app is running and so what this means is that this super base query what we have here is just not going to work right this built-in thing until flat of flow makes this whole filter dynamically setable and I have no doubt that they will at some point we can't use this okay now thankfully there's another way of getting getting this data and that is by using an API and so if I select products here and I click on API docks I have this API docks now you want to change this to bash and you want to click on show keys and then what you want to do is you want to go into filter and here you have an API way of getting the data with a filter now thankfully this is dynamically uh you can you can dynamically control it so you can set the filter dynamically you can remove the filter dynamically it works really really nice and what this means is that we need to change the way we're getting the data we're not going to be getting it using this products um built-in query we are going to be getting it using an API call okay so let's go ahead and configure this API call I'm going to say create an API call I'm going to say get products and all I need to do is go ahead and copy what we have here so what I need to do is copy this here okay and that says a filter on the ID equals 1 and we can change that later so I'm going to go ahead and put it in here let me go ahead and copy this copy it here paste it in here okay so now we have this thing you want to add it cuz this doesn't save it automatically next we want to take a look and see what's happening so this is a uh this is a get request and we have these headers here okay so you want to make sure that you have these headers configured correctly so we're going to come back here we're we're going to add these headers go ahead and copy that and I'm going to paste that okay API key I'm going to add another header come back here this authoriz ation and I'm going to I'm going to paste that and there's one more header this thing range right you want to have all the headers and we're going to add it here okay you want to hit save and now if you go if you go into response and test once you run this API call you should get one record because we're filtering where record ID equals one so let's go let's go and see if this is works and we do get one record which is this good that go the cheese right this is ideal one it's probably the first record that we've created all right so this looks good now there's still a couple of things that we want to do if you're dealing with apis and you're getting data that you understand right typically that's going to be the case you're going to know what the data is you you want to um employ this feature here data type parse as a data type now we don't have a data type okay so we can't parse it as a data type and so we're going to go ahead and and set it up and before we do that I just want to see what kind of data we have so we have ID we have um name unit and price uh category ID we don't really need right now and so I'm going to go into our data types and I'm going to add a data type I'm going to say product type create I'm going to add the fields and it's ID which is an integer um name which is a string price which is a double because we have that decimal part and let's see what else do we have I think we have units as well yeah unit I think is it uh let me take a look it's unit singular unit and that's it and then category idea which we're we're not going to be using right now so unit is text as well string okay so now we have this data type okay and so now we can go back to our API here and we can say process data type this is going to simplify it so much and you also want to select these list why because well if we save it first uh because when we run it you see it's a list you see these um square square brackets how it's enclosed in square brackets that means this is a list and this is just one item and so you want to make sure that you select is list okay and now you can hit save okay so now our system will know that we want it to be parsed as a data type okay so this is great this is something that you should be doing uh in 90% of the cases okay unless you have a good reason not to and the next thing I want to do is I want to change this list view here where we using the standard um backend query I want to change it to an API call so I'm going to select this I'm going to do API call and I'm going to say get products confirm okay and then here what I can do is I can generate Dynamic children so I can come over here get the response as data type right you see how it's selected and now I can say product item okay save okay and now we have this list here we are getting it via an API and because we're getting it via an API we can control the filter the filter is fully Dynamic now okay and so right now if you come back we have this thing here right says ID equals to I'm going to select that okay because uh we don't really need that and if I run this again we're going to be seeing everything we're cuz we don't have a filter right now so now I can come back here and I can link my product so I can come back here product item and I have data structure field right so because um we're parsing it as a data structure uh we don't have to worry about those Json which is really really nice Json paths okay so this is name uh this is um what is that that I think that is let me look it up that's going to be a unit right so that's going to be the unit and this is going to be the price okay so come in here data structure field I'm going to select price okay price and we can also format it right because it's a double number we're going to do custom formatting in here we want to make sure that we select this one right here custom format okay displays currency all right so now if you run our app we're still going to be displaying the products but this time we're getting it via an API let's go ahead and restart our test environment let's rebuild our app here and there you have it okay so now we have this here and it's via an API and we have the search here still okay so the next thing that we need to do is we need to work out on a way where if they type something we're going to be generating a um custom filter a dynamic filter so that they can search something and and it's going to um filter it based on whatever they're searching and the first thing that we need to do in order to kind of set that up is well first we need to set up a page parameter to hold this uh query string cuz this is essentially a piece of state so I'm going to do a search filter here this is going to be a string okay and it's going to be nullable right because if they're not typing anything it's essentially no we're going to say confirm okay now when we select this uh we're going to open an action unsubmit so that when they submit something we want to save or whatever they typed into that page state so I'm going to search for page State update page State we're going to say set value and this widget State okay and for the widget State I want to change this to input input search something like this so that I know this is an input uh field okay so now when they type something and they press enter it's going to be saved into page State now the next thing that we need to do is we need to attach a dynamic filter to our API so if we come over here what we need to do is we need to set up a query parameter that's going to be dynamic so I'm just going to call it a name and we're going to get it from a variable by the same name right so if we come over here we have a variable here which is going to be a string it's not a list and this variable can be set dynamically and this is going to be this query parameter okay so if you come over here we have this name now if I don't select name right if if name is empty or there's nothing there it's going to work as expected it's still going to work right okay and so now we need to set up name okay how is this going to work well it's going to look at our page State and based on their P page State it's going to create a specific uh instruction uh to super base to act as a filter okay so let's come back here and let's select our API call I'm going to do an edit and here you can set additional varibles so I'm going to say name and so what we're going to do is we're going to create a code expression that's going to take into account various variables so I'm going to add an argument this is going to be a uh search string and the search string is Page state right so not page parameters page State okay and what's going to happen it's going to return this and here we're just going to call it search string and so the idea here is that if search string meaning that is not null meaning that they type something our um our uh you know the the filter variable is going to look like this I like which is insensitive like and that's a way to search for something right we're going to say I like to this right we're going to be searching for this and that's what we're going to be setting it to okay and so this is our search string here and we're going to say confirm we're going to say check errors first and if it's empty it's not going to it's just going to be empty right so so we're going to say confirm confirm and because we've set it as a name right so this query parameter name this is what we're searching on right so name is is always going to be there because we're always searching on name but this variable is going to differ right so if you come over here and we paste it in here in fact what I'm going to do is I'm going to say delete all that this I like uh this is empty now okay so if we we can also search for this and if it's empty it's going to display everything so it's a very robust way to reset the filter but what I can do is I can type something like bread over here so if I do that it's only going to show bread you see that and this is why it's so cool because with a standard setup the standard super base setup and built-in flut flow you can't do that right you need to remove this filter and here we don't need to remove the filter we can set it to nothing we can set it to empty and that essentially removes the filter okay so now if we run our app and we type something and we should hopefully um you know find what we're looking for essentially so let's go ahead and reload our um our app here and see what happens all right so here's our app and as you can see by default we are displaying everything because there's nothing in the search so if I type bread say Ty bread here press enter it should hopefully filter and as you can see it's now bread here because it sets that filter red do the API call and this is what it gets back now I can do this press enter and now we are back here here okay now we're back to um seeing everything I can also type cheese press enter and we're seeing cheese I can do that again and now we're seeing everything okay so this is a a really nice pattern for a very very common issue right so anytime you want to display things from somewhere from a database or API and you want it to be searchable this is the way you do it because you can't really do it um using standard built-in uh backend query uh flut oflow functionality now guys I really really hope you're enjoying this tutorial but if you're serious about your no code Journey if you really want to build amazing powerful practical easy to use apps and you want to maybe you know start a software company or you want a freelance or maybe you just want to learn something new or you know just you know you want to just build cool things things right then you definitely need to check out my training mastering flut oflow as well as my other training mastering super base mastering flutter flow is the best training on flutter flow on the whole internet it walks you step by step module by module and it covers everything that you need to know all the important bits and pieces when it comes to using flut flow for building your apps and my second training mastering super base is critical for you guys to master what I feel and a lot of other people agree the best backend when it comes to building your apps now when you purchase the training you're also going to get access to our private Community where myself and other amazing members of our community would be more than happy to help you out with any issues that you might have so that you can get out of this block and continue building your apps and so if you guys are really really serious about building some amazing apps and you want to join an amazing community and just get up to speed and start building amazing apps without wasting lots and lots of time on useless tutorials and just useless methods then definitely check out my amazing training mastering flutter flow and mastering super base you will be glad you did and you can check out the links and a special discount in the description below the video so definitely do not delay come join our amazing private Community all right so the next thing that I want to work on is this category View and this is fairly simple okay we have the search bar here and we have a bunch of categories okay and when they click on a category they're going to be redirected to the products view okay and the products view is going to look very similar to what we had on the homepage okay and maybe later we'll make some adjustments to it okay all right so let's jump back into Flor of flow this is our app right here this is our page and I'm going to go ahead and add another page and we're just going to do it from scratch create blank I'm going to say categories okay create this and now we have a page I'm just going to put categories I think that's what it says yeah categories we have a search bar we'll do that later but right now let's focus on the list View and this list view is like the other list is fairly simple we have a row with three items and once again this column here right three columns this middle column is going to be the greedy column it's going to take up a lot of space so let's go ahead and set that up we're going to do a list View and we're going to do a row and then we're going to do three columns to kind of divide them up right one two three and this middle one is going to be the greedy one and and in fact yeah this looks good and this column is going to have this little um you know this little pointer right to kind of which means that you can press on it and go to the other page so this is going to be an image and we'll we'll make that real small I think 50 by 50 is about right in this case let's go do padding for the rad it's always a good idea I like to do 10 and see what happens and this thing is going to be the text field and this thing is going to be a icon button Let's do an icon button and let's fix that up uh border color do we is there a border color no there's no border colors border width is zero uh do we have this we're going to clear the color fill color well fill color is also we're going to clear that as well and we're going to change the icon to this and can we do greater than more more than I've seen something similar so there's one here expand is it expand I always I never know what they're called right I never know cuz there could be so many names to them and I always get them wrong okay so let's go ahead and find it a bit slower so many icons greater than how about Arrow I think that could be yeah okay all right so there's the arrow there and let's go ahead and format this this is going to be left Justified okay perfect and we also need some padding on the column levels right padding is your friend I like to say I think 10 is going to be a bit too much we'll do five cuz we did 10 on the outer row so we'll do five and we'll do five here okay so now we have this and this is going to be the column uh the the category excuse me let's go ahead and load this up we're going to do a super base query categories and uh that's it confirm and let's go ahead and connect this to category name okay all right looks good and another thing I want to do is I want to make the background white all right so we can do do it on the column level which means that we need to wrap it right actually let's see if we can do it oh yeah we can do it here we can do it here and we're going to do okay perfect we can do it on the on the scaffold right this top level is the scaffold all right looks really good and the next thing that we need to do is we need to connect it through the actual products page and we don't have the products page let me go ahead rename this to homepage and now we need products so how is products going to look well I think it's going to look like this for now right because remember the homepage is supposed to be this unique it's supposed to show some special offers discounts things like that but we just have a regular products so I'm going to duplicate this and I'm going to call this products and the difference here is this is going to be a filter right meaning that it's not just going to display all the products it's going to display products uh linked to a specific category right so this is going to be um I don't know it's going to be Pro category products something like this okay so the idea is they click here and that's going to redirect it to this page and this page is going to display products in that category so I'm going to say products and I want so let's come back here let's go ahead and create a navigation action I'm going to do navigation we're going to navigate to category products and here we need to define a parameter so what kind of parameter is this page going to accept well it's going to accept a whatever whatever data we have right so in this case it's going to be a category row we're going to do a super base row and this is going to be a categories okay and from categories we can get the category ID and all these things so this is going to be the category row okay and now we can pass it here category row and we're just going to select this row okay and nice thing about rows is that you can get any field you want from that row right you can capture the field that you need and so now this page gets the category ID and I'm just going to do in category so that I know that this is a separate page and what we can do here is we can actually filter by the product ID and here how we are doing it remember we're doing it by an API okay so we need to make sure that we have that filter there by category ID and also we can modify it if you want right we can modify it we can just have a display you know using the standard back end but what we can do here is we can come over here and we can edit this get products and we have this name filter and what I can do is I can add another filter right so I can add another filter and this is going to be the category ID category ID and this is going to be an integer actually it's going to be from variable and I'm going to create a new variable cat ID and Cat ID is going to be a an integer right because the category ID is an integer okay we're going to save that and now we have we're going to have this category ID here that we can use and this category ID is always going to be there while the name is is going to be a filterable right it's going to be a searchable and so now what we can do is we can come over here and we can test it out right so you know if we test it out if we say category ID you see how it says category ID is null right and the thing about it here is we need to make sure that we are filtering it correctly right we need to make sure that we're filtering it correctly because if we set this as if we have this here uh it's not going to be correct right so you you can see that if we have name here uh that might work actually category ID can work let me go ahead and find this uh let me go ahead and find what is it called it's not cat ID it's uh let's go into products category ID okay so that's what we need to call it and then it's going to work so let's go back here I'm just going to say category category ID save it come back here and now actually it's a variable ah yeah that's right yeah we can do that and now if we select it category ID is being passed okay and so if we come back over here we have this thing here category products and here what we can do is we can set an additional variable this is going to be the category ID and the category ID is going to be from this category row uh ID okay with you know the category that we selected to look at the products and so we have this now and so now uh we just need to make sure that the filter is set correctly so if we come back over here edit this API call come back here the name is going to be provided by the uh we have something else there right right so if we come over here uh if they type something remember that's a um that is this search filter here right and so if we come back over here and we edit this in fact if we come back over here we can see that we have this name which is a code expression and this code expression generates this here and so we need something like this for the category ID right because it's it's uh it's it needs to be a special format it needs to be like EQ Point whatever the ID was and so we need to do the same thing for cat ID we can't just pass the ID directly right because it's it needs to follow the special format and so instead of passing it directly what I'm going to do is I'm going to do a custom um uh code expression here again and I'm going to add an argument the first argument is going to be the cat ID and we're obviously passing it here I'm going to pass it right here so we have that argument now if we pass this here uh what we can do is we don't really need that because category ID is always going to be there right it's never going to be null just you know how it is with search and it's going to be something like this EQ and then we can put the cat ID like this okay and so this is going to generate the value right the value cannot be just a category it needs to be eq. category ID okay something like this and what is the return type it's integer it's not integer it's actually string and let's go ahead and check for errors okay no errors confirmed okay and this parameter here remember we made it an integer and it it's not going to be an integer it's going to be a string and so what I'm going to do is I'm going to copy this I'm going to come back here and I'm going to change the parameter that we're passing okay because uh it cannot be just a um it cannot be just an integer right it's got to be a string and so what we're going to do is we're going to come back here we're passing this here but the parameter to this thing to this um category ID this variable this variable is not going to be an integer it's going to be string in fact all of these are going to be string okay so now if we come back and we come back to category products and now we need to filter it all right so we come back to our call our API call come back here we have this thing and now we can remove it and we can do our code expression okay and we're going to pass this cat ID and in this case it's still an integer but eventually it's going to be a string okay cuz we need to convert it and here we can pass this we need to make sure yeah this is good and yeah we're returning a string okay so now we are returning this EQ do whatever one or whatever the category ID was okay and that should hopefully work okay we still need to test it out but it should hopefully pass in that parameter because if we test things out here you can see that if I pass this here as let's say category D1 that should work right so if I don't filter by on the name of the product just on the category that should hopefully get me a result you see how it filters by category ID one if I do category id2 it filters in on category id2 etc etc so it cannot just be a number it needs to have be this special format all right so that is what we have here that should hopefully work we have our categories here we have the link we have the name of the category there should be three categories here and then they should automatically be filtered by the category ID here and in fact here we can do for testing uh we can do something like this we can do combine text place that in there and then we can enter display the category um category name so we can say products for something like this just to see if the category if the name of the category is being passed correctly now before we run this app we need to make sure that we can actually access it right cuz we have the homepage and then we have the categories view so these two pages homepage and categories need to be accessible and they can be accessible via the uh the nav bar so I'm going to go ahead and create a nav bar and I want to I want to make sure that these two pages have the Navar access okay so now they have the Navar and the homepage icon is is perfect but the category icon is not so let's see if we can find some kind of a category icon um that's always it's always a challenge but I think I've seen in fact here it's this thing right it's a it's that they chose that icon as the category and so let's see if we can choose boxes maybe uh yeah maybe something like this okay I think that's going to work you guys can select another icon okay now we are ready to run our app so let's go ahead and start a test session and see uh what's happening now when we run the app we have this page working the categories but our homepage has an error okay so what it's telling us is that no such method error two list uh you know dynamic call of Nolan so what this means is that it's trying to to display a list but it's not getting any data okay so why is this well if we go back to our app remember we added a new variable to our API call and so we need to set that variable because if we don't set that variable uh this query parameter right the second one it's just it's just not going to have anything right and so we always need to set you know if we don't set a variable at query parameters is going to be set to nothing and that's that's probably what's making an error and so if we go over here and we're on the homepage and we pass this category ID but the problem is we don't really we don't have a filter right so what we can do is we can just say well display items that that have a an ID that is greater than zero and this is everything right this is like having no filter and so if we do that right we're not filtering right CU on this page this is the main homepage we're just saying display items where the category ID is greater than zero and because they start with one this is going to work and so we say confirm we go back here and we reload and hopefully that should display all all the items because they start with one and that's basically clearing the filter displaying everything all right and now it's displaying all the items okay we still have this filter right so if it's Ty bread it should hopefully work but the category filter is cleared okay it's not we're not setting it here and that's fine so if we come over here and now what we want is let's say I pick grains and we come over here and we only see bread because there we have the category filter set okay so now I can go back and in fact we need to make a back button here and it also says products for grains or products in grains category you know that should probably that probably sounds better products for but you guys get it right okay so this works let's go ahead and add a back button here come back over here category products where is that yeah default button I think that's the one is that the one default button all right let's go ahead and reload this all right come back here and there's the button okay and so we can go back okay for some reason it's not displayed here but if you set it and you don't see it just restart the app it could be a little glitch a glitch in The Matrix okay and so you can go back here and there we have it okay so now we have this screen here it looks good it works great the next thing that I want to work on I want to build this out here okay so this is going to be the detail View and that's what we're going to be working on next all right so the next thing that I want to work on is this detail page here and this is your standard detail page we have an image we have three rows of text and we have an interesting flow here which is this add button flow so this page here is if you hadn't added this item here but if you did add this item it's going to look like this and additionally if you press this plus this becomes a minus and this uh you know obviously is is greater than one so so if you added more than one items this becomes a min and this becomes a plus if you only have added one item this is uh the you know garbage icon this trash icon which allows you to delete this icon this item from the shopping cart or add another one okay so let's go ahead and build this out let's come back to our app let's create a brand new page do it from scratch and we're going to do product detail here all right click create and let's go ahead and set this up so what do we have we don't have any title we just have well we have an image and three pieces of text so let's make this and we should make all of them white in fact and let's go ahead and add our image and we're going to add our pieces of text now for the image I like to wrap it in a row just to make it a little bit more um organized okay we're going to wrap it in a row here and I'm going to be centering this row like this and then what I'm going to do I'm just going to duplicate this in fact I should delete this delete this and add a text add a text add a text okay so let's take a look so these are all left Justified we have three then we have a divider line and we have a button let's do that let's add a separator or divider and let's do a button here all right all right looks starting to look good uh let's go ahead and add a little bit of padding to the uh the rows let's start with 10 we obviously should have done that before we duplicated them but still there we have it and let's do a padding just leave this divider we'll just pad around that we're going to do padding here all right so this thing this button is going to take up the whole Space okay so what we can do is well not that what we're going to do is we're just going to expand it okay we are going to expand it to take up the whole Space so something like this make a rounded Corners there's the radius 10 okay that looks good let's make it a little bit taller uh change the color uh I believe it's white with a um um the text the text the text is the only thing that's visible okay so we're going to remove this elevation and let's make the Border this and let's find this text the text is not white it's going to be this okay so something like this is kind of how it looks okay so yeah the text is a little bit darker but we'll just leave it I think the um the Border radius is is more in fact I think it's probably even 20 not 15 make it 20 okay that that that looks about right let's make it a little bit wider okay perfect okay so we have this button now this here all this text needs to be left Justified right it's not Center Justified it's all left justify so something like this and this is and the the other thing I want to do is well I want it to be more I want to create more padding on the left in fact let's do padding 15 it's a little ambitious but all right yeah probably too much padding but we'll fix that later let's do this text uh let's do it um label medium no it's got to be bigger than that tile medium okay change the color make it black okay that looks a little bit better yeah I think the padding padding is too much padding is definitely too much so what I'm going to do is I'm going to do this and I'm going to do 15 here and 10 here and I'm going to copy the padding this is nice this is a really nice feature I'm going to paste the padding paste the padding okay all right so it's starting to kind of come together this is going to be the product title but this product detail is going to receive a parameter okay let's come back here and let's add a page parameter and we're going to say product row okay because it's going to be getting that product row which is a super base Row from the products table uh yes products table and we are going to get it from I believe not categories um yeah so product detail product detail category products okay so this category products and actually the homepage let's start from the homepage right because they're they're products there right this whole row needs to be linked you know when they click on it this is how if they click here or in fact if they click on this image right we don't want them to click on this CU this button is separate let's say for now we can just do this image I mean obviously we can link all of them later but we'll just do this image and we're going to do navigation navigate to product detail and we're going to be passing this product row okay now we don't have that product row remember we are getting it via an API and you know the the the the disadvantage here is you know we don't have that product row so there's a couple of things that we can do one quick thing that we can do is on this uh row level we can grab the product row right so as we are getting these items we can grab the product row we can't create that product row right we need to grab it from a database we have all the data but unfortunately we cannot create it from scratch what we need to do is we need to get it from the database so what I'm going to do is I'm going to do a backend query I'm going to do a super based query and I'm going to go into products and I'm going to do a filter in fact this is going to be a single row and we're going to do a quick filter where ID is equal to um product item id data structure field ID okay so that's kind of how we have it set up obviously we're doing a little bit more kind of data pulling right might not be as as um efficient as we could have done but that's a quick fix to do it okay so now we have this so now I can click here and I can pass this product row cuz we have this product row now Okay and like I said um another thing that we can do right there's another thing that we can do if you do not want to do it this way right if you do not want to do it this way then instead of passing the product row you can pass the product ID but then what's going to happen is on this product detail if you just have the ID you will need to query again right you will need to query again for all the other data but because we've queried it uh we we performed that query on this homepage on each row we can just pass the row so that's the trade-off of course you have to realize that here we are querying for every single row regardless of whether the user clicks or not right and so this is slightly less efficient than what I just described but you guys can change it right we're just building an app and that's why I'm telling you the different scenarios so that you guys can keep them uh keep them in mind as you're building the app okay so this thing redirects to uh product detail and if we come to product detail now we have the product rle okay cuz we' we've done that query on the previous page okay so if we come over here uh we have this product rle so now we can simply fill in the fields right so this is what the product name I believe uh we can go product name here and uh what else do we have uh we have the package and this is the unit and um yeah I think it's just the unit and we have price per kilo we're not storing that we're just storing the unit so I'm just going to click here and get the unit information uh unit and then we have the price okay and this is going to be the price in fact if we type price no price does not pop up because we need to select first product row so we go to the price and in fact let's go ahead and format it always a good idea let's do a custom format let's get our custom uh format to two decimal places here custom format confirm okay so now we have this what does the button say the button says add okay so that's what it says just add and that's about it right we still need to get the images we'll do that later we'll do that later and now uh let's display what are we going to display nothing well it's not displaying anything here so we can potentially remove this app bar and not have it but um let's display the product name okay let's go ahead and display the product name we have the product row which is nice all right let's go ahead and see if it works from the homepage to the product detail we also need to link it from the category products but now what's nice about this category products is we can do it now in fact so we if we come over here we can do an action navigate to product detail and we can pass it and we have the product row don't we we have the category row okay so in this case we have the category row and so we don't have the product row and so if we select that it's not going to work right we need the product row and so instead of doing this query here all the time what we can do is we can instead of passing the product row here we can pass the product ID okay we'll fix that later we'll fix that in a little bit okay right now let me go ahead and and um delete this let's go ahead and test out uh the um the homepage to product detail flow okay okay let's see if that works let's create a new session and see if it works all right here's the app and this is our homepage view we we should be able to click on this and that's going to redirect to product detail click here and there's the product detail G the cheese we need the back button let's go ahead and do that back button product detail and uh let's select the app bar and show the default button so once again it's not being displayed I don't know why it's uh yeah it's going to be white and it's not being displayed I'm sure it's going to work let's go ahead and reload it not sure why it's not being displayed let's go ahead and refresh it all right there's the app click here and we have the back button okay really nice touch I don't know why why it's not being displayed here but if it doesn't if it doesn't if it if it's not being displayed as you're building it try it anyway and it's probably going to be visible here all right come back click here come back so the issue that we are having is from the category products right so here we have a list of category rows right so this is a category row here and unfortunately um you know if we come over here this is a list View and yeah this is actually product so it should work right so we should be able to do it I think I just didn't see it let's go into navigate product details pass product row we should have the product row yeah ah because it's uh it's using the um it's it's using the API okay so that's why it doesn't work remember it's using the API so we're we're stuck with the same problem again okay um if we you know if we were using this uh buil-in back and query we have you know the the data that we need but we're using this API and so in this case what we can do is obviously the same thing we can either pull up each individual product row or we can pass the product ID but because that page is expecting the product rle we're just going to do a product rle and like I said this is this is not as efficient and as you passing the product ID because here you're doing this queries regardless if you're going to need that information so just keep that in mind okay it's okay you know for this kind of proof of concept app that we're building but this is something to keep in mind so what I'm going to do is I'm going to go on the row level and I'm going to do another backend query here uh super base query I'm going to do a products single row and the filter is going to be off an ID equal to in here I'm going to match match the product item yeah product item data structure field ID okay and now we're going to have it okay so now I can come back here product row and I should have the product row okay and there's the product row okay so keep that in mind like I said this is not as efficient but you have options that's that's the key right it's always about having options all right let's go ahead and reload our app and try to access our detail from the other page so we have the homepage and we have the category products which which is the essentially homepage filtered by the category all right so this is this we click over here and we're here and if we click here we go into grains we have the product we click here and we are here again okay so as you can see this works really really nicely okay so that is now done the next thing I want to work on is this flow here now we're getting into the shopping cart which is a whole can of worms which is another subsystem very very important subsystem but this is the key here so let's jump back into our uh designer here UI Builder and let's go ahead and create our shopping cart so this is going to be an app State and I'm going to say shopping cart and we are going to um created now what is what is the shopping cart the shopping cart is not going to be just one item it's going to be two items it's going to be the product and the quantity and so what we need to do is we need to define a product a specific shopping cart type that will have the quantity there so I'm I'm going to come in here and I'm going to say shopping cart item type okay and this is going to have two Fields it's going to have the uh the product name or the product ID in fact it should probably have the product ID okay because that way we can look up all the information about the product you know product name is not enough so I'm going to say or just product name here and uh actually just name it's a shopping cart we know what it is and this is going to be the quantity and the quantity is going to be an integer all right so we have name and quantity right this is the card item type we're going to come back here and we're going to create a list of that and this is going to be shopping cart and we're going to come back here and this is going to be a data type of this shopping cart item type and this is going to be a list and you can also make it persistent if you want fact probably persists is a good idea because if the user closes the app exits the app the app crashes we want things to still be in the shopping cart right unless they remove them uh themselves manually click create and now we have this shopping cart okay so this thing here it's too long this shopping cart so it's it's not displaying it here but this is kind of what it is I can add an item and these are the items here okay and actually here it's name that should be that should be product ID okay so let me go ahead and fix that shopping cart that should be the product ID because with the product ID we can get the whole product which is the name we can't display the image we can't display anything so this should be product ID and I'm just going to say integer okay so quantity product ID and if we come over here we can add it and yeah quantity product ID it's all there all righty let's jump back and let's go ahead and start working well what do we want to work with we want to work with the product detail I'm going to start with the product detail but this flow is going to be everywhere right this thing is going to is is is also going to be affected so I'm going to go to product detail and we're going to think about the flow so how is this flow going to work well it's actually very simple we're going to look up this product ID in the shopping cart and based on what we find if it's not there or if it's there we're going to be displaying this thing so this button is going to be conditional so that means I want to wrap it in a stack and you know right now it's a button if that product is there we need to display a bunch of other things so if you take a look here it's it's a whole other flow right it's kind of this uh three columns and then there are two rows here so it's kind of this Row three columns and and then two more um columns or two more rows actually two more rows here okay and so let's go ahead and do that right now we're going to come back here so this is this is a button here right so this button will be displayed If the product is not there right if it hasn't been added if it has been added what I'm going to do is I'm going to create a row here and then inside the row we're going to do a bunch of other things we're going to do column three columns here and uh this middle column is going to be maximum I'm going to also do a little bit of padding to make it nice okay something like this and let's go ahead and uh not show this um this button for now right cuz we're working on the other things so I'm going to do conditional I'm going to put false and I'm going to deselect it so that way we can see the other scenario okay so now if I come back here in card one unit we have this we have this so let's go ahead and do that first well this should not be maxed well it it kind of should be it kind of is actually this should be maxed okay so we got the wrong thing maxed this should be maxed okay so something like this all right so let's do an image uh image uh icon icon button icon button here let's do an icon button icon button here and let's take a look let's do a little bit of padding on these columns as well I think a five is going to be better let's do padding all right now let's go ahead and fix these up first of all this should be let's do a trash icon for now because obviously this will depend so that's a trash icon and let's remove the come back here clear this uh the Border radius should not it should be less 10 okay so something like this and obviously it should not be this color that's the Border color yeah the Border color is going to be this color and then the icon color is going to be I don't know this color as well yeah it should be well the icon color should be darker right let's go ahead and do that and let's go see what we can find okay so something like this and next let's do the same thing here in fact what I'm going to do is I'm going to I'm going to delete it and I'm going to duplicate this I'm going to put it here that way we can just modify the icon and the icon what is the icon it's a plus button okay and in fact this icon it has a a fill all right so let's give it a fill fill color is going to be this we're going to change the icon color to a little bit darker something like this so that it's visible okay and obviously we can't make these icons as wide as they are uh here okay this is like a like a different type of Icon so this is probably like a button you can use so I'm just going to leave these icons for now we'll see we'll see how they look and now we need to have this working right so this is going to be two rows in card and then the units okay so this is going to be a row and another row okay so two rows and this is going to be a text and another text okay and what do we have this in cart and that should be small body medium body small okay that looks good and this is the number of units right so this needs to be dynamic so it's going to say one unit or two units etc etc that looks good we have this divider this divider we're going to change the color okay and the divider should also have a little bit of padding a I can do indent that's what I'm going to do indent indent perfect okay that looks pretty clean maybe 15 that's kind of like padding okay perfect all right so now the moment has come for us to figure out the logic the way this is going to work and this thing is going to determine whether uh how many items are there right so that's kind of what we need to figure out and so this whole thing this row I'm going to I'm going to give it a name and this row is going to be this uh in shopping cart something like this and this is not in shopping cart not in shopping cart I'm just going to say NC and this is in SC okay so that way we know what's happening okay so we need conditional logic so we need to see if this uh if if the product ID is in the App State right so remember we have this app State shopping cart which is a list of these items and so what we need to do is we need to see we need to get a Boolean if it's there so let's go ahead and see if we can do that so let's come over here and we're going to select our app State shopping cart what we can do is we can say list contains item and then what we want to do is we want to build this item the problem is we can't do that right I don't know why it's not not why it's not allowing me to create this item because we have this item and I don't understand why I can't create it like why it's um uh you know it's disabled because it would have been really nice and so what we're going to do is instead is we're going to create a custom Uh custom function to figure that out for us okay if we can do it you know using this method we can just create a custom function so we're going to say get product get product by ID okay cuz we have the the ID we can look it up get product in in card by ID okay so something like this and it's going to accept it's going to take into two arguments the App State and the product that we're trying to search so this is going to be the um shopping cart and shopping cart obviously is actually is this data type it's a list and it's this shopping uh item card card type and then we have the um the product ID okay so we're going to say this is the product ID and it's integer okay and it's not nullable this is not nullable and we are going to return a Boolean right true or false does it exist or does it not exist and we're going to save this function okay and well we need to return something so I'm just going to say full so that it does not complain okay so now we have this function now we need to write this function right we need to check if it exist okay and so what we can do is we can go to Code Pilot and say check if a product if product uh of which has a product ID exists in the shopping cart um list okay let's see what it comes up with if it's smart enough to kind of figure it out all right then this is what it came up with and and it's actually I think it's correct shopping cart any item item product ID this is correct this is exactly what we need yeah I'm surprised it's able to figure out we're going to say copy function yes and that's it we're done this is a quick one liner and in fact we could have used even a code expression okay this is it this is going to find us right because what it's doing is it's going to return true if there's any product that matches the ID that we're passing or the the ID that we have in the shopping card okay so we're going to say say and now we need to pass the value so this is going to be our app State and the product ID is going to be the uh the product row and that's it so now uh this visibility is is driven by this function here okay so this this visibility if we find a product uh it it's going to display it what we want is we want the opposite so if it doesn't find the product okay and what I'm going to do is I'm I'm going to say confirm so now it's the opposite I'm going to click copy I'm going to come back here and I'm going to do the same thing here and this is the opposite base this this is not the opposite now if it finds it remember it's going to return true if it found it which means that we want to display this other flow okay so this is the first step is which flow which uh which you know widgets which widgets to display later we're actually going to find the quantity of that of this specific product as well okay so now we need to compile the custom function okay that looks let me double check what is the error that we're getting product isn't defined for and it actually is item product is that right let me double check that item is the shopping cart item product isn't defined for the type this shopping cart is this thing here and that should have it right that should have it let me double check shopping cart item type ah it's not it's incorrect this just has the ID okay so what we need to do is we need to remove this uh this just item product ID this shouldn't say product ID okay okay now this let's go ahead and recompile that let's click here okay we've changed the code and let's go ahead and recompile it okay and this should work because it thought that we had another um another Uh custom data type inside of uh shopping cart this data type that's that's fine well let's go ahead and run it let's go ahead and run it and see if it actually displayed and then later we'll add the logic for adding these items to the shopping carts let's go ahead and reload this all right this is our app click here and you see we see the add button because it's not there so that function returned false and that is why we're seeing the button now the best way to test it would be to add it first and see if it changes so I'm going to go back here and I'm going to select the button here first I'm going to disable this and I'm going to show the but and now what I'm going to do is I'm going to add the logic we want the item this this item to be added to the shopping cart and that's easy to do we can do that using built-in open the sub search for app State update App State this app State and we want to add to list and here we can create the data type so I'm going to select this I'm going to put in the fields quantity is going to be one right because we're just we are adding it right and the thing here is we also need to check because if we already have have the product added we need to in we need to increment the quantity right here I'm just going to put one for testing and the product ID is going to I'm going to put here I'm going to select the product ID I just want to see if it works and we need to rebuild the current page because when we rebuilt it uh we might show different widgets okay all right let's go ahead and restart this app and see if it works all right click here and it's saying add so if you click on ADD you see that it changed because now the function returns true because it finds this this product in the shopping card okay so now we need to add more logic we need to add a function that tells us how many of these items I think we can do it using built-in functionality let's do that right now I think FL of flow will save the day in this case so this in card this should show the number of items so if you come over here select App State we select this and here what we can do is we can use filter list items we can filter our app state by this specific item and see how many how many of them are there so I'm going to do filter list items okay and the way the flow is going to work there's only going to be one of those items it's just the quantity is going to be different and here we can create a condition we're going to do a single condition and we're going to select the item in the list we're going to get this data structure field and we're going to say product ID and we're going to say equal to the product ID that we have here okay so if we come over here and what we have here is we have number of items okay so we have number of items here and we can say confirm okay and so that's going to give us the number of items that we have in the shopping cart of that item so if we add it you know we added it it's going to be there so that's going to be one item okay and so this is going to give us the number of items uh in the shopping art for this specific product now the way the flow is going to be set up is we are going to be increasing the quantity okay we're going to be increasing the quantity we are not going to be um you know increasing the number of items right for that specific product but if we run this now it should return one one item because that is that is what's going to match and in fact what we can do is we can copy this and we can do combine we can do something like this and we can paste this and here we can say items right cuz it says like one unit okay so units unit okay and that's going to say one unit okay and let's go ahead and reload our app because uh the function that we really need needs to be more sophisticated we need to take into account the quantity as well and we're going to do just that so let's go ahead and reload the app and now at least it's going to it's going to tell us how many of these items are in the shopping cart it's not going to tell the quantity so it's always going to be zero or one right cuz it's not looking at the quantity but at least it should tell us something okay so if we come over here it says one unit okay so if we add that again if we click here and increase the quantity it's still going to say one unit we need to change the logic okay and in order to to to to do it correctly we need to use a custom function okay so we need to use a custom function and so if we come back here we have this one custom function that looks up this product here and so what we need to do is instead of returning true or false we need to return the number of quantities uh that that that product exists or maybe return zero if it doesn't exist okay but because we already did that check we know that the product exists in the shopping cart we just need to return the number of uh item so what I'm going to do is I'm going to duplicate this function and I'm going to call it something else get product quantity in card by ID okay so something like this and here what we're going to do is we're going to look it up right so here we're going to look it up and what we're going to do is in fact let's go ahead and save it and I'm going to come back here and I'm going to say return the quantity of the product that's matched in the shopping cart okay so something like this let's see if that works at least it should give us the starting point okay fail to generate code in fact we need to change this okay uh this needs to return the uh the number of items product ID okay the quantity of the product that's matched the shopping cart okay okay it's working okay so that's what we have and let's see for item and shopping cart quantity plus okay interesting okay so it's looking in the items in the shopping cart if it finds the product this is wrong again it's basically taking the quantity and add adding it here okay um H let's try again let's try again can we do better okay so it's not it's not giving us let's let's work with this now what's going to happen here is we are returning this quantity we're going through each item that should not be there that should be product ID if product ID matches product ID just return the quantity we don't need to add up the quantity okay just return the quantity M item Quant okay that's what we need to do and here we're going to turn zero okay we don't really need that okay so here what it's doing it's going through all the products if it finds the product just give us the quantity okay otherwise just return zero okay that should work let's go ahead and save it let's go ahead and uh validate it wants us to validate it let's go ahead and validate it okay looks good and now what we can do is we can come over here and instead of using this we can use our Uh custom function get product quantity in card so here we're going to pass the shopping cart and we're going to pass on the product ID and now that takes into account the quantity of the product right because before we're just checking if that product exists even though we might have one of these products or 20 of these quantities of that product okay so now it should still return one because we're still at one but once we get this working we'll be able to increase the quantity okay let's go ahead and uh start a new session all right here's the app click here and it says one unit okay because the quantity is one right but if we have this this working we're able to increase the quantity this is going to say two units okay so let's go ahead and work on that right now this button here needs to look up this specific product and increase its quantity right we want to find that product in the shopping cart right and increases quantity okay so that's what we're going to do we're going to come back here we're going to open this up and we are going to add an action so we can do is we can go into update App State come back here find the shopping cart and what we want to do is we want to update item and index okay so I'm going to do item and index and what is the index well that's the thing we need to find the index of the item that we're trying to to update we we first need to up find it in the shopping cart okay so can we find it in the shopping cart let's take a look so here what we can do is we can filter it and we can see if we can find it but it's going to be tricky it's going to be very very tricky to do it this way and so what we're going to do is we're going to have another custom action and we'll see if we can consolidate them later but the best way of doing it is by creating a custom action so I'm going to do another custom action and this is going to get index of product in a c okay so this is going to give us the index okay and this is going to return an integer we're going to pass the parameters again uh and in fact what we can do is we can change the other function okay we can change the other function because we have one function that um Returns the you know it tells us whether the the the um the product exists in the shopping cart and so what we can do is we can modify the way this function works right so what I'm going to do is I'm going to cancel this thing and so this get product in card by ID right this thing instead of returning a Boolean it can return an index if it exists right so if this exists return the index otherwise return minus one so this is going to give us more information so this function can be used for more purposes okay and so if this is true give us the index right and so what we can do is we can say shopping cart shopping cart index and what we can say is index off index off okay so if it exists we can say index off and here what is what do we want to send well we want to send the element right so here what it's asking us is the element right this this element here and so we can do is we can just pass that item and a much better way of doing it is in fact we just use Code Pilot we can say uh return the index if return the index of the matching product by product ID in the shopping card list okay let's do that let's see if it's smart enough to figure it out cuz it is index off or index where it's the right one and this should not be Boolean this should now be an index let's see if that works hopefully it should okay so now it's still you know it's doing this looping which is correct actually this is correct let's use that but there's there's another function called uh index where index off or index where that you can use but this is enough this is product ID and here it turns I otherwise it's minus one so we can use this function for different scenarios right so I'm going to do save I'm going to compile it and now what's cool about it is we can come back here and we have a couple of Errors because we're not using that function correctly which is fine in fact let's go ahead and delete this for now go ahead and fix the there's um right so this is this is no longer returning a Boolean so this needs to be an a conditional okay so what I'm going to do is I'm going to say uh this is now a condition single condition get product in card this is uh get product and we're going to pass all these things I'm going to pass the product ID and now what I'm going to do is uh if this is equal right it wants a Boolean so if this is not equal to -1 is true if it's equal to minus1 it's false okay so I'm going to say equal minus1 and this is exactly this thing here right if it's equal to minus one it's false and then you want to display not an A C this is this button here okay this is perfect so here I'm going to copy this and I'm going to use this same expression here and I'm going to uh paste this okay now here if it's not equal to minus1 right or if it's greater than minus one it doesn't really matter not equal or greater okay if it's not equal to minus1 that means we found it successfully that means we should show the other flow okay and so now let's go ahead and run it let's just double check it still works okay cuz we have that one item in the shopping cart let's see if this flow works and that way we can combine two different functions right two different features into one and that's going to be a lot better okay so you see it still works right this function still works it says one unit now here we can increase the quantity by looking it up getting the ID and incrementing the quantity here okay so let's come by here let's click here update App State this is the App State and what we want to do is we want to update item and index cuz we want to uh increment its quantity we're going to come here now we need to look it up so we're going to go to custom function get product in card by ID so shopping cart is our shopping cart and product ID is the product ID we're looking it up and and this is going to give us the ID and what do we want to do we want to update the fields and which field do we want to update we want to update quantity and what do we want to do with quantity well we want to increment it by one that's it that's that's the flow we want to rebuild that's it okay so now once we do that it should display the correct uh quantity here okay let's go ahead and do that all right there's the app click here one press this and now it says two now obviously this should say two units and that's an easy fix come back here let's change this this should say uh units okay and so what I'm going to do is I'm going to copy this and here I'm going to make a conditional I'm going to paste this uh what am I missing ah it should be a let's do a condition and so if it's greater than one we want it to be units okay and so this is going to be ah so if it's yeah if it's equal to one just display unit unit otherwise units okay confirm let's go ahead and reload it and that should be dynamically set now all right there we go click here and it says two units we should have a space there but it works let's go ahead and fix that real quick and add another one here space it confirm and let's go ahead and reload it just to make sure all right there we go click here two units okay perfect now when we have two units or anytime we have more than one unit we want to make sure this is no longer uh this it should be minus and we need to create the flow for minus so let's do that real quick this should be a um conditional as well and what I'm going to do is I'm going to wrap it in a stack I'm going to duplicate it and this is is going to be a conditional and I'm going to do a conditional here I'm going to paste this single condition I'm going to say get uh product quantity yeah get product quantity here and we're going to do our up State okay so this is our product and in this case if it's one we want to display that garbage icon trash icon if it's not one which means that it's going to be greater than one we want to display the thing the other thing so if it's one this display this and let's go ahead and say trash icon and this is the plus icon minus icon minus and this is uh set here we're going to copy this going to remove it and we're going to be showing this conditional paste this okay and here it's not equal to one okay which means it's going to be greater than one because this flow only appears this this UI these widgets only appear if there's something there okay so not equal to one we're going to display a different one so this is going to be add maybe okay oh no delete delete should be delete so minus uh remove yes I got it from the second triy okay so this is the minus icon or remove icon let's rename it and we have trash icon and remove icon trash icon and remove icon looks really good and let's go ahead and create the flow okay so we're going to come here in fact the flow is going to be the opposite of this flow so I'm going to come here I'm going to copy this action I'm going to come here and I'm going to paste this action I'm going to open it up I'm going to fix it up this needs to be minus one cuz we are DEC renting the value okay let's go ahead and reload the app all right there we have it click here and let's see there we have it and now it's this okay we added two and it's this works perfectly the only thing that I want to do last thing uh you know concerning this flow is this garbage it needs to remove the whole thing it needs to remove the whole product not just you know decrementing the quantity remove the whole product from the App State so we're going to come here and we're going to go on this trash icon and in fact what I'm going to do is I'm going to disable this enable this so we can see it and what we want to do is we want to remove this whole thing okay and we need to remove it by Index right so we still need that function that function is very useful so we're going to come here and in fact why don't we just copy it it's almost the same thing I'm going to copy this whole thing it's almost the same thing there's just one slight change I'm going to delete this I'm going to paste this and what I'm going to do is instead of updating Fields well instead of um upda item we want to remove from list at index so it's it is different right so this is going to be get product in card by ID this should be get product ID well I guess it's self-explanatory come back here shopping card product ID product ID confirm confirm okay and that should remove it and then that should automatically show the ad button okay let's go ahead and see if that works lots of things lots of things that you got to you know take into account lots of different states depending on you know what's happening right so lots of work for a such a small part of the UI but it adds a lot of value so we're here we can do plus we can do minus if you click here it's add if we click add it adds we can add we can remove looks really nice in fact so that is good to go now the next thing that I want to look at is couple of things well first we have this really interesting um flow here right this kind of little overlay that appears whenever you know the user has something in their shopping cart right so this this obviously it looks like this right if there's nothing in the shopping cart but if you add something to the shopping cart you're going to have this little overlay now it's a little tricky um to do this overlay in flut oflow but I'm going to show you a really really cool way of doing it and after that we can work on the actual menu page and this menu page is actually going to be a a popup right this kind of drawer right it's not going to be a full blown page it's going to be a type of a drawer okay so let's go ahead and build this thing first I can show you a couple of Advanced Techniques to make this work and then we'll go uh and continue building this app okay so now we are here back in flutter flow and the idea here is that this overlay is going to appear on most if not all pages whenever we have something in the shopping cart so that the user can quickly transition to the shopping cart click on view card and go over there that way they can see what's happening so how do we do that well there's a couple of ways of doing it but let me show you a a simple way of doing it okay so what you want to do is you want to create you want to create another widget that's going to be on top of this widget okay that's the idea and how do you do that that you do it with a stack essentially so if we take a look at this column here we have this main column what we want to do is we want to create widgets that are going to be on top of this column and the way that we do it is by wrapping this column in a stack so I'm going to do here I'm going to wrap it in a stack okay so now this column is in a stack which means we can place things on top of it so what I can do is I can come here and I can add a container okay and as you can see this container is now on top let me go ahead and drag it to the top I'm going to make it right here so that we can see it okay so now this container is on top right cuz it's and because it's first uh it's it's you know it's under it right because it's first it's under it right this column is on top of it and so what we want to do is we want to make it the opposite we want it to be something like this then we can collapse the column we just see the container okay so now we have this container that's kind of sitting on top but in this case we want this thing to be on the bottom okay so the easiest way of doing it is by you know using positioning elements right you the the way that you position it and so what we can do is we can create another column okay we're going to wrap this in another column okay and now this column here has this container in the top and so what we can do is we can place something that's going to take up the maximum amount of space and have that thing take up the rest of the space okay so what I'm going to do is I'm going to add another column another container container here and in fact what I can do is I can even add another column guys so if I can add another column like this that's going to take up the Maxum amount of space right so what I can do is I can maximize this column and now this column pushes it down right it pushes it down and now this thing is here okay so now we have this container in the bottom and this container we can obviously increase it we can do it like this or we can come over here and we can set its width I don't know three 50 maybe and height let's say 75 or maybe even less maybe 50 okay and then we can Center it so how can we Center it well let's take a look at this column here uh we can Center it using the column but we can Center it using a row right so we're going to create a row and now if we Center the row this is going to be centered okay so now we have this container appearing um at the bottom okay because it's being pushed by this column here and this column is kind of this Phantom column right there's nothing in this column except it pushes it down okay so we can do that if we don't do that then it's no longer a phantom column just like a regular column but if you do that it pushes it down and we have this thing so let's go ahead and work on this container here and let's make it let's give it a background uh let's give it a background a fill color this one let's give it a uh radius I think 20 is it 20 no it's not 20 it's l 20 let's do the 10 10 or 15 I think I think I think we've been going with 15 so we have 15 let's do a border color of I don't know I think it was like a darker orange maybe something like that I don't know something maybe like this something darker okay so something like this I think it's too dark yeah it's kind of yellowish the color okay so I you know I'm not I'm not I'm not the best with colors I think it's that doesn't look right maybe it does okay that's a little bit too bright let's do maybe something like this okay so something like this and then we can put a bunch of other things so what do we need to put in there well we have this three column layout with the middle column um taking up the the most amount of space so I'm going to do a row and then I'm going to put three columns in there 1 two three and this is going to maximize it okay and what what do we need to put the first one is going to be an icon and obviously we need to make it smaller let's do 50 I think 5050 yeah 50 is even too big let's do 40 and I also want to do padding on this row padding padding is your friend let's do padding let's do a 10 okay all right and then what do we need we need to have uh two rows okay two rows here and then we have a button and what is this going to be this is going to be a button right it's not an icon not an icon button it's just a regular button and I'm going to make its height something like this and it's going to say view card I think it says yeah view card let's make the give it a little bit of Style no padding but I want to give it rounded I always miss these where where are the button radius okay let's give it a 10 maybe even a 15 okay and it's a little bit Yeah there's there's some clipping there okay so what I'm going to do is I'm going to make the container maybe 60 maybe 55 okay and this button does not need this drop shadow so I'm going to remove this elevation okay and now let's give it um let's give this this actually yeah so I'm going to add an icon right we need an icon did we oh we have we already have an icon oh we have a container there this needs to have an icon I don't know why we put have a container this just needs an icon ah because I just selected a container and let's go ahead and search for a card card let's make it bigger and let's make it 40 yeah 40 is too big 35 okay and let's give it uh this should be text I think we have two of them yeah one unit and then estimate Quest text okay so let's go ahead and run it all right so here's our app and there's our overlay okay so we have this view card but we have a couple of overflow issues so we need to fix that this bottom text is Overflow by just two pixels okay so let's go ahead and fix it or we can just make it a little bit bigger so it's 55 we could make it 57 that's going to fix it what why don't we just make it 60 I think 60 would be really really nice let's see how that looks let's go ahead and take a look at this okay it's centered nicely let's Center these columns so everything is nicely centered okay perfect let's go ahead and reload that and see if we still have an overflow all right and now it's this it's perfect there's no more overflow and it's really nice it's really nice it kind of looks like this right well there's a little bit of space here but I think it looks nice we can we can bring it up we can also bring it up we can do a little bit of padding and we can increase the space so we can do that right now let's take a look at what we have so this is our row what we can do is we can do a little bit of padding all right so we can do something like this from the bottom and that's going to bring it up let's see how it looks 10 pixels of padding from the bottom and let's see uh the look and there we have it looks perfect it's it really does look floating right cuz once you have more of these items it's going to look floating all right looks really good let's go ahead and get it to display the right uh text here what do we needed to display one unit and then the the toal price okay so one unit that is the the the number of items it's not the quantity or maybe it is the quantity let me think it it actually I'm going to go without the quantity for now right because I'm not even sure if it's the quantity it could be actually yeah it is the quantity right so it's everything right so if you have two pieces of bread it's not going to be one unit it's going to be two units okay so what we need to do is we need to create another custom function that gets us not the quantity but also the entire right the entire price the the entire um number of um you know the products and the quantity so everything everything together okay so this is not just you know a specific like the quantity of a specific product this is everything together and so we can create a custom function let's go ahead and do that custom function here and we're going to say get total quantity and this is going to respond return an integer number of quantities and it's going to take shopping cart and that's it it's not going to take a product cuz we don't care about a product we're not looking up a product we're going to say we're going to do data type um shopping cart item type and now it's going to take this and it's going to give us a a the the the complete count right so why don't we let's go ahead and just return something so that we can save it and I'm going to go to a Code Pilot and save uh this function should return the complete uh total of all the quantities from all the products invalid prompt I don't know that that a prompt can be invalid how about just like this all right and there we have it looks good this is it total quantity for item in shopping cart items total quantity this is it this is correct right because it's going through every single product and it's just summing up all the quantities right this is absolutely correct so we're going to copy this function and this is it so we have shoing card items and item quantity right so it says value of double can be assigned to a variable of type in so let's take a look here this quantity um is it a double it should not be a double let me take a look uh shopping cart items so if you come over here quantity is integer yeah it's fine I don't understand let me go ahead and see what's happening quantity is integer the value of double shopping cart items is that correct let me go ahead and see shopping cart shopping cart um yeah this is not right this is in shopping cart item in shopping cart I I'm not I did not pass a list should be passing a list there we have it my mistake you got to make sure you get your parameters right so our item in shopping cart item quantity okay this should work okay so this is going to return the total quantity right so if you have one you know just a bread but 10 pieces of bread that's going to give you 10 okay total quantity and we come back here and now let's take a look one unit so now it should say X units right it should say uh get total quantity okay so now we're going to pass this app State shopping card and that's going to give us the number of items right no formatting we don't really need to format it and that's going to give us the number of items so and obviously what we can do is we can copy it and we can also do combine combine text we can paste it and here we're going to do a space and here we're going to do um n items and I'm just going to keep it simple I'm just going to say items is it is it what's the word is it items units units I'm just going to do units okay just keep it simple and I think it was capitalize that thing all right and that's it so that's going to display the total quantity now we also need to display estimated cost and the cost is going to be um it's going to be the price multiplied by the quantity and so we can do is we can create another Uh custom function and obviously you know if you have a lot of these you can you can uh get them together so what I'm going to do is I'm going to duplicate this and I'm going to say get total cost and this is going to return a double now we're going to return the double and this is going to be total cost and in fact let's go doing a pilot uh Code Pilot uh return the total cost of all products times the quantity okay let's go ahead and maybe it'll save us some time it's been working really well so far so let's keep using it and it is it's exactly what we wanted this is it okay so now it total cost is zero initialize total cost item price this is incorrect uh it's going to be item ah we don't have we don't have the um we do not have the price we only have the product ID so we unfortunately do not have the price and so what do we do in this case well what I recommend us to do is we change it we change it so that we storing the price as well cuz that way we don't need to look it up because the idea was we have the product ID we can look it up and we have we can have all the stuff and it's going to be tricky cuz now we need to look it up we need to send it to this function it's going to be easier if we just store it and really we should be storing it right come to think of it you know it's it's obvious that we need to store it so we're going to come here data types and what we can do is we're going to come here and we're going to add a price product price in fact just call it price this is going to be a double yeah that's fine quantity product ID that's that's the only thing so in fact what I'm going to do is I'm going to rearrange it product price and the Quant and now when we save it we're going to be saving price and we're going to have that available so now check this out we're going to come here and what we can do is now we have this right this item here it has the price so we're not getting an error anymore right because we're saving but we still need to save it correctly so we have the price we have the quantity and we have the product name okay so this is going to give us the total cost but we still need to save uh product price correctly so let's go ahead and do that so where are we Saving right where are we saving we're already now we're saving here when the user presses add we're saving it so we're going to open this up this G anytime we're creating we need to add another field this is going to be the price price and I think that's the only place we're saving it uh which should be fine so we can delete it re add it and then it's going to be displayed correctly okay so let's come back here go to the homepage and let's go ahead and make sure that it's being displayed combined text estimated cost add text and this is going to be this get total cost pass this app State confirm confirm and looks good estimated cost let's go ahead and format it as a okay as a currency display this okay confirm confirm okay all right looks good and later on this is going to redirect with the actual shopping card okay let's go ahead and test this out all right there we have it so estimated cost is zero uh because of the the price right it's multiplying it by by zero basically so we're going to come here we're going to come here and what I'm going to do is I'm going to do deleted okay and we still have a lot of units interesting that we still have a lot of units okay so why is this five units when it seems like interesting okay let's come back here is this calculating it correctly get total quantity shopping cart item quantity okay all right so let's go ahead and let's try this let's go ahead and try to add some items and see if uh if that gets the price going so I'm going to come here and I'm going to add this okay so now it should have added the price as well and now you see the prices being displayed I don't know we need to fix this units I think there's some issue with the units get total quantity uh item in shopping cart total quantity adds item quantity uh let's you know when I have these issues what I like to do is I want to display the the number of items in the shopping cart I just want to see what's happening okay and so we don't have a shopping cart a page and so what I'm going to do here is I'm going to add a I'm going to put it up on stop what I'm going to do is I'm going to wrap this in a row and I'm going to add another text and here I'm just going to add the number of items so I'm just going to select up State and I'm going to say number of items just to see what's happening okay and let's go ahead and reload this and see how many items we have in our shopping cart okay so we have two items in the shopping cart why do we have two items if I delete this we have one item and it says here five units so we have one item with five units but it's not clear what the item is okay so what going to do is I'm going to go ahead and reinitialize the items right so I'm going to do a what I'm going to do is on this on the homepage I'm just going to have an action I'm just going to clear everything right cuz we have persisted state which is why that could be an issue and in fact why don't we why don't we do this why don't we delete our persistent State come back here shopping cart let's click here and let's make it not persistent okay and let's see if it clears up cuz we have something that's not being um accounted for it's not it's not it's not kind of it's not linking incorrect let's see what happens here all right so now it's zero units okay so it cleared up right it's no longer persisted and now let's go ahead and add an item okay we added we have one item one unit 3.3 okay so now let's add let's add another one we have two units 6.6 exactly so let's add bread we should have three units 9.5 yeah sounds about right it was like 6 point something this is another three bucks we can add another bread two units looks good the the the only thing I want to do is I want to make sure this is uh correctly format it and so it it's to two decimal places so we're going to come here and let's see if we can format it to two decimal places let's see if that works go ahead and reload this all right so 0 0 if we come over here we added 330 okay perfect okay um 290 620 okay looks good 109 729 okay so it's perfectly being formatted we just need to format it here which I'm going to do but this looks really nice it's a really nice effect and we also need to make sure that this is only displayed if there's something in the shopping cart okay we need to make sure cuz otherwise it's it's displayed all the time it should not be the case but right now let me go ahead and fix this real quick let me go ahead and fix uh these things so it's a little hard to select it right because we have this column here and so what you can do is uh because this is the column it's on top you can't really select it what you can do is you can disable the second column okay with this whole thing while you're working on the other one so you can well it's going to be conditional anyway but right now I'm just going to make it false okay that way I can select everything that I need to select okay and I can this I can remove it from the UI Builder okay so I can click over here and what I want to do is I want to make sure that that last is zero digit is zero now we're good to go and we can reenable it and now let's go ahead and set a condition for it so this column this is our overlay right this is that shopping card overlay I'm just going to call it cart overlay okay this is our cart overlay and it's only going to be the displayed if there's something in the shopping cart so I'm going to go in here shopping cart and I'm going to say well I need a condition single condition and I'm going to do number of items and I'm going to say greater than zero so if it's greater than zero this is going to be displayed otherwise it's not going to be displayed then we're going to you know you know we're not going to see it that's it it's it's one of those things that either it's it's going to be displayed or it's not going to be displayed but we still have this other thing right um all right so let's go ahead and try this out let's see how it works all right there we have it so it's still being dis played that should not be displayed this card overlay number of items is greater than zero it should not be displayed interesting okay let's try this with a false and see if it's still there all right there we have it so right now it's not being displayed okay so if we have this it's not being displayed okay so we need to make sure that we have it set up correctly okay so let's try that again our shopping cart let's create condition condition single condition or actually What's Happening Here is there's still something in the shopping cart you see there's still shopping in the in the shopping cart so do we have something ah we may have something initializing this yes we have this thing initializing this needs to be deleted and now everything is going to be correct so now if we come back we click here that should not work okay because we had that one item in the shopping cart that was screwing everything up that was being initialized when the app started so let's create the condition single condition here App State we're going to say number of items and we're going to say only show up if it's greater than zero okay confirm and now it should not show up because our shopping cart is empty all right as you can see it's not showing up but if he add something come back it's here how cool is that if we delete something we delete come back it's not here and remember this thing is going to be showing up across the pages once once we're done with it right and so you're going to see this automatic right so if you add something it shows up how cool is that really really nice effect really clean very beautiful you can use it in all kinds of apps I really really like this effect so we're going to keep it and the next thing that we're going to be working on is the actual uh shopping cart page and all the logic that goes into it all right so the next thing that I want to work on is this shopping cart okay and this is obviously important because that way the user can see the shopping cart and this is also going to be useful uh to us because we'll see exactly what's going on so it's going to be good for debugging as well and so the idea here is they're seeing this overlay here and they're going to click on view card and they're going to have this thing pop up right and like I said before this is not going to be like a separate page this is going to be a pop up so it's going to be one of those things that that pops up from the bottom like a drawer uh or I don't know what flut oflow calls it but it's it's kind of this popup all right so let's go ahead and do that let's jump back into the app and in order to have this popup working it needs to be configured as a component okay and that way once we have the component we can have this pop up and it's going to work like this right so we're going to have an action here and if we type show it's going to be a bottom sheet okay that's what I was looking for a bottom sheet so we're going to delete that we're going to get out and I'm going to delete this so we don't have any errors for now all right so I'm going to click here and I'm going to create a new component I'm going to do blank and this is going to be I'm going to prefix it with c and I'm going to say shopping card and I'm going to say component okay so this is our component right here and how you know what does it what is it going to have well it's going to have you know a couple of some text here one line one row one row and then it's going to have a list and on this list we're going to have our familiar design and we're going to have either this setup here or this setup depending on if there's one unit quantity is is one or quantity is more than one okay so let's go ahead and start building and let's start with the list first and then we'll do these uh these headers later okay so I'm going to come in here and I'm going going to create a column that way we can fit everything and I'm going to put a list inside okay so we have a list now we're going to start off with a row and then we're going to do three columns I believe it's three let me double check one two and three yeah and then there's going to be a lot of other things but the main is this row and three columns okay let's jump back here and let's take a look so we're going to have well this middle column is going to be full right it's going to be this greedy column and then let's go ahead and do the padding always a good idea let's start off with 10 here is going to be an image and that's way too big so we're going to say 50 I think 50 is going to be way too big oh 50 looks good and here we are going to have three one uh two rows two rows of text name of the product and the price so here is uh it's going to be two rows and it's going to be a text text here and what I want to do is I want this columns to be centered centered is nice so something like this okay so all the stuff is going to be nicely centered and now is the last part right so this is going to be this column here two rows the number of units and then two icons okay so let's do that Row one row two this is going to be the number of units and this is going to be two icons and the icons are going to look exactly like they looked before so um I'm going to do this it's going to be an icon button and let's go ahead and fix it up let's make it um I think that's too big probably let's make it 30 uh actually maybe this is fine all right let's let's keep it like this for now and let's try the first scenario right so this is this garbage can icon and this and in fact let's go ahead and copy it from the other page uh this one let's go ahead and copy it I'm just going to select it right click copy go back here and and paste it okay perfect and what we can do is we can delete this one and just duplicate it and just sh change around and let's do a little bit of padding to the right all right so in this first uh flow this first stage it's going to be a trash icon or it's going to be minus so this flow is a lot simpler than the other flow and this is going to be plus so this is going to be plus plus perfect and this thing is going to say number of items number of units all right so number of units so this is going to be the quantity all right so let's let's go ahead and feed it with data list is going to be this uh generating children from a variable App State shopping cart and this is going to be our cart item and we don't have any images we do have the other things right so this is going to be card item data structure field we have the product ID but we don't have the product name huh we have the product ID so we can look up we can look up the item um if we don't have the uh you know if you have the product ID we can look it up but you know it's going to be easier just having the name there so let me go ahead and get this fixed I'm going to add a name to this uh yeah we don't have a name so I'm just going to put product name that way it's just going to be easier and we'll have the ID anyway okay so product ID name price quantity okay all right and so now I can have the name but unfortunately we we're not saving the name yet so we need to modify a couple of things so name this is going to be the price this is going to be the price and quantity is going to be here so I'm not really formatting anything just yet and quantity is going to be here and and then we need the logic for these things and this needs to be conditional but before we do that we want to make sure that when we save these items into our shopping cart that we are actually saving the name cuz we're not doing that right now so in this product detail I think it's this add button right so this add button this yeah this this is this is icon button it's going to be this this button right so this button here it creates the item but it's not adding the name and now it will so I'm going to say product row okay so now we have everything okay so now we have name as well and that means it will get displayed let's take a look at this okay so these are the icons and we need to work on these um a couple of errors here let's take a look at this one this is the trash icon and it's not being P the product ID but we have it right here there it is's go ahead and work these one by one product ID all right right so we have this product ID and now we have Boolean property this is um this is is it the conditional that's the issue yeah it's the conditional and then another conditional so I'm going to uh disable it for now we'll fix that custom actions okay custom functions need to be refixed need to be recompiled that's doing it right now all right so that is what we have and let's go ahead and get the conditionals working again so for conditionals this thing is going to be conditional BAS based on the fact that um if it's the only one right if it if the quantity right so we're going to get actually if we come back here we can see how we had it here right so here get product quantity by ID right that's exactly the same flow it's it's the quantity so I'm going to copy this and I'm going to jump back to the shopping cart and I'm going to put that in here this thing here and it's obviously missing the product ID second value is one so if this is equal to one then this will get this is just one Quant right this this is going to be displayed here okay otherwise what we can do is we can put these in a stack there's the stack and we can put that there and we can duplicate it and so this is the trash icon this is going to be the minus icon I'm going to put um minus is it forgot what it was less okay there we have it okay so now it's removed and this is going to be different so this is not equal to right not equals to one which means it's greater than one and because it's on the shopping cart so it needs to be one or greater than one and that way the other icon is going to show up and now we have it right we have the whole thing the only thing I like to do is I want to make sure well I want to make sure that the background is white and we're going to do that when we pop it when we list it so let's go back to our um homepage and let's get this view link to it so this is going to we're going to open it here add an action this is show bottom sheet bottom sheet show select component shopping card and here we can set a background color I'm just just going to do white that's pretty much it we're not passing anything because it's App State and we can start a new session and see how it looks all right here's the we still have that number of items in the shopping cart there we need to remove that but at least we know now so if we come over here we add this come back we have one item and we have this thing being uh showing up and so if you view card there's the shopping cart okay there's the shopping cart well it works it works but I just don't want it to show up and take up the whole screen right I want it to look a little bit nicer and we can do that by you know this by um creating a height all right so we can do a height so maybe we want to do I don't know 80% something like that let's go ahead and reload that see how that looks all right this is what we have and let's go ahead and add add something here view card okay that looks a little bit better that's 80% looks good to me it's kind of similar right so this is more like 90% okay so uh we can change that l but it looks good there's still a lot of things we need to fix up we need to do a little bit of padding we need inner padding uh we need to say one unit Etc and we need all of this so let's go ahead and fix it up a little bit but the logic seems to work we just need to add these things the logic for these things and we already have the logic we just need to copy it so let's come in here and let's do a little bit of padding so we have the padding on the row level we don't have the padding on the column level that's also a good idea probably five is going to 10 is going to be too too much when in doubt do some padding that's what I like to say do that right there and this is going to be this is uh what is this going to say one unit so I'm just going to I'm just going to do I'm going to copy this I'm going to do combine and I'm going to paste this and I'm going to say something like this and I'm going to do maybe some padding to the bottom five okay so just space it out a little bit and now we need card delivery uh couple of things so like card let's go ahead and add a text put it up on top and let's let's wrap it in a row and let's do padding on the column do we have padding there okay yeah this is going to look better and let's do padding on the row okay perfect starting to look better this needs to be tial large and this is going to say is that right yeah cart and we also need estimated cost and check out okay so we're going to add we're going to duplicate a row and we're going to move it to the bottom okay okay so this is going to be a normal row and the text is the text is going to be normal not like a title so this is going to be body medium and it's going to say estimated is that right estimated cost going to say estimated cost and then the price so what's cool about it is that this is the maximum or no this is actually two texts inside of a row but there's a line um you know to you know so that they are kind of opposite opposite of each other right you can say so what I'm going to do is I'm going to add another one and then under the roll level you can do this and that makes it perfect so this is going to be the total here and we have a custom function that does that gets the value get total cost we're going to pass our app State and we're going to do the formatting do as currency and I keep looking it up maybe one day I'll memorize it so it's like yeah something like that there we go put zero in here confirm okay so this is estimated cost here and this needs to be to the bottom and so what I'm going to do is I'm going to put uh this I'm going to put this first and then I'm going to collapse it and I'm going to put what is this this row this text is the card I'm going to put this okay and then this becomes uh at the bottom all right so now if you open it up something like this this is kind of what we see starting to come together card there's a lot of padding do we want that much padding I don't think we want this list view this is it the list view that has the padding Ro that has the padding all right whatever this looks good actually you know what I'm going to make it 10 yeah this is fine all righty okay let's go ahead and refresh our app and see how it looks all right that's what we have and let's go ahead and add a couple of things view card okay so there we have it yeah we can change the text this needs to be formatted and then we just need the logic here so let's actually you see this is all the way at the bottom and we have the bottom so all of this is space so we need to make sure that this is taking up as much space as possible so that this takes as less space as possible okay so this is important and that's what I'm going to do right now so let's go back back uh what are the the minor things is this this I think the price we want it to be formatted we yes we wanted to be custom format and let's go ahead and copy that paste it in there this is zero okay so that is formatted and now what I want to do is I want this thing to take the maximum space okay this expanded and so in that column it's going to take the maximum space and this is going to take the minimum space automatically this this other row this row here this this thing it should take the minimum space okay let's go ahead and reload our app and see how it looks all right there's the app let's add an item there it is View and there it is and we need the button okay so as you can see this takes the maximum B basically it takes as much as possible so that this is not clipping all right so this is not clipping there's no overflow here and that's pretty much it right let's go ahead and fix it up a little bit this needs a divider so what I'm going to do is I'm going to add a divider here or a separator I forget what it's called divider so this is the divider right right here and what I'm going to do is I'm going to rearrange it a little bit I'm going to put that below and now we have the divider except it has this white color and I'm just going to make it like and I'm going to add a button so I'm going to go to this row and we're going to add a big big button let's go ahead and give it a width of 350 and you can even give it like maybe 90% that's about that looks really nice formatt it oh it's just Green Well makes sense it's a checkup remove elevation and make it green M maybe not yeah whatever let's just stick to these colors okay just to keep things simple and what else okay and then let's just say check out okay the color schemes you guys can figure out on your on your own right it's just going to take too much time extra time apart from the the basic stuff because the color scheme is is very easy right there are lots and lots of websites you can just decide on what kind of colors you want you're going to have a list of colors that you can use for your buttons for your text for all of these accented colors etc etc so all of that is very simple all right looks good looks really good let's go ahead and reload it and see how it looks all right let's click here let's add come back here and looks beautiful looks great really nice really nice flow we can kind of fix up the text and the last thing I want to do is I want to have these uh these logic flows working and I believe when we copied it we should have them we do have them so this thing removes it this is a what is this this is the trash icon is it this is a remove icon so I'm going to say remove icon that I can differentiate between them this is a remove icon and let's take a look at the logic flows we have that one remove from list at Index right so this is well this removes the whole thing so this should be for the garbage right cuz they they're copies of each other right so if you come over here it's removed from listed index right whereas uh the remove icon needs to not remove but update item at index because we need to um we need to decrement the quantity right so I'm going to take this here I'm going to copy it cuz we're going to reuse it and I'm going to say update item at index I'm going to come back here and paste it okay and then what I'm going to do is I'm going to update fields and the only field that we need to update is quantity and what we need to do is decrement which is uh what happens when you put minus something it's going to decrement it and that's it so once it decrements it it's going to so if it's a minus if you press that minus it's going to become a trash icon and if you press the trash icon it's going to remove uh it's going to remove the whole item right whereas the plus here so this is removed which is not correct it should um it should uh increment the value right it should increment the value and we can do that very easily copy this uh update item at index paste this and we need to update fields and the field we need is quantity and we need to increment it by one done done okay let's go ahead and reload our app and see how it looks all right there we have it come back here and come back here we have this nice overlay click here and we have this so this yeah so this is garbage ion if you click here we have two units and now the estimated cost is 660 because 330 * 2 is 660 990 660 and this is going to delete it estimated cost is zero there's a couple of formatting issues that I need to fix like right here on the detail I want to fix it just things that I see right away right so this should be zero display as currency and then I believe there's also somewhere let me take a look this thing needs to be formatted so I'm going to take this and it's not as currency okay okay and that way it's going to have the the right currency there and looks good all right look at that it it goes up we can also click out and we have this so we can come back here add bread come back here yeah okay so yeah we fixed that we just didn't update it come back here and we see two items so I can increase it now we have 34 bucks I can decrease it it's gone so now it's 330 * 6 which is is if my math is correct is 1980 we can decrease it and we can get out or we can do check out okay so that's seems to be working just fine all right so the app is coming along pretty nicely okay so we have this we still need to fix this thing here but we have the basic flow down at least most of it right so we can add an item it's going to appear here right so we know that this this this thing is in the card and if we come back it is here now we can click here and it is also here we can delete it there's nothing there and now we don't have this overlay thing and so a couple of things that I want to do uh first I want to remove this next I want to make sure that that uh card overlay is being displayed across all pages right at least you know the pages that they're browsing on so like categories uh a bunch of these other Pages for now and also we need to make sure that we have this uh this flow because right now it's only from the detail page okay and so we need to make sure that we have that set up everywhere okay so let's go ahead and jump back into our app first I want to delete this this is like a debug thing so we're going to delete this next let's go ahead and have this really nice overlay overlay you know across the app so in all kinds of different uh places on all kinds of different pages and it's really easy to set it up right essentially we need to wrap the the existing column in a stack and that's it and then we just create this other overlay automatically and it should automatically work right it's going to have this uh it's based on the App State app state is available throughout the app and so that's going to work really really nicely okay and so let's go ahead and do that right now I'm going to go ahead and copy it and I'm going to go into our categories okay so I'm going to wrap this in a stack okay and then what I'm going to do is I'm going to come in here in fact going to click here and I'm going to paste it okay and so let's see if it's there and there's the cart overlay okay really clean everything works at least everything should work and let's go ahead and test it maybe we miss something but it it should automatically work that's that's the beauty of uh flutter right makes things really really easy to kind of develop and work with Okay so let's see what's happening so we come over here we add it we see it here and we come we see it here beautiful I am I don't know about you guys but I'm really proud of these uh of this overlay really it really uh Works nicely and looks nicely and let's do that uh for the product detail as well I mean it's really up to you if you want to do it but yeah yeah why not so we're going to wrap this in a stack and I'm going to go ahead and I'm going to right click here and I'm going to paste it we're going to collap this collapse this and we have this overlay okay and so that's it easy peasy right and now you have this really nice overlay in fact I can't even think of a better kind of flow right I mean you can display the shopping cart information in the header right somewhere here but this is so much nicer and so much cleaner all right let's go ahead and see what's happening right now if everything is being displayed correctly all right there's the app coming here at it and it's here and it's here okay so I don't know we'll see we'll see if if we want it here we want it here uh this displays everything right so this right so if I add that so if I come in here and I add it this displays two units right this displays the overall uh shopping card whereas this displays the this specific product so I think both are nice right cuz this displays everything so I'm going to keep this I really really like this and if we come over here it's here we can click here and we see the whole shopping cart here right we can delete it and now it is gone okay so that works really nicely the next thing that I want to do is I want to fix these um add to card flow right CU it only works here so let's go ahead and do that now come jump into product detail and if we jump down we basically so where we have this thing here right expanded we're going to have this button here right so this button this one of these buttons uh there's a stack let me take a look in this ah not in shopping cart yeah so this thing here this is this button here not in shopping cart right and what we need to do is we essentially need to get this whole thing right we're going to copy it and we are going to implement it everywhere right so we're going to do it on the on the homepage here this add one unit let's go ahead and collapse that expand that and we have this button right so if we come over here paste it paste this button here and let's see what happens so it's creating the shopping and it needs the product ID we don't have the product ID we have the product ID uh let me take a look ah okay we need the price and we should have the price here's the price we need the product name and there's the product me take a look at this product name we have products row name okay okay so there we have have it so that changed it that fixed it and um where else do we need to do it we also need to do it let me take a look so we we just did it here we also need to do it here on the category view so if we jump into category products this is uh this is where we also need to do it and in fact we can also display the shopping cart overlay as well we'll do that in a second I'm just going to paste this let's go ahead and fix it up product ID there's the product K price uh price product name name that's it okay so that's going to add it to the shopping cart and also let's go ahead and display the uh the overlay okay so I'm going to wrap this uh wrap this in a stack I'm going to collapse this and I'm going to paste this we don't have it I think we must have um you know we we no longer have that in our clipboard so let's jump back here let's collab this and let's uh right click it copy it product detail and not product detail category okay so now if we come over here and we paste it it's there okay so sometimes you lose it you lose it uh from the from the clipboard okay so now we have this overlay uh we also have the actions for all the buttons let's go ahead and create the new sessions and just quickly uh test everything out to make sure that everything is working as expected all right so here's our app and now um all of these should work right so if you take a look we add it there it is we can come over here we can add another item this is automatically updated very nice and now if we jump into categories come to grains we can add it here okay now we can take a look at the shopping cart and we have three of these gura cheeses and one bread right we can delete it everything is updating automatically I mean it looks really nice really really clean okay so at this point everything that we've done so far all the functionality it's working flawlessly all right so the next thing that I want to work on is this profile page this kind of user account page if you will right so we have the name we have some delivery maybe information then we have a bunch of these other things and so let's go ahead and try to create this page here because this is an important page as you can see it's one of the tab items here okay so we're going to jump in back into our Builder and we're going to create create this page and so for account page you can click on settings and you can see various setting pages that we can kind of start off with and so there's a lot of interesting ones here and so my suggestion is we kind of start from one of these pages and kind of go from there okay so let's see which one do we like best um how about this one right here there's a lot of things happening here let's go ahead and do this right here I'm just going to do profile all right so now we have this profile page in and because we have a profile page means that we also need a login page right we need to um do authentication and so first let's go ahead and add it to our nav we want it to be shown on the nav bar and we're going to do account what's the account I think this is nice if I'm not yeah perfect so now we have the account page but we can't really display the user cuz we don't have the authentication so this is a good time as any to configure or right so we're going to be doing or we're going to do super base or and we need an initial page so we have the logged in page which is going to be the homepage but we need a login page so I'm going to go ahead and add another page and I'm going to go into or there's a lot of good Pages here that you can use there's really no reason to create your own okay so how about this one right here I'm going to do um this one here and I'm going to say log all right so here's our page we have a bunch of Errors cuz we're using other things so I'm just going to delete all the social logins so that we just have a regular old uh username kind of login let's go ahead and delete this let me go ahead this wrap that's what I want let's go ahead and do that and looks good okay so what do we have here or entry page so we're going to do our login here and now we have authentication so now when the user logs in the app is going to know who the user is okay so if we go into this profile we can replace this with authentication authenticated user user we have email user ID so we want name here right so if we go into our database and we go into this user info we have user ID we have username here right so these are the extra fields and so what this means is that we can use it um on you know to display you know some information about the user right so what I'm going to do here what I like to do is I'm going to look up extra user information from this authenticated user so we can display maybe their image uh their Avatar their name etc etc so I'm going to come here and I'm going to do an I'm going to a backend query I'm going to do super base query and I'm going to do user info this is going to be single row and we're going to do a filter ID and equals to the um authenticated user user ID okay so it's not letting us doing it because the ID is uh is an integer right so we need to do it by user ID right so if we come over here now we'll be able to do it okay so now we can just do it on the user ID here and then we can get it cuz this user ID this is what we were we're trying to match on this connects us to the actual authenticated users table and all the good stuff all right so now we can just do this and now we have access to all that other information using this user info row so I'm going to put username here and I'm just going to put something I like to put the word the the letter e which means empty if it's a if it's a null value that way you can tell it's empty this is going to be email so for email I think it's actually we have it here and for the image let's go ahead and add an image here and let's do image and this is going to be that's it okay and now let's go ahead and refresh our uh database go to super base get schema so we have access to it and now I have access to this image which means that we can use it okay so now we have the image username email we have all of these things and looks good it looks really really good let me take a look do we have log out no we don't have a log out right I want I want a log out and maybe the ab bar I want the color to be our standard color right and this text I want it to be white secondary background and I want this to be white cuz that's kind of how how the rest of our app works right so this is and maybe make it a little bit bigger okay something or maybe 20 I don't know yeah something like this okay so we have the profile one thing I want to add is a log out and we don't have that so what I'm going to do is I'm going to add a button that's going to do log out all right so this button is all the way at the bottom here and we're going to wrap it uh we're going to wrap it in a row we're going to Center the row okay and we are going to be uh doing the log out but before that I want to make sure that this is scrollable right so that we can actually get to the button let's do a little bit of padding all right and this button is going to be just log out that way we can test it with multiple users etc etc and I'm going to come in here and I'm going to search for okay what do we have here custom functions okay let's go ahead and recheck our custom functions but we haven't changed them so they should be good to go go and see what's up here all right so here's our logout button okay looks good now there's a lot of options here and um we'll see if we're going to change that a little bit later but right now this is good this is good uh for testing out but in order to test it out we need to make sure that we have a field here so let's say I log in as Rob okay that's the user I was testing with so I'm going to find Rob here and I'm going to create some data okay o users and there's no there's nobody in O users right cuz this is a new project in fact I'm going to go into authentication and I'm going to add a user create a new user and I'm going to say Rob at rob.com create the password aut confirm the user we don't need to save it and we've successfully created Rob and so now you can head back here user info create insert and now you can match it to this R okay and this username is like Rob I don't know 2,000 phone number is800 8005551212 like they have in those American movies 555 you know so it's like a fake number and then we have the image let's go ahead and find a profile image we can use this site called random user. me and let's go ahead and get this guy right these are all fake profile pictures I'm just going to get the URL come back here and we can just paste that okay it's save and now we have a Rec for that other table that extra table there okay so now if we come back here and we run the app we should be able to log in as Rob and we should be able to see all of this well well this part build in let's go ahead and test this out let's go ahead and run our app all right here's our app let's go ahead and log in and we are logged in okay so it's loading all the products come back here and we see the information right so we can also log out if we want but the key here is that we're seeing this uh extra auxiliary uh user info okay and so at this point it looks really clean right we can add stuff we can add we can take a look at the shopping cart uh we have these items there all right take a look adding rease the unit all right come back here add this bread five units one bread four cheeses looks really really clean and we still need to kind of fix up the UI but I'll do that later just to make it nicer we'll see we'll see how far we can take it but I'm going to leave that for we can also search right so I can type cheese and we're just seeing cheese and now we're seeing the rest of it okay it looks really really clean I really really like that well guys I sincerely hope you're enjoying this tutorial and getting some new knowledge maybe you've learned a couple of new techniques a couple of new methods and perhaps you've even had a couple of aha moments maybe you saw something a different way or maybe even solved an issue that you're dealing with right now but remember this video is just the beginning if you want to start your journey you really really want to pick up on things then you definitely need to join our amazing patreon Community because inside the community you're going to be getting tons and tons more value than what's out there currently on my YouTube channel you're going to get a ton more value you're going to be part of an amazing Community you're going to have access to all the apps that I publ on this channel which means you can interact with other members ask questions view the app and even clone the app plus you're going to get a ton of other extra content and additionally I would also urge you guys to check out my trainings specifically mastering flf flow and mastering super base when you join the training you're going to get access to amazing amazing material that works you essentially step by step module by module uh teaching you the things that you need to know without you know confusing you with the things that you do not need to know and plus as part of the training you're going to get access to our amazing private Discord Community where other community members as well as myself will be more than happy to help you out with any issue and solve any potential problems that you may have as part of building your dream app so definitely check out out our amazing patreon Community or better yet Join one of our training mastering flut oflow and mastering super base and remember as part of this complex video tutorial I'm offering a discount that's going to be valid for the next 24 hours and so if you guys are interested in kind of taking your no code knowledge to the next step your you want to you know improve your no code game then definitely take advantage of this amazing opportunity join our amazing patreon community and check out our trainings and become a member and so if that sounds like a plan hopefully I will see you inside of our patreon community or inside of our amazing Discord Community where you're going to get a ton a ton more value to help you along the no code Journey all right so the next thing that I want to focus on is the actual order process the order flow uh I want to look and what happens when the user looks at the card and they click on check out and so the idea here and this is kind of what we have is we have this page right here they're going to see their items they're going to click on checkout and I want to show them a confirmation page and this is going to be a page that's simply going to list all the items without really giving them the option to change right so this is a confirmation page right so on this card page they can kind of mess with the things but on the confirmation page they're just going to see a list and if they're happy they're going to click on purchase okay and then they are going to uh enter their uh payment information their credit card information and you know we're going to process uh their uh payment card their payment information and the order is going to we're going to create a new status for the order is going to be like new order so like a new status and then we're going to provision or fulfill that order okay so let's J J back into flutter flow and let's go ahead and create another page that will serve as the confirmation page okay so this is going to be very easy because if we take a look at our shopping cart we pretty much have this page okay so we're going to take all of this here and change it around okay so this is going to be a brand new page and I'm going to say create blank and I'm going to say confirmation okay create this confirmation and we're going to say order confirmation okay okay and here we can just take this list view we can just copy it here click here and paste it here okay okay so that's kind of what we have and we're not going to give them the ability uh to change anything right so they won't be able to add cuz this is not a shopping cart anymore okay so we're going to delete all this delete this delete this what do we have here we have a bunch of the oh we have a stack here we don't need it we have a row just going to list the units right so it's kind of like a shopping cart page but without the ability to mess with it okay so we're going to list all these things and it looks like it's pretty much ready to go right cuz we can come over here so this is just using it off shopping cart which is App State and let me go ahead then take a look let's do a little bit of padding M yeah I like to do a little bit of padding here so it's not and that looks good let's also get it like a white background I think that looks better okay so something like this and and that's it now the the other thing we need to do is we need a button okay so I'm going to come in here uh well actually we need we need the button but we also need this thing here right this this thing here right let's take a look so this divider so basically everything right this divide this row and a button and in fact what we can do is we can copy it I'm going to add the divider myself and we're going to add a divider here okay so this is a list to that's inside a column okay and so what we can do so if you take a look at this page here the way it's set up is we have a column but the list VI has this expansion okay and that allows it to take up the maximum amount of space while giving this thing so while giving space to whatever whatever whatever is left right so if you have this it's going to take up the maximum amount of space so we're going to jump here we're going to do this on list in fact we already have that and that means that we can add other things right so in this column we can add add we can simply come in here and paste it places it in here and we can also do a divider and we're going to move the divider up this divider is here in fact we can move this down okay and where's the divider and there's the divider okay the divider is white let's make the divider something like this and we can also give it a little bit of padding right indent something like this and we have this estimated cost now we also want this we want that checkout button right so I'm going to take this button I'm going to copy it and we're going to go to confirmation and we are going to paste it uh right here paste it and there it is okay so let's give it a little bit of uh let's give this column let's give this button a little bit of padding okay perfect okay so this is not going to say check out this is going to say placeold and looks like everything is good to go right so we have this custom function that that's going to calculate the the sum and this right here is our order confirmation page so let's go ahead and jump back to this shopping cart this checkout is going to do in navigation navigation to confirmation and that's it so now we are uh on our confirmation page and when the user uh you know clicks on place order they're going to be in another page and this is a page where we're going to take their payment information so let's go ahead and create that page and see how we can do that and let's actually search do we H yeah we have some e-commerce there's some really good pages that we can use for this right so if you take a look here we have some templates let's see if this is going to work for us or not so yeah this is a checkout page let's take a look yeah so I don't I don't quite see exactly what I'm looking for so uh what I'm going to do is I'm going to I'm going to do it from scratch let's create it from scratch and let's go ahead and name it order this is our order page and and here let's see if we can find a template that we can use so let's see payment maybe pay or credit card not quite what I'm looking for let's see if we can find a kind of a credit card check out cuz I know there's a credit card all right so I don't quite see exactly but what we can do is I think there's a credit card form right so there's a credit card form that we can use okay so let's just let's just keep it simple let's use something like this uh for a credit card we can also do a little bit of padding on it so something like this and here we can have place your order right so something simple let's give it a padding let's give yeah this is fine go ahead and Pad this and this can be place your water let's make it a little bit bigger okay so something like this okay maybe we want do we want it to be left Justified I guess that's that's up to our designers right that's up to our designers at this point but um yeah this looks fine this looks fine to me and I'm going to add a button so I'm going to go ahead and copy this button here just to keep it the same going to go ahead and scroll down I'm going to copy this and I'm going to go over here to this order and I'm going to paste it okay and there's the button and we're going to say B and if you want you can also do an icon right I think there's a cool icon here something like this if you want but I would recommend having that throughout right that's just good practice okay so now we have that and so idea is it's going to create an order right and and this is going to depend how we are going to actually integrate with our payment processing are we going to have a backend flow are we going to do that in fact I think a backend flow is as good as any because this is no longer flutter flow this is going to be stripe or something else so I'm going to show you a pretty cool flow when we do that but right now what I want to do is when they click pay I want to create a new order right so we have have the order information we also have we have all the items we have everything that we need to know it's in the App State so when they click pay what I'm going to do is I'm going to open this up and I'm going to delete this action and what I'm going to do is we are going to insert a row into our um well we're going to create an order right so we are going to create an order and then we're also going to populate orders item right because orders order items needs the order ID so we're going to come to this order we're going to add all the fields okay and so so here we have the user ID this is us we don't need these two fields and we have this time from and time two now this is actually a cool one this is a cool feature because this allows you to place your order in different buckets okay so this is something that when they place the order here this is something that they can do right so if you take a look at the confirmation uh they can do it here on this page it's a good idea to add these things like you can have a list of different time slots you can allow them to pick them there's lots of ways of doing that so we're going to do that but right now what I want to do is I want to come back here and I just want to test out this flow okay so we're going to we're not going to do anything here I'm just going to add my authenticated user ID here so at least we have it assigned and we're going to get back the um the ID we're going to get back the the actual um inserted row right we're going to get back so this is this or New Order row okay so we're going to get this and now what we can do is we can add the individual order items right cuz remember we want to store all that right so if we head over here and we come back here we have order items right so it's a good idea to store individual items cuz we can display them to the user right so if you take a look we have the order ID we have the product ID and we have the quantity okay so this is going to be a loop right this is going to be a loop because there's you know there's no way to add them you know at the same time right so if you jump back here uh what we can do is we can if you add an action and you do an insert right you can in do an insert row and you can select order items you can't you know you can't give it an array and let it do itself you can't batch it at least not yet maybe in the future that is something that you'll be able to do and so what we need to do is we need to create a a loop okay and the way you create the loop is you need a loop variable here and I'm just going to say Loop in Index this is going to be an integer and it's going to be zero it's not going to be nullable because it's always going to be it's it's always going to have a value so it's going to be zero and what we want to do is we're going to come here we create the order and now we can do is we can do a loop we're going to do a loop and the loop action is going to be um this is going to be this Loop variable and we're going to Loop until we covered all the um the items right the items not the quantity we don't really care about the quantity just the items right and so we're going to create a condition we're going to say condition and we're going to say until Loop index is less than the number of items right so we're going to go into this app State shopping cart we're going to say number of items and that's it right it starts from zero so zero is the first item and then once we get uh to once we go through all the items we're less right cuz when it's equal it's going to break out and we just wanted to break out before that point because when it when Loop index is equal to the number of items we're going to have an error because we won't be able to access that item we can only access zero to number of items minus one okay so remember that so that's kind of what we have here this is our Loop condition and here what we can do is we can have this insert right we can insert the row into order items and we can list all the fields we're going to remove these fields we can just leave them on default now the order ID is going to to be this action output here and this is going to be the ID right here and the product ID is going to be the App State and the actual uh the actual Index right so we can just go here and what we can do is item at index specific index is going to be this uh loop Index right okay and here we can get the data structure field so here we just need the product ID and we can also copy it because now we need the quantity so it's the the same thing we're going to come back here paste it and I'm just going to select quantity and now and this allows us to get the individual products right from that App State now there's one more thing very very important thing that you need to do you need to make sure that you're incrementing this Loop index because if you don't it's just going to it's going to be an um it's going to be an infinite Loop right remember this is checking actually this is not right this needs to be less than okay because this would be this would not work right this this Loop is not is not not going to do anything right because it's it's not equal initially okay so if we come over here we want to make sure that we increment right so you want to go into page State update page State Loop index and you want to increment by one okay and that's pretty much it right so we're creating our orders we're getting we're setting this user we're still going to we're going to we're going to have that functionality where we're going to be displaying the uh the time buckets the the actual buckets that you can select and now we have the user ID here and here we are looping through all the items all the products that we order all the order items and we are inserting uh into this order items and we're updating page State and so when page State reaches the number of items we want the loop to stop we want we don't want it to do anything because like I said it's going to go from zero to number of items minus one okay and that's pretty much it so that's going to add everything it's going to place the order it's going to add the order and everything like that and then what we can do is you know we can just display something like uh we can do a snack bar say something like your order oh and another thing that we want to make sure is the status right so if we come to our orders are we tracking the status this is very important right we have yeah we have disorder we want to make sure that we are successfully tracking the status there okay so let's double check there and we don't have the status field okay so this is what I'm talking about that you know we just create fields as we go so this is going to be stext initially it's going to be new then it's going to be delivered you know this is important to try and so we're going to come back here and we're going to go into super base we're going to get our schema and we're going to come back here and we want to make sure that we um we set the uh the order status right so this is so if we come back here and we remove all this and status is going to be new right New Order okay and then you can modif ifed our backend processes can modified as we're doing things to that order right so now it's new status is new and then We're looping everything starts off at zero okay looks looks good to me okay now let's go ahead and test it out okay we need to uh we need to compile our functions of course and since we haven't really changed them should be no issues there okay looks good now let's go ahead and start a new session and see what's going on okay see if the app is working as expected all right so here's our app and let's go ahead and add a couple of items to our shopping cart so if you jump over here I'm going to add this I'm going to add three units of this I'm going to go ahead and add this so we have five units estimated cost is $570 we click on view card we have this popup we're going to go into check out and now we're looking at this three units 2 units fair enough maybe make this a little bit bigger but we'll worry about that later later now if you click on place order nothing happens okay why doesn't anything happen because we probably don't have it linked so if we go into our uh confirmation this needs to be and of course we don't have it linked let's go into to uh create uh this is going to be order yeah order is the last one okay so let's go ahead and reload our session here after we fix that little issue all right let's try this again and I'm going to come in here I'm going to add four of these I'm going to add here and I'm going to do a bunch of these so we have 8 units estimated cost is 2480 view card order confirmation placed order and we are here okay so here's where we can place the order okay so we're going to fill all of this out and then we're going to click on pay okay and so now if I click on pay it should create an order and add those order items successfully and then show us a snack bar so I'm going to click on pay your order has been placed let's jump into to our uh database and see so we have this order right here these are empty that's fine status is new and Order ID is one this is what we wanted to see and if you jump into order items we have our order items right so this is product ID one two and quantities four and I hope that's correct so if we jump back here into our app and let's go back yeah looks good so we have two products one is product ID one another is product ID 2 and we have four units uh anything else we need to store yeah we need to store the price well we have the product idea I guess we don't need to store the price uh we do have the product ID so maybe it's not that important cuz we can always look up that information uh the only thing that I'm thinking about the reason I said this is because the price may change right so you want to freeze that price and that order right so it's like with Amazon right the prices are always changing when the products and so you know if I'm looking at a product right now it could be one price but you know when I ordered that that thing that that product like you know two months ago was a different price so that is something to keep in mind and so probably it would be a good idea to store the the price on the order items level okay so we can do that you know just for completeness sake so I'm going to say price I'm going to do a numeric and I'm going to hit save okay and so we have so I'm going to put that right here okay so this is just for completeness SA let's go ahead and fix this uh refresh our schema okay and let's come back here and let's go into order come back here open this up and it's just going to be the same thing that we did in this here right so we can add in fact what we can do is we can come here and we can change this to price and here what we want to do is we want to copy this and you want to paste that there and you want to change the price price here okay and that's going to keep the price there okay so that way we have the the price Frozen right so you know the user can always look up their orders and they can see oh the price went up the price came down this is especially uh important when it comes to you know uh these kinds of goods right products in a supermarket right you always have sales products are always changing stuff like that so we want to freeze it so let's go ahead and reload our app and let's see if the uh the prices are being saved correctly as well all right this is our app I'm going to come in here I'm going to add three of these I'm going to come in here I'm going to add three of these and I'm going to add three of these okay just for completeness sake view card 33 three three of these do check out place order your order has been placed come back here and well this is order items and we have the price okay so we have the price here 330 290 109 this is the quantity this is the order ID this is the product ID and come back here we should have the other order okay so this is the right approach you want to freeze it because yes you can get the product name and product names should not change right if it's a different name uh it should probably be a different product ID in most situations and so at this point we have this flow working we still need uh to have the processing done this is something that we're going to do but the other thing that I want to do is uh when they have the order confirmation I want to I want them to be able to choose the the time bucket so like something like 8 to 10 a.m. 10 to 12 a.m. maybe 2 hour time slots and they can choose it right in one swoop right this could be like maybe a uh it could be a select it can be a uh kind of a horizontal list uh could be all kinds of things and that is something that I definitely want to implement all right so the next thing that I want to work on is that uh time slot uh option right so basically they're going to be able to choose a specific time slot during the day so something like you know 8:00 a.m. to 10:00 a.m. 10:00 a.m. to 12:00 p.m. we're going to do a 2hour time slot which means that the from is going to go from 8 to maybe um you know like U 20 hours right if we're talking about 24hour system right so 8 a.m. to 8:00 p.m. and the 2 is going to be uh 10:00 a.m. to 10:00 p.m. okay so the the earliest they can choose is 8:00 a.m. to 10:00 a.m. and the latest is going to be 8:00 p.m. to 10: p.m. okay so something like this and so the way that we're going to be implementing it via a list view that is set to be horizontal okay so I'm going to come in here and I'm going to add another list View and I'm going to drag it up on top because I want it to appear above right here so now we have this list VI so now we can come in here and we can set it as a horizontal list view now when we do that we get an error and it's telling us the list view with have undefined or infinite height but its parent gives it an unlimited amount of vertical space to expand so it's saying a list view that is not shrink WRA is UN constrained you can expand the list View and then turn off shrink wrapping and so what we can do is we can select this list View and we can have this expansion so we can do this expansion and turn off shrink wrapping okay and so now if we come in here we should be able to set it horizontal okay so now it's going to be horizontal and what kind of things do we want to display in this list view well there's a couple of things we want to display we want to display the the time uh the time slot there right so something like you know whatever 8:00 a.m. to Etc right so this is going to you know it's going to be a row and inside the row we going to have you know text in fact I'm going to wrap this in a um I'm going to wrap this with a container right I really like containers so something like this and now the text is going to display the time slot now in order to display this data we need to uh you know we need to make sure that we actually have data that is going to be displaying and fortunately this is relatively simple we can feed it with a gener we can do a generating children from a variable and feed it with a custom function that will essentially give it tell it to generate x amount of time slots so I think the number of time slots that we need is like seven so what we can do is we can create a custom function create new custom function and something like this gen time slots and to keep it really really simple is we can create a data type that represents a time slot right because the time slot is is two things right is the from time and the two time right and so what we can do is we can just return a dummy value here so that we can save this function right so what I can do is I can say well list in is you know my list and I can say um whatever generate list let's do something like this and we take a look here we can see that we just need a length so let's say 10 okay so something like this okay and then we can say return my and in fact what we can do is we can take this just so that we have something there okay so that's going to generate you know 10 numbers where each number is multiplied by each other where each index is multiplied by each other right just a simple list so that we can just save it cuz otherwise we won't be able to save it and here what we need to do is uh time slot uh item I use okay so something like this and now we can display there but what I'm going to do is I'm going to come in here and I'm going to do time slot type time slot type and this is going to be from integer okay so now we have our time slots and now what we can do is we can actually have a function that generates these time slots right so we can come in here and now what we can do is we can come in here data type uh time slot type okay and that's what we we want to do and so now what we can do is we can say time slot and I think it's going to be struck I think if I'm not mistaken that's time slot type struct okay and that's what we're going to do and now what we can do is we can say well I want to do seven this is an index and so what we can do is we can come in here and I'm going to say time slot type struct and what we can do is we can use something like this right we're generating seven of these time slots and depending on the index it's going to look different right so if the index is zero it's going to be eight here it's going to be 10 if the index is one this is going to be 10 and this is going to be 12 right so that's that's how it's going to be moving and we're going to get back this my list we're going to hit save and this is going to generate our time slots and what's nice about it is that now here we can display you know exactly what we want to display so here we can say uh what we can do is we can come in here and we can actually display the data and so what I want to do is I want to have a row and in fact I can do combine text right so here's my first one time slot this is going to be from uh from here and I'm going to come copy this and I'm going to put this space this here and I'm going to paste that and this is going to be two okay so now we have this text combination and we can also let's go ahead and do a little bit of padding here that's nice can also do a little bit of padding good measure here and now we have a list of time slots here okay so let's go ahead and see if that works all right that compile let's go ahead and run it and see what it comes up with we're going to start a new session all right here's our app let's add a couple of items here we added this item add more units come by here all right this is good we're going to do a check out and as you can see now we have these time slots and this is exactly what we wanted right so 8 to 10 10 to 12 12 to 14 14 to 16 all the way to 20 to 22 and this is military time which means that this is 8: to 10:00 p.m. and you know I'm just going to leave it as is I sometimes I like using military time and so as you can see this is kind of what we have now we need to fix it up a little bit it's taking up a lot of space and this is taking up the middle so we want to move this up let's go ahead and fix this little layout here this list view is just taking up too much space now in order to fix this what we can do is we can wrap it in in a container control the height at the container level okay but we need to turn off we need to make sure that this thing is turned off right so once cuz we had this we can also set it like this remember this list view here is maxed out so it's always going to take the max amount of space and so this is kind of what we want so that looks nice okay so this list view is going to take the max amount of space right here come back here and that's exactly what we want to do so we want it to be like this and that way it's kind of scrollable um another thing that I want to do is I want to maybe change the color the background color so that they can see it or actually give it a border radius all right we're going to give it a border radius and let's give it a border color so something like this okay and let's do a I love my padding that's too much okay that's better and let's give it a little bit extra height we want to make it 70 right so it doesn't have this uncon strain right unconstrained height okay that looks good so that way it's scrollable and they can kind of decide and we're going to have a page State variable that's going to store the values cuz when they selected we want to set the page State variable so that we can pass it as a parameter to the next page right so we're going to create a page State variable which is this data type time slot type and time slot P okay and that way when they click on it they click on this container we're going to save the time slot okay so we're going to do this open this add an action page State update page State time slot picked we're going to set the value and what is the value well the value is what this is the value why what they picked right so that's what we're going to do and when they click here we're going to pass that time slot uh value to the next page right so we're going to come back here we're going to define a parameter time slot par whatever just time slot and this is going to be this data type and confirm and then we're going to pass it and this is going to be the what they pick time slot pick right cuz we need to save it as a page state so that we know what they pick and then we can pass it and this is going to be passed here and oh I want to do one quick thing here this this container let's do a little bit of padding maybe even more padding actually I want to do padding on this container let's do 10 okay perfect okay so now it's a line and now they can just scroll and they they can pick the right time slot we can even say P we can even have this text put it up on here and Let's do let's put it in a row and let's do this uh 20 okay actually not 20 we want 20 20 and we want 10 10 and we're going to say pick a time slot and yeah let's make it a little bit bigger okay so something like this there's still a lot of padding we don't need that bottom padding yeah we don't need that there's there's enough enough of padding as this so pick a time slot and then you have this and then when they click on place order when you click on the time slot it says the page State variable and it's going to pass it okay so that when you go to the order right remember this goes to the order page we're going to have this time slot information so uh when they click pay we have that time slot information so we're going to come back here insert this is it ah it's in the uh order ID it's it's going to be here actually let me go ahead and fix that we don't need this we're going to going to come in here and we need time from time two remove this and we have it right so this is this time slot this is data structure field this is from okay so we can't pick from because it's a mismatch right so that is an integer and that is time okay so um we need to fix that but before we do that let's go ahead and and see if everything you know if if the whole flow works okay let's fix that okay looks good let's go ahead and re uh rebuilt our app and see what happens okay because the issue here is we have them stored as date but these are integers okay so how do we fix it well let's let's see if the app functions as is and then we'll fix this issue all right let's go ahead and add some items here okay check out we have our time slot nice we can select it actually when I select it I want to change it I want it to be cuz I don't know what I selected right it doesn't say exactly so what I'm going to do is I want it to be a little bit different right so we're going to go to this confirmation and so what we need to do is um we need to track which time slot was selected okay we're not tracking that okay so if we come over here and what we can do is if we take a look at this thing here this list View and we have a container so what we can do is we can change the Border color depending on if this is the currently selected time slot okay so I'm going to come in here and let's go ahead and do conditional here conditional and so we're going to say condition and the first value is going to be the currently selected time slot so I'm going to come in here time slot pick we're going to say equal to the currently whatever time this time slap item okay if that's the case uh actually you can compare it right it's not letting us compare it okay so what we need to do is we need to compare the values which is going to be a lot of work but it is what it is right so what we can do is we can do a multiple condition and here we can do is we have a condition so we're going to say time slot item data structure field um well this is going to be a condition we're going to say time slot item data structure field from is equal to um page State time slot pick data structure field from okay next we're going to actually we need to confirm this we're going to copy this and now we need to compare two and two is also now this is going to be two two and this is going to be two okay so now we're comparing if the from matches and the two matches now we can do it I still I don't understand why it's not letting us compare it okay it should be able to do it and if they are compared we're going to do this if they're not true we're going to do this let's see if this works let's go ahead and restart our app here let's do a rebuil all right let's go ahead and add this you see that that's really cool I like this all right so now we know what's pick we know what's in the app we know what's in the page State okay so that is done uh we still have that issue right with the time um the um the time stamps and so what I recommend that we do what I propose is we change this uh from a time stamp to an integer right because we know when the order is created obviously when it's created right when the order is created that's when when they place the order and so we we should be able to match these things up okay so there's no need to do it so what I'm going to do is I'm going to just make it an integer here I'm going to edit this column and so it's telling us uh you know we can use that but I'm just going to make it an integer in fact this integer right here and it's not letting us do it because we already have some orders right so we won't be able to cast them so what I propose that we just delete these all right that's why we're testing okay so we have this or items we're going to delete all that as well delete this and then delete this right here and now we'll be able to modify it right right so what I'm going to do is I'm just going to put uh I'm going to edit this and I'm going to say into so it looks like it's not letting me do it not a problem I'm just going to redo the field I'm going to delete this and I am just going to redo it okay now sometimes that is what you got to do right and we're going to come in here and we're going to say time from I'm just going to make it an integer you can just use in two uh just for very very simple small numbers you can use one of these ones right just this two byte integer because we're storing very small values right it's going to be just two digits right so you can just use this in two that's fine we're going to do that and we're going to say time two and I'm just going to say into okay and I'm going to place this right here and I'm going to jump back into flut flow and jump into super base get my schema and now if we go into orders we have these inos here okay so what this means is we should be able to save this directly and so if we come into order come open this SC come in here we can add two Fields this is going to be time from and this is going to be time to and here what we can do is we get our time slot data structure field and we have this problem now it matches and now it's not a problem data structure field two okay and later on we can you know reconcile you know what the time slot is and in fact we might not even need to reconcile because we know what the data is we know when they place the order and we know you know if there's another day that they're picking we know you know that when the order is going to be placed we just need we just need that the the uh time of day right we don't really care about the other the the time zone and all of that that can be stored in another field and in fact it might be a good idea to uh tell them that the next delivery date is for this date and that way you know they can pick the date maybe in a couple of days and the time slots are going to are going to connect to that date and that is something that I might do as well but right now let's fix this custom function needs to be rechecked and if you want to modify this function you can change 7even to something else but seven is the maximum time slots that you can have in the day provided that each time slot is 2 hours if a time slot is 1 hour then you can make this more it could be you know 10 11 Etc if you have a time slot that's 6 hours right then you might only have two time slots right so it depends on how you want to do it okay so let's go ahead and restart the app and let's see if our time slots are saved correctly all right here we are let's go ahead and add this four units sounds good check out 8 to 12 I like 8 to 12 I'm going to place my order and I'm going to say pay order has been placed let's jump back in here and we have this order here 8 to 10 new and if we go to products we have the products here right so this is for a different order uh actually no the items that's where I wanted to go right we have this order ID here all right so this thing works one thing that I wanted to do is maybe have them well not maybe but definitely have them select a date so we can have them select a calendar we can place a calendar maybe a weekly View and they can select a date and a time slot all right I think that's going to work really really well so let's go ahead and do that real quick uh we're going to go into our confirmation page that's why we have the confirmation page cuz there's still a lot of things that they need to do so we have this container we have this row let's go ahead and add a calendar there's a calendar and this calendar we are going to do a uh start on Monday and we're going to do a week view and so what we can do is we can put it all the way to the top something like this okay so now we have this put this on top and we have our calendar let's do a little bit of padding for the calendar okay so something like this pick a time slot should be under the calendar so something like this this okay that looks good and this yeah looks good looks clean and that way they can pick a date and um they can pick a date here we're going to save the delivery date we're going to pass it there and they can pick a time slot as well okay so let's go ahead and let's take a look uh what's happening we're going to pass this I'm going to Define uh and we're going to pass the delivery date and here we're going to do date time confirm and now we're going to pass it and we're going to do widget State calendar selected dat and here doesn't matter cuz it should be the same cuz it's not it's not a calendar that gives you start and end date so whatever they pick is whatever they see and we're going to add another field to our orders insert a column uh we're going to say what do we have time from uh delivery date yeah let's just do delivery date and this is we're going to do time step and now we have this delivery date I'm going to put that right there come back here super base get schema we're going to select the date we're going to pass the date to our order page and here we're going to save it right here we're going to add it here and this is not going to be the ID it's going to be delivery date and we have this parameter delivery date okay confirm okay so let's go ahead and do a quick test and then we are done with this part of the flow go ahead and check our functions should be fine okay let's go ahead and start a new session all right let's go ahead and see what's happening here we have this we have this view card check out and let's say we choose this date here and we choose this place order pay order has been placed come back here we should see a new order right this is the delivery date and this are the time slots Okay order status is new and Order ID was four and with one item right already was four with one item okay so as you can see this flow is working nicely all right so the next thing that I want to work on is the whole payment flow okay so I want to be able to get the get the users to pay for the products and after they pay we're going to be provisioning the order now the way this is going to work is first we're going to be using stripe and stripe has an excellent service called uh checkout and so what what that allows us to do is that it's going to be a two-step process right the first thing we're going to do is we're going to create a custom checkout link just for that order just for that shopping cart okay so it's going to have the price the name of the order etc etc and then when they click the link they are going to be entering this information uh credit card information uh etc etc on Stripes website so this is a lot better because we're not you know we're not you know collecting this information ourselves uh essentially they are you know it's everything is done on Stripes uh website now when they enter all the information their credit card information and they purchase we get notified that the purchase the order has been uh completed it is successful and so at that point we can um you know we can do something we can change the order status we can start provisioning the order all right so let's get started with this and to help with the integration with the stripe integration we are going to be using an awesome tool called build ship and so here I am logged into my uh build ship dashboard here and this is where we're going to be creating our Integrations with stripes and this is going to be done with uh in the form of two workflows the first one is going to be creating this payment uh checkout link and the second one is going to be listening for uh payment events okay so let's go ahead and create that first workflow where we are going to be creating this payment link now the best way to do it is by using an existing template okay so you can just click on template click click on payment and you want to be using this T template here okay it has 90% of what you need so once you've imported this template you can delete this one we don't really need this one this that node and you're going to be left with three nodes okay it's going to this is going to be the the link create checkout link it's a post which means we can send a bunch of data and this is the star of the show this this note here is what's actually going to be creating the uh the payment link okay so you have to fill out uh the information here okay and so what you need to do is you need your stripe secret and if you jump into your stripe account and you make sure you're in the test mode you can go into API keys and you want to get the secret key okay so you want to get the secret key here and that secret key is going to be used to integrate with your stripe account so I copied my secret key I'm going to jump back here and I'm going to paste it right here okay so I'm going to come in here I'm just going to paste it directly now the product name is the name that's going to be displayed uh when they do the check out so I'm just going to say grocery delivery okay now the product image um I'm just going to I'm just going to have a blank okay so this is the image that you may want to you know display could be a a store logo Etc I'm just going to leave it blank now the unit price this is going to be dynamic so this needs to be passed from here okay and so this is going to be passed here and we're going to pick it up here and so what I'm going to do is I'm going to select request I'm going to select body and I'm going to click here in fact I'm going to edit this and I'm going to say uh price okay and it has the generated image and you can remove that by coming here and you can just delete this here okay we're not that's from the template we're not going to be using it and in fact what you can do is uh this is a good one is you can go into body and you can create a um the uh the the stuff that's going to be in the body so one is going to be the price and we're going to have another one right we're also going to have the um we're going to have the order ID and so so I'm going to put order ID here and this is going to be the order ID okay because uh we are going to be uh we're going to be passing the order ID so that way when we get back the payment successful we're going to know what the order ID is and we're also going to be uh passing in the price because we need uh to display the price uh to the user so we're going to hit save and so now if you jump back to unit price you can actually grab it here you can just go into variables request and it's going to be price here body and that's it okay now you have the price here currency is USD uh success URL so this is going to be the URL that's going to be redirected that you know your user is going to be redirected to after they successfully uh submit the payment here you can just put uh this is going to be your your uh web apps URL I'm just going to put Google for now and that's it now for the metadata this is the stuff that you want to include so that you when you get that uh when you get that trigger that an order has been successful you know the order right because you you might have multiple orders and multiple triggers and so here what we're going to do is we're going to uh have a one field we're just going to have order ID and I'm going to have that order ID right so I'm going to go into to variables request body order ID okay and so that way in fact it's going to be right here it's going to be order ID and yeah order ID that looks good so that order ID is going to be available to us we're going to know once we get that trigger once we get that call back now the purpose of this workflow is to generate a payment link right and so here what you want to be doing is you want to be returning the payment link so I'm going to I'm going to delete this okay and I'm going to go into variables I'm going to go in here and I'm going to have this checkout session because this thing does a lot of things but at the end of the day we want the URL it says here the URL of the checkout session okay this is correct so now you can ship it you can deploy it and you have a link so this is the link that the user is going to click it's going to generate a session uh checkout URL and then we're going to redirect the user on that checkout URL so that they can complete the payment all right so we're going to copy this next we're going to jump back into our app and we're going to create an API call we're going to add an API call right here and we're going to call it uh payment stripe checkout this is going to be post we're going to paste it in here and in the body we're going to be passing the variables right so things like the price and the order ID so we're going to come in here add the variables price and Order ID so the order ID is going to be an integer and price needs to be an integer as well and you're going to see why right you may be thinking this is a double but no it's going to be an integer and I'm going to explain to you in just a second so I'm going to add the SC we're going to come into body and here we're going to have our body right so the first one is price here is the order ID pasted in here and that's it format let's go ahead H that should be double quotes it doesn't like single quotes okay and so now we have the body of the request that we're going to be sending to Bill chip to right here okay and so now we can test it out this is a good time to test and the price now when you sending the prices to strike uh you need to multiply by 100 so if it's $50 you need to send $5,000 if it's $50.50 it's going to be 5,50 okay so that way it's always an integer there's no you know send component is just a pure number so I'm going to send 5,000 that is $50 and the order ID I'm just going to put one uh 100 as the order ID okay and so and that's it so now let's go ahead and test it out see if that works okay we're running it and as you can see it's successful we're not you know we're getting back status 200 success looks good and if you scroll all the way down you have this URL right and this is going to be the checkout URL that you present to your users okay and if you look at this uh look at this uh response here you're going to be seeing some interesting information right all of this like cancel URL here um you know invoice creation a lot of interesting things we did not send the metadata right so we can also send the metadata as well and that is something that we're going to be doing uh from Bill ship okay so at this point we get back this URL and actually what you want to do with here is you want to make sure you're capturing that URL so you want to scroll all the way down ad Json path and you want to say this is checkout URL okay and here you can just hit save okay and so now and in fact I'm going to copy this and I'm going to use a tool that makes it a lot easier this Json viewer here and so that way I can paste it and you can scroll down you have this URL okay so now you can just copy that you can just copy this link and you can open it up and this is what the user is going to see right so this is $50 and they need to fill this out they need to click pay when they click pay and if everything is okay we are going to be getting that second event that we're going to be creating a flow right now all right so the first part is done right so if you come over here the first part is is done the second thing that I want to do is I want to create another workflow and this is going to be for stripe events okay so we're going to do the stripe event and in fact let's go ahead and rename this first one I'm just going to say uh stripe checkout link and so we're going to come here and here we're going to add a trigger and this is going to be a stripe web hook and we're going to be listening for events the first thing is we need the secret key and looks like we don't have it in the clipboard anymore we're going to jump back here API keys and copy this secret key come back here and paste it in here now the stripe event that we want to listen to is this one check out that session. completed that's what we want to be listening to because that way we know that the session is successful and we can grab you know everything that we need we can change the order status and all that but right now I'm going to add a loging message so that we can see you know we can see what's going on right we're just going to lock this whole stripe event here and then we're going to click ship and that's going to deploy right so now it's integrated with stripe and now if stripe uh something happens on the stripe side in terms of the events that we care about we're going to get notified right workflow successfully deployed and so now if we fill out this payment form our one of our uh triggers that Stripes trigger will execute okay and so we're going to get get all this data back so let's go ahead and try this out I'm going to put test test.com here you can put this fake credit card information remember we're using a test environment so you don't need you know we're not charging we're not working with real money one 2 three I'm just going to put James and I'm going to hit pay okay so now it's executing it's charging my credit card for 50 bucks and hopefully I should get an event that I have successfully completed all this okay so let's wait a couple of moments okay now it's successful here and we are redirected to Google because that was the success URL obviously this is going to be something in your app or you may want to display a payment receipt or something like that but now I'm going to close this and I'm going to open up the logs for this this should have been triggered right let's go ahead and refresh and we see success because it was triggered and if you take a look at this log message here and here we have a lot of information having to do with this particular particular request and so now let's bring it all together so what you want to do is you want to go back to flut oflow here you want to come back here and because we are no longer be going to be uh collecting credit card information ourselves we really don't need this page and so remember this was from the confirmation page it was redirected there so we can take care of everything on this page here right so we have this button here and what's going to happen here is we're going to execute the API call we're going to get the checkout link and we're going to immediately redirect the user to that checkout link okay so I'm going to come in here I'm going to add my action I'm going to come here and this is going to be an API API call this is going to be a stripe checkout and we're going to set additional variabl so we're going to set our order ID here and here we need to know the order ID and and in order to know the order ID we need to actually create the record in superbase so I'm going to do that in a second I just want to make sure the works I'm just going to put a th000 for now and I'm going to pass the price now the price we do have but the problem with the price is that it's it's it's a real number we need to multiply it by 100 first because that's the price that stripe accepts okay so we're going to come here and we're going to be doing a code expression and we're going to pass the real price and this is going to be total cost and we're going to be passing a double and so we're going to come back here and I think we have a custom function that does this total cost going to come in here shopping cart confirm confirm and we have that so now we have this total cost and the only thing that's left is multiplying by 100 and so we're going to take this total cost and we're going to multiply it by 100 let's see what we're returning yeah we're returning an integer that's fine we're going to see what's happening so we have an error and it's telling me how type double cannot be returned from a function with a return type event and that is because this function returns a double okay so what we need to do is we need to convert it to an integer and you can just simply do this okay and then you can just check okay no errors confirm and now we are going to be sending the price into our uh build workflow here and we're going to get back a URL back and so what we need to do is we need to uh redirect the user right we need to do launch URL we're going to do from variable and we're going to come here action outputs come here and we're going to find that uh URL that was generating this is for my predefined path remember we have this checkout URL and that's don't then that's then that will immediately redirect the user we're going to create the URL and redirect the user there here we are going to come in here and what we're going to do is we're going to show an error message right so something like an information dialogue box uh error uh API error okay and this is going to be the message here uh we're going to go to action outputs and we're just going to do Rob body text just display everything okay and so this is our API call and let's jump into Bill ship I want to just double check a couple of things so the unit price is this being said correctly let me see yep price is being set correctly and the order is being set correctly in the metadata and we are we're setting it right here right so we have price and we have order ID and this is the order ID and we need to make sure that we're passing it correctly here so I'm just going to put order ID here like this and let's jump back into FL waterflow and let's take a look at our API call if we are doing it correctly stripe checkout body you see Yep this is right order ID everything is lower case price is also in lower case let's just double check this is important you can just come in here price lower case order ID everything is lowercase and then it basically is going to pull it up here this price price is going to be pulled up here and the uh in the metadata Oh see it's invalid so we need to make sure and see here it should be just order ID and we need to make sure there we go okay so this is all lowercase let's go ahead and do and ship this deploy here so that we are capturing the values because the values are being passed passed from here right all lcase all lowercase looks good looks good to me okay so now let's go ahead and run our app and see what happen so I'm going to go ahead and create a test environment and see what's going on all right so here's our app let's go ahead and log in first all right we're logged in we are ready to do some shopping I'm going to come back here add this I'm going to add multiple units of this view card I'm going to do a checkout in here I'm going to choose a date and a time slot we have five units for a total of 1650 now stripe is going to receive 1,650 okay that is going to be $16.50 okay so it needs to be multiplied by 100 and in fact I think we forgot to do it we forgot to do it oh we did we did it we did it we did it actually we actually did it I remember so let's go ahead and test this out we're going to hit place order now it's creating that link and it redirected to that link and this is the Price Right grocery delivery ,650 okay so now if you jump into build ship we can see what's happening right so if we come into this checkout link we can see that it was just created right and this is this this is this success right here you see that amount sub tootal uh you know success URL we have all of that here and this is the request and we can take a look at what's Happening Here we can take a look here we can take a look at the result right so this is this was the result here all of this information let's take a look this is the URL that we redirected the user to and this is the metadata right order ID is 1,000 that's what we passed from our app this is also going to be dynamic in just a second and so now let's go ahead and complete this order let's put some fake information here here because we're using a test environment and let's put James I'm going to go ahead and pay and we're going to get redirected to Google because that is our success link and as you can see we have been redirected and now if we jump back into build ship check out this second workflow stripe events open it up we should see a new success and we do see this success we have a log message as well so we can take a look at the stuff that we log so here you can take a look at all these things here this is the stuff we we're logging this is all the information the user information all the stuff so if you click on metadata we see that order 1,000 so we get that we get that um trigger right we get that call back and we know what order was just completed because you can have multiple orders happening and you don't know what you know what order was just completed so we see that order is 1,000 and now what we can do is we can uh check the status we can change the status and so what I'm going to do here is I'm going to create another node I'm going to search for super base and here I can get a row I can list I can get columns and I can update a row with token or I can just update a row here so what I'm going to do is I'm going to update a row and for that I need some information right so I'm going to uh come jump into my super base project settings API URL come back here base the URL here API key this is the API key uh come back paste it in here now the table name is Let's Take a Look which table are we working with so if we come over here we have a table called orders right and this is the table that we need to update the status so it's both new we're going to change it to something like started or something of that sort so we're going to come back to build ship and to put orders and here we need a filter we need to find that order ID and so for that we need to know the order ID we're not you know we are being pass it right we are passing it it's a um it's a fixed one so we can use that right so what I can do is I can create a filter and typically filters are ID equals to equal and then the uh the actual order ID so we can come here stripe event and so we have the type we don't have so what we need to do first is we need to capture it right we need to capture the actual um the actual event and so what we can do is we can well we see it right if we come over here right if we open this up in the success we see it right so there's the stripe web hook event and if we scroll down data object is that the one let's take a look there's a metad data okay so that's what we want so we can just copy that come back here and let's see if that works and there's the order ID but we need the whole path right so we're going to come back here and let's go ahead and try to look it up and so what I can do is I see the event we already know that event so next we need data object and then it's going to be metadata and then order ID so let's try to remember this event data object metadata is that right event data object metadata order ID so let's try to let's try to remember this okay so I'm going to come back here I'm going to go to stripe event this is our event and I'm going to say event uh data object is it metadata metad data and Order ID okay I think that's right let's double check again so event data object metadata d o okay how's that d o okay let's double check so let's come back here let's let's make sure we got it right so event data object D MMO emmo is our metadata go ahead and find it where's our metadata um metadata data yes right here and Order ID so yeah looks good to me okay so that's our filter that is our filter we're filtering by ID data object do o d o okay let's let's see if that works okay and we have this filter and now we can update the row right so what we want to do is we just want to update the status and this is easy status okay and that's it that's it we're just updating one field we're going to ship this deploy this thing back and let's try this again let's come back here let's place the order that's going to create a new order to 1650 I'm going to say test test let's go ahead and complete this okay let's see if that works it's processing we're going to get notified and hopefully it's going to update our superbase database uh with the right data so let's jump back into our super base and it hasn't been updated and let's go ahead and reload this table our orders and it's still new okay so there was an issue let's jump back into build and let's see what's going on so we have that success there okay so let's take a look here update row let's take a look ID equals to stripe event data object metadata order ID let's let's do this to debug this I propose we just put in a um oh it couldn't update it because we don't have an order we don't have that order right everything is correct I'm pretty sure everything is correct it's just we don't have that record we only have order ID of three and four so what I'm going to do is I'm going to pass uh this one here the last one let me let me double check if I yeah this is good cuz we don't have that order there I just realized and so from my app I'm going to come here and I'm going to pass I'm going to do a disc call I'm going to pass four as the order ad and that's going to modify that last order let's go ahead and rebuild this app ahead and that let's re let's rebuild our app all right here's the app let's go ahead and add a little bit of Guru cheese come by here view card let's pick a Saturday we have this place order okay so now it should pass order ID as 4 42 42 42 42 let's go ahead and pay and hopefully it should update the order all right it's processing it is done let's jump back here started okay there you have it so now we've gone full circle right the person places the water they finish their flow we get no notification right we don't know what they're doing right we get notification that it was successful and then we have that second workflow that is listening for these notifications so it says started here now right now the payment flow is working perfectly but the only issue that we have here is we are passing in a set order ID so we're just passing in like a you know order ID of four or something and so what we need to do is we need to actually create the order so that we pass the right order ID of the newly created order but the issue here is that remember this order page this last page in the flow that we're not going to be using anymore this is the page that's creating all of this right it's doing all of these orders and right now the flow is a little different right because we're we're not getting to this page because when we create a payment page we just wait for the user to complete the order and then when they're done we can create the order but if we do it that way then we need to do all the creation in build but we've already done it here right so another thing that we can do is we can create the order before they actually you know pay right so we can actually just save the order and when we and and then when they um pay for the order we can start the provisioning process okay so that way we just save the order if they don't pay no big deal we're never going to provision that order but if but if they pay we're going to start provisioning the order so that is something that you can do and for this we can just copy this action chain and we're going to come to this confirmation page in fact we can delete this page we're going to be deleting it in just a little bit but we can come here and on this flow here where we are passing this order ID before that we can actually create the actual order and then we're going to have the real order ID and so what we can do here is we can paste these actions okay so that way we can paste all of these actions and right now I just paste pasted one action and then we need to paste the other actions but this is a good start right because here is where we creating the order and remember we're setting the status to new okay it's only after they finish paying that status is going to be started right if they don't finish paying this is going to be a new order which is absolutely fine and here we can come over here and what we can do is we can say action Output New Order and we can get the ID here okay and so right now we're just creating the order we still need to create the order items which is what I'm going to do next I'm going to come here and I'm going to go to order and I'm going to come back here I'm going to open this up and what I want to do is I want to copy this Loop right so I'm going to copy Loop actions right that's it and there's a snack bar which is fine so I'm going to come back here confirmation open this up and what I'm going to do is I'm going to paste actions okay so now we have the loop which is creating the uh the order items right so we've created this and this thing is complaining because we don't have this Loop index and I'm going to create it right here it needs to be on this page I'm going to say uh loop index that's for the for the loop and it's never going to be nullable it's going to be initialized at zero and then we're going to come back here open this up come back here and we have this Loop Index right there's the loop index confirm confirm that looks good we have a bunch of Errors what's going on here time from okay so we have this time frame and let's take a look do we have this time frame um okay so it's actually here right there they're no longer parameters they're actually widget State values so I'm going to come back here and let's go ahead and fix it one by one so this time from is going to be the um it's actually going to be time slot pick data structure field from okay because it's thinking these are parameters because we we used to we used to be on on another page now we're you know we're on this page we're not passing them as parameters so we need to clean them up a little bit so time two is going to be the same thing page State time slot pick data structure two let's go ahead and fix this delivery date delivery date well delivery date I believe is just a wiget state calendar selected date Okay order ID it doesn't know the order ID well we have the order ID right this is just action Output New Order row ID this is the same ID that we're passing product ID product ID is Loop index Loop index and quantity same thing Loop index I think is the issue yeah there's Loop index price and same thing it's all these Loop indexes even though we have it but you know was from a different page so it is complaining and here uh we need to update page State and we're updating our uh loop variable right so we're going to come in here Loop index we can remove this and we're going to say increment one okay and that's it and so what's happening here is lots of things happening we are creating a new order and then we're putting in all the order items right and the status very important it's just new right we're not provisioning it and then we are uh taking that order ad of that newly created order we're passing in the price and if they you know pay for the order right if they process if we process their payment a bill Chip is going to up update the stat us to start it okay this is important okay and so now let's let's try out this whole flow with the dynamic order ID and see if it works all right there's the app we're going to add a couple of items check out we're going to select 27 10 to 12 is a good time place order is going to generate the checkout there's the checkout I'm going to enter my information real quick let's do that I'm going to pay and hopefully it will update the right order let's see if that works come back here here and we have a new order right order number five and it's started because we've created it and we paid for it okay so we've come full circle with the payment flow now one thing I noticed that we did not do before is we did not uh get the users delivery address okay so on this page we should be getting their delivery address and there's actually a really cool way to do that right we can have an order complete where they start typing an address anywhere in the world and it's going to fill it in completely for them and we're going to know like the geo coordinates and all of that and so the idea is we're going to have a input box and they're just going to fill in the address free form right without like you know the city state and all that and we're going to get the address and so we can do that using these apis so Google has really good apis called uh places API that we can use and so if you can check it out here you can see that I have a full API you can send pretty much anything city state and it can get you a complete address it can get you just the city the state whatever you want and in our case we're going to be getting a complete address okay so you can kind of learn more about this right on the Google Maps platform you need to get an API key as well and so you can just Google for that and and you also need to make sure that you have enabled this places API and then when you do that and as you can see I have my API key here you can enter an address and you can just enter the language and all that enter the key and when you execute this right here this API you're going to be getting matches right so we have here 770 vaness Avenue which is an address in San Francisco and so here we have San Francisco if we scroll down we have South vaness Avenue we have Fresno California we have Los Angeles right so vanas is not only in San Francisco right it's actually a popular city uh street name that you you can find in all kinds of different cities okay so what we can do is we can build a component an input um input uh field that does this in the background and as a result it's going to order fill it's going to order complete the addresses for the user so let's go ahead and do this right now let's jump into our app right here and let's go ahead and add a input box here that we'll do that right so I'm going to add it right here and I'm going to say uh text field here and we're going to drag it uh to a uh to a needed position right here so I'm just going to put it let's see maybe right here okay so that not exactly like this let's go ahead and try that again so I'm going to put it I'm going to put it at the top right now okay and let's let's get it working and then we're going to move it uh towards the middle somewhere or we can just leave it here okay and so next thing I want to do is I want to come here and I want to do nice padding to it I'm going to scroll down and I'm going to do an outline here I really like that so here they can just type in their address okay so let's go ahead find this label uh type your address and the idea here is they're going to type something we're going to do an API call in the background that's going to fetch the results and display them here now to do this dynamically we want to store what their typing right their input so that we can rebuild it automatically okay and so we're going to create a page variable here called uh address address yeah just address this is going to be a string and it's going to be nullable right so if they don't type anything it's going to be a null value okay we're going to save that now what we need to do is we need to create an API call that is going to feed data here and so what we're going to do is we're going to create another API here we're going to do this add another API call and this is going to be called get addresses now I already have this API right here this is the same API call that I just showed you in Google you can simply use it it's from that places API so we're going to just copy it it's a get request but we have a couple some parameters here so this is going to be the input here and this is obviously going to be dynamic so I'm going to say input and this is going to come from a variable going to create a new variable next we have language I'm going to put it uh English us this is going to be here string and we also have the key okay and this is a key that you need to get yourself right here you can just paste that there this is a string add call and we need to configure our variable here right this is the input right here now you can click on ADD call well you need to configure this right here oh we need the values okay so let's go ahead and populate the values cuz these are set here and we need the key Okay add call okay so now we have the call and so now we can test it out right you always want to do that so if I type 770 vs Avenue and we go ahead and do test we're going to get results right so we have these predictions we have this one here 770 vs and Francisco then we have Fresno etc etc so now what we need to do is we need to capture the data that's important to us okay so what kind of data is important to us well first of all uh we want to get so if you take a look at the request here you can actually view it right here it's a lot better what do we want well we want this thing here we we want the actual address right another thing that we I want is uh main text and secondary text right cuz this is the the street and this is the city and all the other things this can be useful for us and also the place ID can be useful for us because this place ID can be used to get the coordinates okay so I'm going to jump back and I'm going to go ahead to fetch the stuff that's important to me so let's go through this we have this main text I'm going to save that that's the first part and then I want the secondary text this is the secondary text and then I also want to get this is what I want to get I want to get this description right here okay so let's go ahead and label these this is uh street street addresses this is uh whatever City address and this is just full address okay now we're going to hit save and now we have this information okay so now let's go ahead and create the logic okay so we have this page State variable okay and the purpose of the pay state variable is to rebuild this widget as the user is typing stuff right so what I'm going to do first is I'm going to feed it with data right so we're going to come here we're going to add this query and I'm going to do a um API call I'm going to select this get addresses I'm going to add the variable the variable is going to be this input and it's going to come from our page State address this is what the user is typing and the page State variable is going to be updated with this action here so we're going to open this up and it's not going to be on submit it's going to be on change cuz as as the user is typing stuff it's changing we want it to feed we're going to update the page State variable okay so we're going to update this set value um set value on the widget state by from the widget State okay now the next thing that we need to do is we need to get the aut complete working right thankfully these sex Fields they have Auto auto complete built in okay so if you scroll down you have this order complete we're going to enable it and we are going to set up our op options so we're going to go to this uh get response and we're going to select this full address and that's it okay now we're going to have these order completes uh these choices and you can select it and it's going to it's going to set the address there okay now let's go ahead and start our test session and see how this looks all right here's the app let's go ahead and log in all right we have logged in let's go ahead and go through the flow add this let's say three units view card check out and here is our address okay so now we can start typing so let's say I type 77s and here are the results okay so as you can see there's you know Washington DC mle Fresno Etc so if we select one of these we have the full address so this is a really really nice flow I always love seeing this functionality uh whenever I'm you know shopping or buying things and I need to fill in the address I love you know seeing this functionality uh because it means that I don't need to fill out like you know 10 different fields right so I can you know I can type something like 35 and you're going to see various addresses so like Collins Avenue and here you see Spring Valley New York Bahamas uh Port Monmouth New Jersey and you can select that and it's filled in okay so this is really really nice and so what I want to do is I want to be able to save this address and I also want to be able to save the place ID in case I need to get the coord okay because remember we get this place ID here right so we get this place ID right here and we can use uh that to get the coordinates so that we can display it on the map if we need to do that okay so I'm going to jump back and I'm going to go into my super base here and I'm going I'm going to take a look at orders and as you can see I do not have the address field so I'm going to get I'm going to add another column here I'm going to say address this is going to be text and that's it okay and so this is where we're going to be storing the address information here and we can also store the reference in case we need to look it up and you know get coordinates so I'm going to say uh address reference or address yeah reference and this is going to be another text right here and we're going to hit save all right so now we have two extra Fields address and address reference so we need to make sure that we are uh saving this information right and where is it going to save well I believe it's going to save here and it and it will save here so we don't really need to do anything we just need to fill it out the user enters it we get all this data and we can just save it here now we also want to make sure that this field is required right they need to enter their address and so the way we do it is we can wrap this in a form okay so we can come over here and do form validation here okay and here on the form we can do we can specify validation right so that needs to be validated right field is required please choose an option etc etc right so that's going to make sure that it's validated there's also a couple of other things that we can do here you can show clear uh field icon you can also specify the update delay right so how how soon do you want to do that backend call after the user types something right so you can check this out so you can put something like I don't know 500 millisecond something so that's half a second so if I type something in a half a second it should refresh it and there's also a couple of other things that you can make it a little bit nicer you can do this dense kind of does this pretty cool effect and so now if you reload this test environment we should have this validation to make sure that the uh you know the the field has some value the user actually enters this address all right come in here at view card check out and now type your address okay so it says here field required which is important so I can type 770 vs Avenue and now we see various options right so I can pick this or I can type 35 columns Avenue and now I see the options here okay so you know this works all over the world right this is not these address uh this address search is not just limited to the US right all over the world you can type uh you can even type Madrid if you want so if you type Madrid you can just pick Madrid Spain okay so but you obviously need a complete address and so you can type any address that you want and uh it will work so if I type something like 50 Washington Avenue that's that's got to match somewhere you know okay so there you have it okay and so here you have the complete address okay really cool and now the only thing that's left is to save this field so let's go ahead and save it and we can do that right here so we're going to be adding a back and roll but we need to refresh our super base schema get schema come back here open this and we can just add it right here let's go ahead and address this address right here and that's going to you come from which estate okay type your address okay so that should save it right there all right so let's go ahead and reload our app let's test the entire flow and make sure that that that order is being saved we're not going to be doing the payment right now so that order is going to be in the new status but at least I just want to make sure that the address is saved correctly all right come back here at this view C check out let's do there's the address let's do Saturday delivery 10 to 12 place order all right so now let's go ahead and check out if that address is saved and it should be saved right here okay so we have this new order and it is saved right here and then later on we can get the reference when we need it right for different purposes but at least the address is being saved correctly all right so now we are in the final home stretch here okay we're almost done I just notice that when they place an order when the user places an order it's a there's a feature where that the displays that the order is in progress and that's on the homepage okay so that's what we want to do next and still a couple of things to do and we're pretty much done okay lots and lots of things went into building this app just a couple of last things okay so let's go ahead and create this container here on the homepage that will be displayed if there's like a new order right a new or started but not like a finished order right cuz when the order is finished um there's really no reason to display it okay so if you go to the homepage here what we can do is we can display it here right before the list of items okay and so we have here uh we have our stack we have this First Column we have this container and so I believe it's being displayed yeah it's just being displayed underneath the search bar and so what we want to do is we want to add another container just um just below this and above this okay so I'm going to come here I'm going to do a container and I am going to drag it to the top okay and we are going to put it right here for now for now and for now we're just going to leave this container here and what we can do is we can drop this other one above it okay so now we have this container and I'm going to rename it this is going to be disorder status container or just order status and let's go ahead and fix it up so I'm going to give it a well how does it look so there's actually a lot of things going on there's like an icon here so we need two columns with an icon in in this First Column and then a four um four rows in the second column so let's go ahead and do that let's add a row and inside the row we're going to have two columns okay so now we have two columns and this second column is going to be maxed out and this First Column is just going to have the icon so we're going to do icon icon here so obviously going to be bigger and here we're going to have three or four rows let's do three rows for now and we have have this order status let's go ahead and well let's go ahead and fix the icons make it a little bit bigger okay let's do a little bit of padding let's do a padding on this on the column okay that looks better and let's do padding from the top that looks better and let's do padding on this column that looks great and we can also do padding on the rows and for the rows I want to do padding from the bottom so something like this and let's make it make it a little bit bigger in fact we can remove the height and that's going to stretch out let's do yes we need to do it on all of this what we did we did 10 and yeah we don't need to do that all right here we're going to do text we're going to do text we're going to do text okay and let's go ahead and fill it in so what exactly do we need to do order ID so that's going to be the order ID this is going to be the status and this is going to be the delivery um the delivery slot and that's pretty much it that's all we need to do so here we need to pull up the order uh the last order for the person right so if they have a couple of orders which is going to be displaying the last order all right so here we're going to you know do a query do a super base query here and we're going to do orders and we're just going to get single row and we are going to have a filter the filter is going to get it by the user ID authenticated user ID and here we want to order them by create ad and here we have the filter so this is going to give us the orders okay so now we can display what we need to display and what do we need to display order ID let's do combine text order number and we're going to get our orders row next we're going to display prepare that's the status and this is going to be the time slot okay so here's going to be uh the status let's do a default value empty and here is going to be the time slot of that order so we're going to do time from time two okay going to do that and actually let's do combine and this is going to be orders time from and this is going to be time two like you can just search for it and I'm going to put a separator all right just a dash okay so now we have that and we need to make sure that this order status is only displayed if there's an order right so in fact we can do that here I don't think it gives us the ability to do that no it doesn't give us the ability to do that no problem we'll just do a conditional and the other thing that I want to do is I want to fix the way okay so something like this and let's do padding okay perfect and let's do a let's give it a border let's give it a border color how does that look that looks nice should we do round it yeah we should do rounded edges let do order status and let's do border radius of five okay that looks kind of cool that looks pretty cool let's also do it on the search let's do a padding on the search as well okay remember we have this column here uh to kind of push things to the bottle so we can display this thing okay that looks really good let's do conditional let's do a conditional here and for the conditional to work we need to get this order information before and so what we're going to do is we're going to get this we're going to cut it and we're going to do it at the top level it's only one order so it's absolutely okay we can just do it here we're just going to paste it okay so now we have this order we're going to display it here but we can do conditional yeah let's go ahead conditional and ERS row idid is set which is there okay so let's go ahead and run this out let's go ahead and reload it start a new session and let's see how it looks okay we have a couple of issues order number yeah cuz we moved the order the this um the query let's fix this this is um status and this is going to be text combo time from let's go ahead and start a new session and see how that looks no we don't have any errors should work all right there we go all right and there we go and so as you can see we're seeing the order here new and this is the time so we need to fix this right we definitely need to fix this uh I think it's yeah it's in 24hour um standard so we need to we need to fix it a little bit but this is order number three and if we jump back into our super base uh we're actually displaying the all disorder okay so we need to display the last one so I think we have the sword incorrectly there so let's go ahead and take a look order status uh this one right here here yeah it's set to yeah it should be decreasing right that should give us the last one first and that's what it's trying to display now here let's come back here to our this one all right so we need to fix this this is a text combo and so it's time frame so what we can do is we can add another one this is going to be the current date right cuz we have the date uh created at and we can display um you know Friday you know we can do it like this and then we can do another one put it right here space it and this time from time from yeah and so that way it's going to display the date and it's going to be time from time to okay now here we can also you know add the um the formatting right so what we can do is we can come here we can put that there and we can do this here and this is going to be like this 0 0 0 0 okay lots of stuff happening to get it just the way way we want let's go ahead and reload this and see how it looks all right looks there you there you see it right Friday April 26 actually that's the the order that's when the order was created right actually the date should be different so if you jump here we have this delivery date right that's what we should be using Okay so let's go ahead and fix that uh this should be not the created ad but the delivery date and as simple as that but everything works good right um you know there's a spacing there and you know you can kind of fix it but you know if we reload this it's going to display the delivery date and delivery date was the day after Okay so let's go ahead and relay uh refresh this rebuilt our app here and there you see it's Saturday 10 to 12 okay and this is military time okay in our case new order number six this is the last order cuz at this point we were testing and we have a couple of pending orders right so we have all of these orders I'm just displaying the last order uh because that's how it works the app the app should not allow you to play multiple orders right if I if I order a bunch and you know let's say I'm waiting for the order it's just going to display the last order okay that's kind of how we have it you can display multiple orders you can just display a list it's up to you how you want to do it if you want to display a list then you know you can just what you're going to do is you're going to come here and you're not going to be doing a single order single row you're going to do list you're going to select list of rows and that way you can just list them here if you want right you can just list them as a list that wraps inside this order status very very easy but apart from that it looks kind of clean all right so let's take a look so we have this order now if I delete the order it should not be displayed so what I'm going to do is I'm going to come here I'm going to delete all my orders I'm going to delete order items first and I'm going to delete this right here okay and so now if I refresh it I should not see it okay so there you see it you don't see it anymore because you don't have that order anymore right but if I create the order if I come back here view card check out let's say I won a 28 12 to4 I type my address 770 vs Avenue and we have this now this is cool okay there it is you see as I'm typing it knows it right so right or I can even type San Francisco so I can even type San Francisco here San Francisco if I want but that that doesn't really make sense so look at that 770 I start typing it sees it okay I can select it right there place my order okay and now if I go back I should have this order right here so we have this order here 12 to 14 status new and if I go back to the app so let's say I reload this I should see that pending order okay and there we have it so we have this order uh we do need to format it um I'm not sure I'm a big fan of this text but that's a UI thing right that's something you guys need to decide right the functionality is there it's displaying it it's not going to display it if it's not there very very clean one last thing that I want to do is um I may want to display the orders here so what I'm going to do is I'm going to create an option here to display orders one last thing here let's go to profile and I'm just going to do orders here just going to change this and I'm going to delete all this well I'm going to I'm going to you know what I'm going to leave these I'm going to leave these maybe you guys want to change it okay I'm just going to leave this and what I'm going to do here is I'm going to link it to another page that's going to display the orders okay so I'm going to create another page and let's come here let's create a new page blank page order history okay one last thing and this is going to be our order history and we need a back button so let's get a back button uh button color this thing here remember it doesn't show up I mean it's there it's going to be there but for some reason it doesn't show up so this is the background color and this is the button color so I'm going to make it white okay and it's going to be there okay so we're going to see this and this is going to be the order history and what I want to do is I want to have a list and I want to take the uh this thing here I want I want to use this thing this order status container I'm going to copy that I'm going to go back to order history come back here right click paste and we have this and now we can display all the orders so this list view is going to do a super based query orders and this time we're doing list of rows and ordering is going to be uh we're going to order by uh created ad and we're going to decreasing so the new orders are the latest orders are going to be first okay so in this case pretty much it right it's going to do this query and now let's go ahead and feed it with data status status empty and this is this combo here this is the delivery date this is time from and this is time to we have a couple of Errors ah we don't need this we don't need conditional anymore okay okay and that's it order history is just going to display all the orders and you'll be able to go there from the profile page okay let's see how this looks let's go ahead and reload our app all right we have a pending order this is our order we're going to come here come back here oh we forgot the link so we're going to go to our profile and we're going to do this on this container level going to do navigation let's go ahead and reload this all right click here all right here we go come back here now we have this orders and we have this one order that's the only order we have cuz we deleted everything else okay and so if we create another order let's come back here and we're seeing this order right we need to kind of fix it up we we create another order let's say this is 8 checkout and this is 27 this is in the morning and this is the page by the way right so it's redirecting to the page to complete the order and it's going to update the status you guys remember all that right so if I don't do this it's going to be new okay so we have this new order here right and so if we go back to our app and uh we forgot the address right and so if we reload the app come back here go to orders we see two uh two orders here right we see uh order number eight and order number seven here okay and there you have it there you have it now obviously there's lots of other things that you can do but it's just a question of what you need to do right what I wanted to do I I accomplished right we have this nice kind of overlay here all the different features is right but you can take this uh as far as you want but this is going to be a good start and plus the most important thing is that all the techniques that I talked about here you can use in any app that you want right my point is to show you how to build a complex app but to also show you some techniques that you can take put them in your toolbox and you know leverage them in in all kinds of apps right because this is cool you got to admit I really like this I like some of the other techniques that we've uh implemented and we were able to implement everything that we wanted to implement right from this overlay to the the uh shopping cart to the searching to you name it right uh to that uh address look up order complete you name it everything is there and so now it's up to you how far you want to take and so what you want to do is you want to clone this app and you'll be able to do it when you become a member of our amazing patreon Community you'll be able to clone this app tweak it learn from it leverage it continue building it do whatever you want you know the world is your oyster as they say you can do exactly what you want and that's not all when you join our amazing patreon Community you can ask any questions about this app our community members and myself will try to help you out if we can and you also get access to pretty much every other app that we have on this channel so it's not going to be just this app all kinds of apps that I have launched that I have U made tutorials about on this channel are already there uh on our patreon page and that's not all you're also going to get access to extra content such as q&as behind the scenes our patreon supported Master Class series that where I do deep Dives on specific topic that the community votes on right so these are not just random videos these are actually deep Dives uh what the community wants to know about and these are very these videos are very very different from the videos that I have on the channel right these are more kind of Raw videos where I talk about you know different things where I walk you through the different processes and then answer questions and and uh try to help you out as much as I can so you're going to get access to that you're going to get access to all the apps you're going to get access to this complex app all the other complex apps that I've launched on this channel plus you're going to be supporting this Channel and supporting my work and we're going to you know you know build amazing apps together using your feedback using your knowledge we're going to learn from each other and we are going to take together collectively we're going to master no code and and build continuously build better and better apps and so if you're serious about no code you know if you want to take it to the next level you want to build apps with it you got to join our amazing community and start participating start getting value from it and additionally definitely check out my trainings right mastering flat flow and mastering super base you need to master both because flut flow is the tool that we're using to build these apps and super base is our back end right it's our base this is what I use for all my complex apps and pretty much all apps I use superbase because it's so easy to use it's so intuitive and it's extremely extremely powerful it's not just a database you can do so many other things with it and so check out my trainings mastering flutter flow and mastering super base and when you join our trainings you'll also get access to our private Community where myself and other community members will be helping you out and so you know don't just close this video don't just you know stop all this there's a lot more things that you can learn there's a lot more steps that you can take check out our patreon and check out our amazing trainings that are going to take your knowledge of no code to the next level

Channel: James NoCode

Views: 9,685

Keywords: flutterflow tutorial, flutterflow grocery app, stripe nocode

Id: QikTDU4DDAU

Length: 275min 44sec (16544 seconds)

Published: Sun Apr 28 2024