Custom Actions | FlutterFlow University

let's talk about custom actions no custom actions are just like any other actions that you add in the action flow editor so they're just blocks of logic of code that you can execute here in response to some sort of action like an on tap or a long press so we have all of these predefined actions right here but sometimes you need something else and that's where custom actions come in and you could create them here or we can create them in our custom code editor so just come up here and let's add an action now custom actions look similar to custom functions but there's two main differences the first one is what we've already seen that is where you use them so custom functions you use in your set from variable so your data bindings remember in here whereas custom actions are used in your action flow editor the other main difference is that you can use Pub Dev packages with custom actions right down here but you can't with custom functions okay so let's write a custom action and for this I'm going to use a pub div package that's a uuid generator this is used for generating unique IDs okay so the first thing we need is we need to grab this package name so we can paste it into flutterflow so we would just want to add that dependency and paste it in here great next let's give our action a name so what uuid generator and let's set the return type so it's going to return a string all right great so let's grab the boilerplate now and copy it to the editor next we want to load this package into our editor right here so let's just refresh and now we're ready to do the code so let's jump back over to Pub Dev to see an example so if we just scroll down we can see we need to import the library and initialize it so let's just grab that so we can paste it in and the Imports go outside of the function so I'm going to use my shortcut option up Arrow to move it up and give it a little bit more space and shift option f F2 format all right let's go back to the documentation and see how to generate one of these uuids okay so here we've got a couple different options and let's just do a random ID so that's just this V4 method so we're going to come down here we're going to return uuid and we've got Auto completion so we can just grab that four great so let's save this action and compile and it looks like we've got an error so let's check our debugger and it says that we have a dependency called flutter cache manager which depends on uuid three oh so we can just bump down our dependency to three for now that's fine and let's compile again awesome so let's go bind this in our UI so we want to happen is when the user clicks on this generate uuid it shows up right here now you may think okay so we have to have a page State variable and we run that action and we write to that but actually you have direct access to the output variables of custom actions so we don't need that inter meteor step of setting a variable so let me show you how that works so we've got the button here let's come over here let's add an action we can look at the bottom here to our uuid generator and we just need to set the action output variable name this is important because you won't see The Binding in here unless you give this an A so we're just going to call it uuid and now we can come over to our binding here and just bind it up to this output and let's test it out and we're getting a null error why is this well let's go look now we're getting this null value because before we generate this uuid this text needs some value it needs some default value and if we don't give it a default value the default value will be null so we can just come into this text and give it a default value a d and confirm it and let's test it out all right great so now when we generate our uuid there we get it lastly let me show you a few other things we've got two other options right here the first one is is exclude from compilation that's this button right here so if you enable this it won't be compiled and thus flutter flow won't throw any errors if it has some all right well why would you ever want to do this well that can be multiple reasons maybe you're still working on the action you know it has errors but you want to compile the other actions and widgets and use them and you're going to come back to this one or maybe you're gonna be exporting this project to GitHub and integrating other resources into this action that it doesn't have access to here the next option is to include the build context and the build context in flutter is an object that has information about the widget in the widget tree so if you include build context then when you see the boilerplate it's going to include this line right here so we're just going to copy this out of here and paste it into our function and let's just take a look at this context right here so let some room paste it in and when we do dot we can see what methods and properties we have available to us and that's how to build custom action options in flutter flow

Channel: FlutterFlow

Views: 11,498

Keywords: FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, No Code App, FlutterFlow App Builder, No Code App Builder, FlutterFlow University, flutterflow tutorial, custom actions

Id: rKaD9eKuZkY

Length: 5min 1sec (301 seconds)

Published: Tue Oct 03 2023