FlutterFlow Reactive State Tutorial: Make Your App More Robust and User Friendly

now in today's video we're going to be talking about what I feel is the most important part of building no code apps and that is the state and so in today's video we are going to be discussing the allmighty state when it comes to building apps with flut flow and by the end of the video you will learn how to build more robust and easier to use apps than ever before now before we get started as as always all the apps and all the resources that I demonstrate on this channel are going to be available to view Andor clone from my patreon page and you can learn more about our amazing patreon Community using the link in the description below the video now what exactly is App State okay so here we have a very very simple diagram that aims to explain exactly how everything kind of comes together okay so here we have a user and here we have the UI and this is the part where the user interacts with your app okay now behind the UI you're going to have a logic layer and this is where all the calculations all the you know all the business logic all the little tweaks the rules the various conditions are going to be coded and here at the back end you have your database and back end and this is a very very simple layer this is essentially where your data is going to be stored and so essentially your app is going to be reading and writing that data okay and typically this is going to be like things like fir store uh from Firebase or you know super base or something else okay now what ties everything together is something called a state okay we can also call it application State okay app state is very very important and I like to call application State kind of like you know the bloodline of your app okay okay so just like with a human body you have the blood that you know constantly shuttles different nutrients you know into the body and then takes the waste out of the body this is exactly what app state is it's it's every it kind of connects everything together and it serves lots of different uses and in fact if you do not understand App State very very well and you do not know how to leverage it when it comes to building just about any kind of app you know from very very simp Simple app to very very complex app not only is it going to take you a lot more time to build the same app that you could have build you know a lot faster but you're also going to struggle a lot more and your your app is also not going to be as reactive because appstate can make your app a lot more reactive okay so appstate is very very important and instead of kind of talking about it here theoretically and looking looking at diagrams let's go ahead and jump into a flut oflow proof of concept app that shows you how to you can leverage different levels of App State Wizardry in order to make your app a lot more robust and easier to use all right so here I am inside of flut oflow which is my favorite no code builder of choice and I'm going to be showing you progressively more and more powerful techniqu techniques that you can leverage with App State all right so in this first demo I want to show you a quintessential example when you're going to be using App State and that is when you're going to be building something like a shopping cart okay so in this first page we have here we have a very simple shopping cart that uses App State combined with a data type that lists three products here with a bunch of different attributes so we we have the name of the product we have the quantity here and we have the price of this product so let's go back into flutter flow and let me show you how we have implemented that so the first thing that we need to do is we need to create a data type okay in order to hold different fields that are kind of bound together okay so if we go here in this data types we have this data type called item type and we have a bunch of fields for this data type so we have things like name price quantity and check delete which is going to dictate if you want to delete that item and that is something I'm going to cover a little bit later okay the next thing you want to do is you want to go to this app State here and you want to use that data type here to create an app State variable right and the way you do it is you click here and you call it something so let's say uh list of products or shopping cart if you want here you go pick data type you select your item type and then you want to make sure that you select is list because this is essentially a list of these products if you do not select list you're just going to have one product right and that's not going to be a shopping cart okay and that is exactly what I did here the next thing that I did is that is that I initialized three of these products here so we're not starting off with an empty App State okay although that could be a possibility in some situations here we have created this app State variable but we also initialized it to three uh kind of random products right so we have three products here and this is the first product this is a Sony a6400 camera this is a price and quantity and then we have another product this is an iPhone 15 Pro Max price and quantity and last but not least we have another product which is a laptop here MacBook uh M1 Pro 14in it's $2,000 and the quantity is one okay so we have three products that we're starting off with of course if you're going to be building a production app you know you're going to be loading this data from somewhere right you're not going to be you know you're not going to be creating just random products but for the purpose of this tutorial I am basically skipping that step okay I'm basically showing you once you have some of these products loaded into App State and once you have your app State loaded you can simply display them here so I have a list View and then what I'm doing here is I'm generating Dynamic children I'm just specifying my app State here and I have my items here and then for each item essentially I am using this data structure field right remember because we have this custom data structure so I'm pulling in the specific field and displaying it here so in this case this is name this is going to be uh you know quantity right we have quantity here and then we have price here okay so very very simple I know many of you have probably uh built such a page before I know I have when I build all kinds of different apps that use this shopping cart so now let's go ahead and let me show you a more advanced example here okay so if we go to the second page right here what we have here is we have a shopping cart but you can also select different items and that could be you know useful if you want to delete them right so you can click here and that's going to delete it but let's say you want to select multiple items okay and as you can see this thing here this button appears when we select at least one item and if we deselect it it disappears okay so there's lots of things happening here but what I want you guys to notice is that this value here this one here and this two this is also App State except in this case this is Page State okay and the difference between App State and Page state is that app state is throughout the app right this is the state that's available throughout the app whereas page state is only available on a certain page okay and so this is a good idea to do when you don't want to pollute your app State variables right if you have a variable that's only going to be available on one page on that specific page use page State and so what's happening here is that not only are we displaying this button here when we select something but we are also displaying this number so if I select two you see that two is over here if I select three that three is over there so there's a couple of things happening here yes the button appear here you know if we select something cuz if we do not select anything there's no need for the button to be seen but there's another thing that's happening here is that this thing is automatically rebuilt right you see how this this went from 1 to two now this goes from 2 to three it's automatically getting rebuilt and that's because app state is integral to making your app reactive right this is reactive you see how you click on something and you're getting a change this is called reactive development and you always want to strive for your app to be as reactive as possible and so if you think about it I could have left this out right I could have left this number out so I could have just had a button that says delete and so regardless of whether I had one checkbox or two or three this button would not change but I decided to make it a little bit more interesting by leveraging some of the reactive techniques here okay and that's with the help of App State so let me show you how you can do that so go back here that that is the second page right here and this is all the same except if you go to the top level of this page and you click here on page State I have a page State variable that's only available on this page here so only on shopping cart to I have a separate page State variable and here is where I'm tracking the number of items right I have num checked which is an integer and I am tracking the number of times that I've selected so if I select selected one you know this value is going to be one if I selected two it's going to be two if I deselect something or unselect something it's going to decrement is going to go back to one so how is this happening well if you select this checkbox here this checkbox has an action right if you go back here we open it up so I have an action on un toggled on and un toggled off right so if we go to un toggled on what am I doing I'm incrementing this num checked uh page State variable if you go to un toggled off I decrementing it by specifying a negative value okay so as the user is checking various checkboxes that value is dynamically getting rebuilt now there's something else that's very very important to understand when I am working with this page state or App State doesn't matter in this case this is Page State you want to make sure that you have this properly selected and remember I have this value that is you know dynamically being rebuilt or refreshed and so if we go back here I want to make sure that I have this selected if I have this selected no rebuild then that button is not going to change it's always going to be that same value okay whereas if I have this here anytime I change this you know anytime I deselect or select a checkbox it's automatically going to rebuild the entire page and that is why that button is going to have a new value it's going to have a new label and the same thing is happening here we have rebuilt current page okay so as you might have noticed page State and app state is not just for keeping track of various variables although that is very very important it's equally valuable when it comes to actually you know displaying various uh Dynamic data you know reactive programming and you're going to see that uh in some of the other examples right now okay now if you look at this demo right here while we can select different checkboxes and we have the number of check boxes being reflected here the problem with this demo is that it's not actually setting the individual item to be deleted right these checkboxes are not connected to any of the items these are just random checkboxes that I'm just listing on each of these items so if I were to click this button the app would not know which one of these elements to delete and that is because this checkbox here is not actually tied to a specific element now if you recall on this data type here this item type I have name price and quantity but I also have another the field here which is a Boolean meaning that is a true or false that will determine whether I want to delete that specific item from the shopping cart right so if you go back here it would be ideal to link these together and that is exactly what I'm doing right here so if we go to this next demo here if you click on this you see how it automatically selects all of these right and in this case when you click on this um select all items we are actually setting this specific field for each of these items right so if you were going to click on delete all it would know you know which items to delete or not because in this case all of these items are going to be marked for deletion now I can also click here and I just toggle them off and now we don't have the button and also the items are no longer displayed uh to be marked for deletion right whereas if I click here now these items are marked for deletion and that is because you can see that the items are in italic and there's also a strike through here so if I were going to click delete all and I was going to actually create the logic that would actually go ahead and delete these items that would be very very trivial because now each of these items has an Associated field that's automatically marked whenever I click this item right so let me show you how that is done so let's go back to our page here this is this third third demo right here and how is this implemented well if we click on this check box right here and we open up our actions panel we have un toled on and un toggled off and the flows are almost exactly the same except that un toggled on we are setting those items to be marked for deletion whereas un toggled off we are setting them to be marked not for deletion and so if I click on on toggled on what we have here is we have a loop that essentially Loops to all the items in our app State and for each of the item it sets that check delete as true and that is exactly what it's doing right so we have this Loop condition where the loop index is less number of items and then we are updating uh each item here and here we are incrementing the loop index and what is a loop index well a loop index is actually a page State variable right and anytime you're going to be building these kinds of loops and that is going to be the case uh whenever you need to modify multiple items so if you have a list of products that's being used as a shopping cart you will need to create a loop and you're going to be using a loop index so here I have a loop index which is just just an integer and the initial value is zero right you want to make sure you initialize it okay so if we go back here you click this the first thing that I'm doing is I'm setting it to zero I'm resetting the value because anytime I click on it if I go back here I need to make sure that value is zero again so before I start my Loop you want to make sure that you reset the value this is good practice okay so I'm resetting the value back to zero and here like I explained we have a condition and you're going to have the exact same condition Loop Index this is this Loop index is less than the number of list items and what is this number of items it's just the number of items in this shopping cart which is a list of products that we are storing okay and so as we are looping here for each of the items we are updating item and an index we're you know finding that specific item using this Loop index and the only thing we're doing is we're updating one field you can update multiple Fields if you want but it doesn't really make sense to update the name the price the quantity or anything like that when you really need to update the check delete okay so I'm making it true here and in this case un toggled off I'm doing the exact opposite so here I'm setting it false now another thing that I'm doing is I also have conditional uh visibility for some of the widgets I'm using a stack and inside the stack I have two rows that are going to be displayed conditionally depending on you know what's happening so I have row enabled row disabled row disabled is going to display it using uh this kind of format so italics and striketh through whereas enabled is going to be like this okay and so if you take a look at this row enabled it's just standard right so if you come in here row enabled we have here a condition that says that card item check delete but we're using the opposite which means that check delete is false which means that that item was not marked for deletion okay whereas here check delete is true right so we're not setting this we're just you know setting it we're just checking if it's check delete which means it's true okay and so what makes this little demo here different than this one is that in this case all we are doing is we're just tracking the number of times you know I have these items selected whereas here we are actually setting these delete um fields to be true on a specific App State product right so this is actually being done on the app stay this is not just a count of you know items or anything like that this is actually being done on the App State and last but not least we have this button and how do we know when we need to display this button well we need to be displaying this button when there's an at least one you know item here that's marked for deletion which means that there's at least one item where check delete is true okay uh that is when we need to display this button if you take a look here we have a conditional here and what we are doing is we are doing a filter and we're checking uh we're essentially telling flut oflow give us all the items where check delete is true and then tell us just the number of items like I don't care about the specific items I just want a count so if there's you know five items don't give me the items just tell me five if there's one item you know I don't care about the item I just tell me that there's one item right just give me the value and what I'm doing here is I'm getting the number of values where you know that are marked for deletion and I'm asking it to compare it to zero and if it's greater than zero that means we need to display this button because that means that at least one item has been marked for deletion and so unlike with the previous case where we just you know working with you know a separate page State variable in this case we are actually working with the App State together right we don't have a separate page State variable except that Loop index which is something you're going to have anyway but other than that we're working directly with the App State and so everything is completely reative there's immediate reaction as to what's happening not only all of these are marked for deletion but we have this button here here and if we were to define the logic for this button we would know exactly which one of the items uh that are marked for deletion that you know the items that we actually need to delete so this is the ultimate way of doing it but that is actually not all you can take this app State reactivity techniques to another level and make your app a lot more user friendly and robust so let's go ahead to this next page right here and on this page not only do we still have this logic that marks these items for deletion but in this case we can also update the quantity as well so let's say you have a shopping cart here and you want your user to update the quantity so as you can see right now we have a quantity of one for each of these items but let's say you want to purchase two of these Sony so I'm going to change this to two press enter and not only did we update the price automatically but we also updated the total quantity here right I can do the same thing here let's say I changed that to three now it's 3,000 and we have total quantity of six so that's 2 + 3 + 1 let's say I want to buy five MacBooks press enter we've updated this and we've updated the quantity as well now let's go ahead to this fourth page here and let me show you how this is implemented now because we have a field here that takes an input that is called a dynamic field and in flut oflow anytime you have a widget that takes an input and in other words this widget can dynamically change its value you know during run time you have to wrap that widget in a component okay so you cannot have just you know like a text input field all by itself on this page you have to wrap it in a component okay so here I have a component that I essentially wrapped a text input field so essentially what I did was I went here type text and added this text field here okay and as soon as I did that I have this error right it's telling me text field widget with the current config will not function properly when generated dynamically at the moment right and that is because this is a dynamic field it's taking an input it's not a text field here it's not a text widget it's actually a text field that takes a value from the user and so the next thing that you can do is you can rightclick and you can convert it to a component that is exactly what it did and this is the result so we have this component here and essentially a component is essentially a subset of your app that has its own State its own variables its own parameters etc etc so if we select this component here and you click on this edit right here edit this component you're going to see this component right here and this component only has one field and in this case we are essentially passing various parameters this component right so if I go back here to this component here we are passing to parameters first we're passing the quantity right so that when the app loads we can display that quantity as the default field in that component but remember we are not only going to be displaying the quantity we're also going to be taking input from the user and we're going to be updating our app state in order to update everything else on the page okay because if we are not updating App State we won't be able to recalculate everything else remember we also had that number of total qu quantities we had the price in order to recalculate all that automatically remember reactive programming and all that we need to update App State then and there and in order to update this app State we also need to pass in the item index because the way that this is going to work is that not only will that component display something but when the user enters a new value we're going to be updating that App State from this component here and as a result of updating that App State everything else is going to be rebuilt and refreshed and recalculated automatically and so remember we have this quantity and that enables us to display the initial quantity but we also have the item index that allows us to figure out which item to update based on its Index right now what is this item index well if you go back here we have this list and when you have a list you automatically have a variable that's provided by fla flow that you can kind of pass around and that's going to be the item Index right and it's typically index from zero so this is going to be item index zero this is item index one item index 2 and item index 3 okay so depending on which values that you are working with your system your app will know exactly what we're dealing with here and because we know the item index we can find that item in the App State and we can modify it we can do whatever we want with it once we have this item index okay so if we go back to this component the first thing that we need to do is we need to define various parameters for this component and we've done that here and now when the app is running what we can do is we can pass these parameters into the component so we're passing the quantity from the main page right from the main page as that quantity being displayed but we're also passing this index here and then inside of this component remember we just have a text field it's just a regular widget this is this input put field here we have an action here right we're going to open this up and on submit we're updating this app State okay so what we're doing here is we're taking this app State that's available throughout the app here and we're simply updating item at Index right we're specifying this item index that was passed as a parameter and here we're updating the quantity because that specific input field has to do with the quantity you know we're not updating the name we're not updating the description we're updating the quantity and so here we're just setting the value uh using the input quantity field that's in that specific component here and right here this is one of the most important things here right you want to make sure you get this right remember because we have so many things happening here right so if I change this to 10 you know we're updating this we're updating this you want to make sure that you don't only use rebuild current component okay because we don't want to just rebuild the current component we want to rebu build the containing page right we want to rebuild everything in that page from where the component was launched from okay so if we come over here we want to rebuild this page we don't really need to rebuild the other pages in this specific case and so you also have an option to do that rebuild all pages we don't really need to do that but we do need to rebuild the containing page the hosted page of this component so here's the component we need to rebuild this whole page because it's reactive right we're letting the user know as they're you know changing some of the variables we're telling them what's happening right we're making the app you know more user friendly we're making the app more robust because we want the user to know oh you have 18 items in your shopping cart maybe that's too much did you realize you have 18 items maybe they have a you know maybe they have a shopping cart with like 20 products and they just updated a couple of you know quantities and now they have you know 30 different quantities of products maybe you know maybe they don't want to do that right so maybe they're going to set it to one and now the price is 500 now this is down from 18 to 9 okay so if you want this kind of behavior you need to be working with app state which is exactly what we're doing here and in this case we have an extra level of complexity because inside of this list widget here remember this is just a simple list view here right we also have a field that takes an input and that is why we need to wrap that field in its own component and pass a bunch of values in there and have that component itself work with the App State and then after it modifies the App State everything can be rebuilt and as a result you see all the updated values and this is the pattern that you want to be leveraging when you're building your reactive apps now to close this off I want to show you one more example that you can leverage in your apps anytime you have this specific use case so let me show you this demo right here so if I click on this page it says here loading data so we need to wait a couple of seconds and once a certain number of seconds passed it finally loads this data and displays it here so let me show you exactly how this was built and then I'll explain some very very common use cases as to why you want to be leveraging this exact technique here this exact pattern here so this is this last page here this is demo 5 and what's happening here when the user navigates to this page we have here a delay and this delay represents some kind of a long running calculation so maybe you need to get some data from a cloud function maybe you're making an API call maybe you know you need to uh you know do something else in other words there is a delay right and because there's there's a delay you can't really display this data right away because if you were going to display this data right that you're waiting on you're going to have an empty page and when the data comes you're still going to have an empty page and the way that you can solve this problem very very elegantly is well you guessed it by using App State and in this case we're using page State because we only care about the specific technique on this page here okay so once the user now navigates to this page in this action we wait 5 Seconds which simulates some kind of a long running action like I mentioned and then what we're doing is we're updating our page State and once this page state is updated it's automatically displayed on this page and the page rebuilds itself and the user sees the content right so if you come over here we have this update page State and what is this page state in this case well it's actually very simple it's essentially a list of strings in this case it's a list of cities and so if we go back to this action here and we open that up what we are doing is we are setting that app state with a bunch of values in this case it's a bunch of cities I'm using a code expression and this code expression returns a list of cities so I have I'm returning you know a list of strings consisting of things like Los Angeles New York Miami San Diego and Seattle okay it's just a list of strings but you can potentially return just about anything depending on what your app needs it could be a list of custom data types a list of numbers you know you name it right typically it's going to be a list of custom data types because you're going to be displaying maybe a list of something uh but it could be just about anything and so once we set this page State we also need to make sure that our update site is set to rebuild current page because if you have no no rebuild you're not going to have that reactive Behavior so we're saying rebuild current page and so when that page state is set it's automatically going to rebuild it and here again I have this um conditional View using a stack I have a list view that's only going to be displayed once that page state has at least one item right so I have nist items which is this thing right here which is this page state so as soon as our page state has at least one item we want to display if it doesn't have it what we're doing is we're displaying this container here num list items to zero and this container just says loading data so let me go ahead and disable this and you can see that so by default before that data is actually finished you know calculating before we actually get this data you know whatever we were doing right there's some long running calculation it's going to take more than a second if it's going to take more than a second you need to be using this technique because you can't display this data right away because when this page loads that data is not ready yet okay so you need to be using this technique and so as a result this is being displayed first and then when the data comes back our page state is updated that page is rebuilt and automatically all the data shows so just like I said this is an awesome technique when it comes to displaying data that may take a couple of seconds or more so at least a couple of seconds for the data to be available and you want to display to the user so you can have some kind of a display that tells them loading data and then once the data comes in you can swap that for the list View and display the list view because once the page state is set that page is going to be automatically rebuilt and obviously all of these examples are just that they are examples of how you can use App State and Page state to make your app easier to use and and more robust and more reactive which is you know what users like they want to see things happening on their app without needing to click buttons and refresh the page and kind of navigate to to one page or another they want to see things happening as a result of them having to take a certain action right then and there and so if you were building apps but maybe you have been using page state or App State here and there but you haven't been using it to the fullest then some of the things that I talked about here are going to be very very helpful and the best way to leverage the things that I talked about here is being able to view and or clone this app and you can do just that from our amazing patreon community and remember when you join our amazing patreon Community not only will you be able to view Andor clone this app right here but you'll also be able to view and or clone over 15 apps that I built on this channel they're all there and I built apps that do just about anything in all kinds of different niches leveraging all kinds of amazing flutter flow techniques so if you're building any kind of app right now or you're planning to build an app in the future then you definitely need to join our amazing patreon community in order to take your no code knowledge to the next level plus when you join our amazing patreon commun Community you're going to get access to extra content such as q&as live streams behind the scenes content and our amazing masterclass Series where I do a deep dive on topics that the community vots on plus when you join our amazing patreon Community you're going to be supporting this Channel and supporting my work and that is greatly greatly appreciated so if you've been watching this channel but you're not yet a member then you're definitely missing out so make sure check out our amazing patreon community and consider becoming a member you can learn more about it using the link in the description below the video

Channel: James NoCode

Views: 4,777

Keywords: flutterflow, flutterflow app state, flutterflow page state, flutterflow app state tutorial

Id: ke9F2vZkLbo

Length: 35min 7sec (2107 seconds)

Published: Thu Nov 02 2023