Bitesize - Mastering #FlutterFlow Loops inc Code Expressions

[Music] so depending on how long you have been using flut oflow for you may have come across Loops or there is a need to use some kind of loop mechanism in your own flood oflow project now a loop is just a very simple way of iterating over some actions with inside flood oflow until a particular condition is met and in this particular video I'm going to show you a couple of examples that you can then take away and apply the same technique in your own applications okay so on screen at the moment is a very very simple flood oflow application with some basic widgets set up there's nothing special going on at all but I'm just going to point out this particular one here the fruit column now this is really just a column that has got some Dynamic children set against it and that is a page State variable so what I've got up here is I've got the dynamic children set up here which is fruits and this is mapped to a particular uh page State variable called a display list which is empty at this moment in time if I move back over to my homepage and I move to the page State variables you can see here I've got two lists I've got the display list here which is the empty one I just mentioned and I've got this one called fruits list the fruits list has got a list of a number of different kind of fruits here there's about 18 of them now the objective in this particular video is to show you some samples of moving data from the fruits list into the display list and that display list will then be reflected here with the changes that we're going to make and we're going to activate all of those changes by using these three buttons here and what we're going to do do is we're going to build out the logic in these particular buttons to do exactly what we're asking the buttons to actually do okay so to work with our Loops I'm going to create some page State variables now the first variable I'm going to create is one to track the total number of items that is in our fruits list this is the amount of times that we're going to need to iterate over our Loop so I'm going to just going to call this one uh total here and I'm going to give this a type of integer I'm going to take off the nullable and I'm going to set this to be zero and the reason why I'm putting an initial field value in there because it allows move inside flood flow so when I'm manipulating the page State I can then select reset as an option and that will set it back to zero so hit confirm now I need to create another page State variable this one is going to be called current which will uh track the position that we are with inside our Loop so as we iterate over our Loop we we're going to increase this particular account by one so let's just choose the type here choose integer I'm going to take off the nulli again and I'm going to set this back to zero and just hit the confirm here at the bottom so that is the page State variables all set up we can now move into the logic um we can now start implementing that with inside this first button here okay so let's choose our all fruits button here move over to the action flow editor hit open and now we can create our first action which is going to be kind of resetting the page State variables in this particular example we're going to kind of make sure that every time we hit this button we reset the UI back to how we would like it and then we can then add the loop so just choose add action here just go to the state so just going to do a search for state and I'm going to update the page State variables choose the ad field here now the first one I'm going to set is the total I'm just going to Simply choose reset and then choose ad field here and I'm going to choose the current and I'm going to do reset again and remember we set that default value to be zero so it's going to reset it back to zero and I'm going to go to the ad field again and I'm going to choose our display list this is the list that we're going to build with inside this Loop I'm also going to reset that back as well so that will kind of remove everything from with inside it okay so next up we're going to add the most important part here and that is our Loop so hit the plus here choose add Loop now the loop is going to work by matching a particular condition the loop is going to kind of work its way around until a particular condition has been met then when that condition is met the loop will then break let's Now set that condition up using those page State variables that we created earlier so let's move over to conditions here choose a single condition and the first value that we're going to choose is our page State variable called a current now this is what's going to track where the the position we are with inside this particular Loop now what we're going to do in this particular Loop is we're going to increase this by one every time the loop goes around until it hits a particular condition so choose confirm here we're going to say all the time that our Loop is less than the total number of items in our fruits list then just keep iterating so just choose the value here go to the page State variable we're going to go to the fruits list and with the fruits list we're going to capture the number of items so choose a number of items so let's say we've got 18 items we know that this page State variable is going to be loaded with that particular number of entries so just hit confirm so that's the kind of the uh the actual condition that's set in place we can now start working with what we basically need to do at this particular point in time with inside our Loop so what what the idea of this particular sample is to move uh a number of fruits from one list to the other so I'm just going to choose our page State variable here I'm going to move up here and I'm going to choose the state option again so just type in state here update page state I'm going to add the fields here now what I need to do is I need to um load a fruit a uh a the first fruit in my list because it's the first point in the entry of the actual Loop and of course I'm going to move 1 2 3 4 so I'm just going to choose the display list and I'm going to set the update type here I'm going to say add to list the value to add will be the value that's coming from um the uh the correct position with inside our fruits list so just choose the page State variable choose the fruits list here now the available options here we need to check we need to select this we are going to say the item at index now the index Position will be a specific index and where is it index going to come from well of course it's going to come from our current uh sort of page State variable so just select that and say page state variable and we're going to say uh current like that now if you've been a programmer or if you've worked with programming you'll kind of know that lists are kind of zero index based now what that means is if You' got 18 items in there the first item will start at zero and the last item will be 17 so we're always going to pick the first one up which is going to be zero in our case so it's okay to handle that so we can just hit confirm here we've kind of got all of that wired up we are now going to capture the very very first fruit if this our first iteration and we're now going to place that with inside the display list but what of course we need to do with inside this Loop we need to then increase the current uh kind of value and our pay a variable by one each time the loop runs so just hit plus here go to add action do a search for State here and we're going to update the page State and very conveniently u in flood oflow we can do this really simply by just choosing the current here and go to select update type and you can see we've got this increment decrement now I'm going to keep this as one because I'm just going to go um one every time our Loop iterates but it is as simple as that so I can now hit close now and I'm going to fire this up and I'm going to show you this hopefully working okay that we haven't made any mistakes okay so here we are then in local run hit the all fruits button and there we go we have all of the fruits that's move from one list to the other let's move on to our next example which is the starts with okay in our next example we're going to pull out all of the fruits that begin with B so we can use a code expression in this particular example so if youve not used code Expressions before then do stick around but firstly we're going to go to the all fruits button here we're going to click open we're going to copy this particular action chain cuz we're going to reuse this now with inside the starts withv so with that selected boosted the action flow editor let's paste all of those actions in here so what I'm now going to do now is add a brand new conditional block so just hit the plus here choose add conditional and I'm just going to close that down for a second because what I'm going to do is I'm just going to select this one here I'm going to cut this particular action and I'm just going to paste that in here I'm going to come back to that very very shortly let's move back here let's now start working on this conditional so let's choose the conditional action I'm going to move down here to then the code expression now this code expression is going to return back to me a kind of true or false it's a Boolean expression now I'm going to choose the add argument because what I need to do is I now need to pass in the first fruit with inside the loop I'm going to check to see if if it starts with B if it doesn't then clearly I'm just going to return back or false but if it's true then I'm going to want to add that to my list so I'm just going to choose this option here I'm going to give my kind of my argument a name this is the value that we're going to pass in which is going to be the fruit name itself now the value this is going to be very similar to what we did before we're going to go to the page State variable we're going to go to the fruits list we're going to go to available options we're going to say item at the index choose the list index option it's going to be specific index and of course this is going to be our current page State variable this is the position that we currently are with inside our actual list itself so hit confirm and then we now need to move down here to then this particular expression now um if you've done any kind of research for inside kind of sort of flutter itself you're going to kind of know here that we can actually put kind of like a code expression in here and I kind of encourage you to kind of Google different types of kind of Expressions that you can use here I'm going to use a string expression here so what I've got here is I'm just going to reference my fruit name just up here so this is the fruit variable that we're kind of creating here and I'm going to I'm going to gain access to it by typing in fruit now with inside uh flut itself inside the kind of dark language you have something that it's called starts with and I'm just going to open that up there with a uh kind of an opening bracket hit a single quote and I'm just going to choose uppercase B and then just a single quote and then just with a closing bracket there so I'm going to basically say that if any my FRS start with b then return true otherwise you'll be returning false so just say check errors like that so that should go away and uh do a quick check and then say no errors so I think I am good here as you can see here it's returning type Boolean and just hit confirm now I have that code expression in place it's going to come down here it's going to do that check if it starts with B it's going to go down here if it doesn't start with b it's just going to ignore it and then carry on and then work in the next iteration so of course I've moved this page State variable down here now this is we don't need to make any Chang to this because we're just adding the uh current kind of loop item actually into the list itself so that's all good so we just hit close we can quickly flip to the Run mode and let's quickly see if that's working okay so here we are then back in the Run mode let's hit the starts with and there we go we can see all of our four fruits that begin with b and you can see as well that we've cleared down the the fruits that we had from our previous run because of course at the beginning of our action we are resetting all of those page State variables so that's all running so let's now move into to our third example where we are going to work in our Loop in a slightly different way but in kind of reverse okay so as we did before go to the all fruits button here go to the actions and let's just copy this here we're going to reuse all of these copy the action chain hit close go to reverse move over to the actions open and then let's just paste those actions in there so because we're going to work in Reverse we're going to bring a kind of a completely different order to our display list what we need to do is we need to create a code expression up on the update page State because what we need to do is we need to identify how many items do we actually have in our fruits list we then need to set current as that number of items but of course we need to kind of minus one because as I said before a few minutes ago um everything with inside um flood oflow and um in probably most programming language is that lists begin with zero so we need to remove one of the total number now what we're going to do is we're going to create another code expression to set that value for us so just with the current option here what we're going to do is we're now going to instead of resetting the value what we're going to do is we're going to set the value so just choose set value go to Value to set we're just going to scroll down here and we're going to choose code expression so choose add argument here just select this I'm just going to call this items like that now the type is going to be then an integer here and we're going to choose the value so I go to value and what we're going to do is we're going to grab the page State variable we're going to go to the fruits list and we're going to get the to total number of items in that list and just hit confirm once we've got that we can then take our items down into our expression and quite simply all we need to do is to say items and then we're going to say minus one like that so just going to take one off of that check for errors so as you know we've got 18 items so what this will happen this what this will basically do is it will set the first current uh sort of value to then be 17 and we're going to work all the way down to then the zero so just hit confirm like that that is our page State variables all set up so next what we need to do is we need to change our condition that we've got here in our Loop so just with the one that we got selected just choose that here let's make some changes here so I'm just going to expand those out here just so we can got a little bit more room here right now everything in current is absolutely fine but what we need to do is we need to change this particular one here so we need to say the actual option is going to be greater than or equal to like that and then the value that we got down here here all we need to do is just clear that so just remove it and put zero like that so this is going to start at 17 16 15 14 Etc it's always going to run this Loop while everything is greater than or equal to then zero as soon as it equals zero then our Loop will then terminate so we'll kind of get the the very very last item from our list here when it hits zero but anything less than that we're moving to negative territory and our Loop will be broken at that particular point so just hit confirm and then that is all that we actually need to do so we're now going to um oh sorry there's one more thing we got need to do actually which is really really important and that's on the final update page State CU what we need to do is we need to select this instead of incrementing we then need to uh sort of decrement we need to remove one off so like I said we're going to start with 17 and this is going to send it to 16 and then of course then 15 14 and so forth right the way down to zero and then of course then the loop will break so that's it all we need to do now is close this we can do our final test in our application we should see all of our fruits in reverse order okay so back in local run let's hit the reverse option and there we go all of our fruits are now in reverse order if you recall the apples was at the start if we go to all fruits here you can see there it is with then grapes at the bottom so you can see we got everything there perfectly set in reverse order please come and join the digital Pros private no code academy the link is in the description

Channel: The Digital Pro's NoCode Academy

Views: 1,633

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, flutterflow loops, loops, code expressions

Id: SGpgBqSMGUY

Length: 14min 55sec (895 seconds)

Published: Mon Apr 15 2024