** HOT ** #FlutterFlow Component Callbacks WITH Parameters - Finally!

so welcome back to another video on my channel where we're finally talking about component callback parameters a brand new feature in 2024 it's finally arrived inside flood oflow it's going to make your life so much easier when working with components let's get into the video and let's get [Music] cranking so let's just have a very brief look of the example in this particular video so I've got a book appointment button at the top there I'm just going to click on that and then that is going to show then a bottom bar now what you can see here is that we got a component here and then we got some child components with inside that particular component and of course here I can sort of look left and right I can kind of choose which one I want for example I might decide to choose Katy you can see here we got a little bit of kind of Animation playing out there we've got this now selected of course I could choose Bethany if I Chang my mind and of course I can then hit the book Now button quite simple that's just going to show that the stylus and I've just said number two here has been booked so this is a very simple example there's a reason about going on with inside this example so please do check the link in the description if you'd like to follow along on the setup of this particular application it's not a full sort of design walk through because you're probably here for the detail so I'm going to focus on that but of course if you're interested in the final project that is available with inside the link in the description as well so let's get over to flood of flat and let's start now dissecting this and putting this application together okay so let's just quickly orientate ourselves then with this basic project so this is really just a a styled up flow project there isn't much going on we're going to kind of add to the interactivity as we go along so this is the homepage got a component on here you you press on the actual component and it's going to display a bottom bar now inside that Bottom bar there's this book appointment component this is standard widgets here we've got a row here that's got another component with inside and that of course is going to be a list view that's going to have a number of children so all of the the staff members that's going to be with inside this particular component is all going to come from the application State and that has just got a series of hard coded values in there you'll see this here we've got this staff field here which is really just kind of like a data type itself which has kind of got a number of Staff entries included in there okay so there's only three in this particular example and if I move up then to the actual uh the actual data type itself you can see I've got the staff sort of data type kind of constructed there so that is just our application state which just a list now of course that could be a database or anything like that from superbase or Firebase this this the same rules apply with inside this particular project so move back over to the widget tree then so that is our pretty much our component here and we'll come back to the detail of that in a second they've got the call out component which is the one that we just click on on the home screen and then we've got the staff selector component itself again really not a lot going on here it's a very very simple uh set of widgets that's been constructed here to kind of have this circular Avatar icon that's the photo we're going to put the staff name there we got a little check box here here to denote that we've actually selected it now behind the scenes we've got this animated select container which is kind of this ex this this fading but expanding kind of circular kind of container that's just giving us that kind of more animated look when we actually click on the button that this little action here is going to trigger that particular animation so that is our staff selected component now that's pretty well much it let's now delve into the specifics of then configuring this particular sample [Music] project so let's talk very quickly then to exactly what we're trying to achieve here so what we can see in the middle here is we've got this kind of component this is going to represent our selected staff member now the idea of this particular component is it's pretty pretty basic we want to kind of let the component handle all of the visual characteristics you know the the picture the the name of the actual staff member and we want the uh the actual user to actually select that particular staff member and we want to then tell the parent component hey this is the staff member that was actually selected we don't want to over complicate our application we don't want to put lots of business logic with inside our actual component it's just going to be a more visual component so the feedback that we need to give back to our parent component is yes this is the ID of the individual that was selected now if you were building another type of application it could be that you could have a a list of a load of countries for the user to choose from that component could be the kind of the visual characteristics of each of those rows now when the user presses on one of the countries and you just want to grab hold of maybe the country ID and then you can then apply that then to data that could be with inside the parent component so in this example this is very much about keeping that particular component as as simple as it possibly can so what we can see here is if I just scroll here on the left hand side we've got the selected staff row here is our component so you can see now that particular component is here and at the moment this component contains pretty well much just a load of widgets that we can now hook up to some more Dynamic content that we're going to pass actually into that particular component okay so the way that we go about this is we set up the component parameters up the top right hand corner so this component is going to take receipt of a number of different parameters we're going to pass into it so hit the add parameter the first one that we're going to pass in is the actual staff Uh custom data type as it is okay so we're going to set the type here move down to data type we're going to pass in then the type of just staff that's the only one that I actually have in my particular project now of course if you are using this with inside like a database like a my base or superbase then technically this could actually be then the database record that you're actually passing in so hit the ad parameter we also need to keep track of the actual selected staff ID so if you think about it we have a number and a series of components with inside the UI we're going to need to make sure that we always pass in the actual selected staff ID into this particular component and the reason why that's important is is because this little check here is going to display or hide to depending on who the selected staff ID is now that would give us the ability to have multiple uh components then responding to the the visual display that needs to play out depending on which selected staff member um has actually been selected and you'll see kind of how that hooks up very very shortly so let's create a uh parameter for that selected staff ID just like that this is going to be a type integer again this could be like a key or something like that from your database row and then the next one that we need to add in fact we just need to put a default parameter in here let's we going to put this as zero um I'm going to keep that as required as it's fine it's always going to be PED in hit the add parameter now this is the kind of the important one this is the actual callback now so when the user selects this particular staff member we're going to um make a call back to the parent component but we're going to pass in the selected staff member back to the parent component and with inside the parent component we're going to keep track of which of the selected members have been selected and of course all of these components will respond to it because we're passing the selected staff ID back into it okay it will make sense when we play it out but that's kind of how we're going to do it so I'm going to make up this name I'm going to say unselected um staff action something like that the type is going to be type action just down the bottom and this is where the magic all happens we have this action parameter so choose action parameter and we're going to call this one staff ID so this is the new feature of inside flood oflow where we can now uh we can now pass in a staff ID back to our calling uh action to then pick up that staff ID we can then do something with it with inside the uh the actual parent component now typically what you used to do is you used to maybe then save this maybe in the application State and then you would what inside the parent page will go into the application State and then use it from there where you don't need to do that anymore so that should really really simplify your life uh with inside you know actually carrying out these type of uh uh sort of change you know uh applying these in your project I'll get the words out eventually right okay so uh type let's now choose the integer here because this just going to be an ID that we're going to pass back and that is all that we need to do just hit confirm and that's all of our component parameters set up let's quickly Now hook our our widgets up to those values so with the staff Circle image let's tackle that one first hit the path and of course we've got the staff here we're going to choose the data structure field we're going to select the value that we need here which is the photo URL that's now all bound up with inside the hello world that's just the text let's hook that one up as well choose the staff use the data structure field and of course then use the name and of course you know this could be like I said your database row oh okay you need a space in here as well why in flood oflow you need to put a space in that default V variable field I don't know I thought they might have solved that underneath the covers but just hit the confirm and then that is now available to us now we'll come back very very shortly and we'll just handle this little check box here because we're going to to sort of display and hide that depending on which staff member has been selected so that's now all set up let's now go back to the parent component and let's now populate this particular component okay so back within then the book appointment component on the left hand side let's choose the select the staff selector component here and just on the right hand side we've now got all of these uh kind of these parameters available to us let's tackle the staff one first let's just choose a selector here and we can move down here to the staff item because of course in our row we've kind of got the children from our row all set up choose the staff item and that's we need to do with passing in that of course again if you were using a database here you'd be passing the database record if that's what you've got set up now the selector staff ID is quite straightforward if I just choose the little selector here now we've inside our component State we have now got this selected staff ID so this is Now tracking which one is currently selected now incidentally if you've not seen that before let's move up to the the top here move to the local state uh the local component State varable you can see that I've just got this one set up here so this is nothing special this is just as it would be any other time that we're creating local uh variables so that's now going to track at component level um which staff member has been selected so the final one we need to do is if I just select here and move down here we've got this un selected staff action so I'm going to open this here and this is where we now need to handle the Callback and of course the most important bit we need to we need to handle that callback uh sort of parameter value So within here just hit the add action what we're going to do is we're going to go to the state here we're going to update the component State cuz this is where we now need to set that selected staff item with inside our local component State variables hit the ad field here here is our selected staff ID just select that we need to select the update update type which is going to be a set value we go to this particular area here and now here we got the magic and this is where we now see the Callback parameters so choose callback parameters and here is the staff ID that is coming from that particular component so just select that and that is all nicely played out for us now if I just close that now that is all hooked up so each of these components that's going to be with inside this particular row is now going to respond we're going to we're going to we we need to configure inside the component but that little check will then be displayed depending on which staff member has been selected so with that in place let's hop back over to that component and let's now sort of configure this little check to display okay so a couple of little things we need to do in the staff selector component we need put some actions on here and we're going to control some visibility now so with the actual check we've got selected there if I just Zoom this in a little bit more we've got it all nicely selected let's go over to the conditional let's set that and toggle that on here let's choose the the unset here and we need to put a condition on here so just select conditions do a single condition the first value and let's just select that now of course we are going to check the uh selected uh staff ID just hit confirm here so that's we got the hold of the value now that is available to that's passed in and we're going to check to see if this is equal to and of course we are going to see if it's if it's equal to the actual staff component parameter that's passed in so just use the component the actual parameter there choose this here to say data structure field and we just need to choose the ID so if we have a Ono one match there we're then going to display that check that's all that we're going to do hit confirm and that is all nicely set up for us there right so next up we need to then look at when the actual selection here of the actual uh staff container itself so this is going to be the point that our users actually hit that button so just choose the staff container here let's go to the actions up here open the action flow editor now the only thing that we're playing out here is that animation okay but we obviously need to uh execute that callback back to that parent component and pass that value back through so here we're just going to hit the L plus hit the add action and this is where we're going to type in execute like that we've got this option called execute callback we've got the Callback value here we're going to say the unselected staff action that's that component parameter so just select that and the staff ID we just need need a pass in of course will be then the actual uh the actual component parameter itself so we're just going to uh in fact I'll tell you what we'll do what we'll do we'll choose the actual staff value so we know we've we've explicitly got that set that's going to come that could come from the database record or something like that so choose the staff here choose the available options data structure field and let's pass in the ID itself hit confirm and that is all good so we're can execute that we're going to pass that ID back to that call inent and that is all hooked up for us okay fir the application up let's see what happens hit the book appointment my bottom bar is displayed this is all looking pretty good for me so if I choose say like Bethany for example you can see now that Beany is Select if I choose KY you can see now that that is selected so there is one slight little problem going on here actually is that this little check is being delayed every time I click on this there is a little delay before that check displays let me show you to CCT that back in FL flow because the reason why that is happening is because our widget animation is playing out so it's like it's a blocking animation so we're waiting for the animation to complete before it then executes that callback we don't want that to happen we want a nonblock the animation so that plays out almost in parallel to the Callback that's happening um from the other action so let's quickly go back to flood flow and correct that so here we are back to the widget tree we've got the staff selector component then selected let's go to the staff container option let's go open up the action float editor and here is the widget animation here so we could just all we need to do is toggle this non-blocking to be on you can even do do that or you can move this particular animation down underneath there so the Callback happens first then the widget animation so by saying non-blocking it means this is going to this action here is not going to wait until this one is completed it's just going to happen almost straight away so hit the close let's go back to test mode Let's quickly try that okay so here we go with an instant reload hopefully this should work a little bit more responsive for us now okay hit the book appointment here are our stylist let's hit KT and instantly we're getting that feedback straight away anim playing out just behind that is looking great and of course if I hit the book now then it'll go away a simulate a kind of like a request back to the server and of course stylist number three has been has been booked okay so that's how you use a callback parameters with inside flood oflow it's something I've been calling out for absolutely ages if you look back on some of my previous videos that I've covered on my channel it's such a game Cher as far as more simplifying your FL oflow applications is going to make it so much more easier to manage when you are working with components so hopefully you like the video hopefully you like this little tip here on using callback parameters please do like the video please do subscribe to the channel and please do also become a member of the digital pros at no code academy if you like this style of learning then please do come and visit the academy cuz I'm sure there's something there for you and of course there'll be more video content there as well which I'm sure you'll find very interesting so until the next video I'll see you [Music] soon he

Channel: The Digital Pro's NoCode Academy

Views: 4,574

Keywords: android app development, flutterflow, flutterflow crashcourse, 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 components, flutterflow app builder, flutterflow callback parameters, callbacks, parameter callbacks

Id: kzlnU6M6-9g

Length: 16min 4sec (964 seconds)

Published: Tue Jan 30 2024