#FlutterFlow Useful Custom Action Technique you should know!

now depending on how long you have been using a flutter flow for you probably would have come across the term of a custom widget now one use case for custom widget of course is to extend the capability of your flut flow application with perhaps flutter packages off the web which you can then use with inside your application to provide functionality that flutter flow does not provide so what you typically do is you would go over to something like sort like Pub dodev you would do the search of the package that you perhaps are looking for here I'm looking for one called bottom picker I choose that and then with inside here this particular um kind of package allows me to provide this kind of customized picker at the bottom of my flut oflow application so of course I would go here I would go over to the example I would kind of copy the kind of the code that I would want from here and I would get a reference to the actual package name itself I'd come back over to flutter flow I'll go to my custom code section and of course I'd create a brand new custom widget I'd paste my code in here and then I would set my dependency up here which is the the reference they had just at the top of the page there and of course I would then be good to go i' then go over to the actual widget tree I would then create a brand new uh kind of Entry here I'll go to the actual kind of components choose my time picker and then I'll add it with inside the widget tree now when I spin this particular application up if I go over to my test mode here I've got this little button that called select time now this is the custom widget and I would choose that I would then utilize the functionality of the actual package itself and then hit the little tick here and I've got the selected time recorded with inside my application so of course that is one use of using a custom widget now one of the pain points here of a custom widget is that pretty well much my customization that I would actually do here would be would be with inside the actual custom widget itself now that is great um it means you have to get your hands dirty a little bit more with inside the actual code but of course in this particular example that's not the only way that you can do it you can actually use a custom action let's go and have a look and see how you would do the same thing using a custom [Music] action okay so basically in the widget tree the first thing I'm going to do is get rid of this particular custom widget let's just hit the delete there let's add a brand new flut oflow button in now the the great thing about this of course is that what we're doing is is we're obviously using a flood oflow widget now this flood oflow widget is going to actually invoke the actual picker to display allow to select the time and of course that time will then be stored with inside our app State variable so let's just now customize this button just quickly there we go got the button let's just now put this straight to the top there that's super that's all we need to do so next up let's now go and create the actual custom action itself okay so now we need to create some custom code let's move over and select custom code on the left hand side let's create a brand new one so I'm just going to say add an action here and we going to give this one a name and I'm going to say time picker action just like that let's now move over to the right hand side so we need to set some settings here so the first thing that we're going to select is this include build context this is really really important because we need to pass in a reference back to the parent widget that is actually invoking this particular action so make sure you choose include build context and we also need to create an actual argument itself so just choose add arguments here now I'm going to call this one submit callback now this is going to be really important to our actual application let's just make sure we just choose action down here as the type let's take off the nullable now the whole idea of this submit callback is that what we're going to do with inside this particular action when the user has actually selected the time we're going to then want to make we want to invoke this callback method that's going to basically just refresh the App State okay that's something that's going to be really important that way then with inside the calling page we'll be able to see the ab state would have been refreshed we would have also then seen that then reflected on the UI because it'll actually show you the time that is actually been selected so I'll show you how that works in just a moment but that's really important we must include that particular argument now what we also need to do is we need to add this actual dependency now this is actually going to be the bottom picker dependency so just choose add dependency move back over to pubd and here I'm just going to make a copy of this one here so just choose copy move back over to flood oflow let's just paste that one in here of course hit the little refresh option let it do its thing so what we now need to do is we now need to hit the little option up here which is going to view the boiler plate clo just choose that and you can see here this has pretty well much got what we need here some some parameters set up here some arguments set up here which is what we need let's just now copy to editor and that will give us the pretty well much the basic information that we actually need now if you go back over to the sample of course we have in here okay so let's choose the the import here let's just grab that let's just do a copy let's move back back over here and just above the actual future statement just pop that in here we've now got a reference we've now got a reference to the package that we're going to use and of course we're now going to now put our code actually in this particular section here so you can see we've got everything set up let's now go and put our code in that we're going to need okay so I've popped some code in here let me walk you through it so basically what we're doing here is we're setting pretty well much up the parameters of this particular bottom picker so of course you go the sort of uh sort of uh the bottom picker here You' go down to probably actually on the on the homepage here there's some examples so of course you can just move down here and you can see here that there's various various examples to choose from so there's one on here uh where is it the one that we need is probably the time if I just scroll up here there it is there's the one I'm looking for so pretty well much what you can do is you can literally just copy this particular code here and what I've done is just pasted that and I've made some additional changes to it okay with' inside flood of flow itself so you can see here I've set up some theme details here for us style so just to make it a little bit more in keeping with our actual application of course it means that this particular uh kind of bottom picker can inherit some of the look and feel from our application I gave you some text uh a name of just select here for the actual button text itself and some other little parameters here that I set up but the key one here is this one here this is the onsubmit this is when our user actually chooses to select a time so they set the time they hit the little select option and of course this is the submit method that is then called you can see I've put some some text here some some comments here to kind of indicate what's kind of happening but this is kind of the key statement here and if you've been using flood oflow for a while you'll know that here we do need to set the actual App State variable of the value that gets selected so that so this is the value which will be selected it becomes um then the app state is then updated with the actual value itself so if I look into my app State here you'll know I've got one here called a selected time which is really just a date time AB State variable this is where resets it and then of course this is really really important the submit callback this is the bit which we've defined here on the right hand side which will then be executed which will show you how to set up in just a moment and then the rest of it is if we we're not really worried about the actual enclose so if the user doesn't actually select anything they just hit the little X that the time picker will will uh be dis be removed from display and then of course we're not really worried about executing any particular functionality here and of course the show. context is really just this is kind of like the call out to the actual the actual picker to actually show with inside the page itself so hopefully that's really really straightforward in explanation that's all looking good let's now just make sure that we save it and of course we just need to compile it as well so hit the little compilation option up here let it do its thing we should get a tick box and then we can then move on to the next [Music] step okay so got the little tick box that's all looking good so how do we now actually Inver voke this custom action well really really simple let's move over to the widget tree here you can see this is the button that we created earlier just select that of course open up the action flow editor if I now choose add action I'm just going to type in the word custom here and you'll see here I've got this option now called time picker action just select that now this is the Callback that we actually created with inside the action itself which of course now opens up this action flow Editor to for me so just choose open and what we need to do here is we need to do one really really simple thing hit the add action and we're going to type in the word State here choose update App State that's it this just forces a rebuild of the current page because we're going to set that appstate variable with inside the action itself this is just going to do the rebuild of the current page and that's all that is actually needed if I just hit close now if you just recall before I mentioned you about the actual the actual App State variable that I've got created here you can see it's called selected time it's just got a default date and time in there for now that's all that's needed and then we've inside the actual top of the application here on the homepage I'm just setting that value to be null in this particular instance just so it doesn't display here now if we now fire this actually up with inside test mode Let's see hopefully it work perfectly first first time okay so here we are an instant reload let's now see if this works okay for us hit this select time option let's choose a timer say 2:00 in the morning hit select and there we go Bingo our selected time is now there so excellent that's working exactly how we want it to okay so here's one more very very simple example I've gone over to pop dodev I found this one called popup Banner this is a great candidate to use for a custom action very similar to the kind of the bottom sort of time picker that we just used just a moment ago but this one just simply display some kind of images in like a almost like a carousel that kind of just sort of moves from left to right and you can see here really really simple code here of course you can extend it a little bit more but um what I've done is I've take this I've taken this particular code here I've gone over to flut oflow I've gone over to the custom code option I've created a brand new custom action called popup Banner action as you can see here I set up in a very very similar to way as we did the time picker set everything up here on my dependencies obviously brought this one in here set me argument up although I'm not actually using the Callback in this particular example but I put it here anyway and I've just put the code in here this does this is about as simple as as it comes and of course back on side my UI here I've got the popup images I've just gone to the actions and I've just literally calling this instead of the previous one and of course in the sample go over to test mode hit the popup images and bang There is the carousel that was displayed with inside the UI so have a good look around pub. de see if you can find other types of sort of packages like this that you can use to enhance your own application as well so finally then a big thank you to my patreon community they wanted me to put a video together they kind of demonstrate this particular technique and the problems that they are solving inside the community it's good to get out to the outside world because I'm sure others are also experiencing these challenges as well so hopefully you found this video particularly useful of course please do like the video really really useful gets the kind of the YouTube algorithm sort of working over time of course and gets flood oflow out to the masses and of course if you love this type of walkthrough content please do subscribe to my channel as well it's great to have you part of the community and of course if you're looking for a little bit more extended information a little bit more sort of kind of uh behind the scenes kind of stuff and more sort work in progress sample applications then please do head over to my patreon community and become a member there as well so uh thanks for watching and I'll see you in the next [Music] one

Channel: The Digital Pro's NoCode Academy

Views: 2,334

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 callbacks, callbacks, flutterflow components, flutterflow app builder, Custom Action, FlutterFlow Timepicker

Id: yl2LOhJl964

Length: 11min 59sec (719 seconds)

Published: Tue Oct 24 2023