At times, the pre-built actions provided by FlutterFlow might not suffice to your specific needs. In such cases, you may often turn to custom actions, a flexible and powerful feature, to create the functionality you desire.
Basic checks should always be performed, but debugging custom code actions can be difficult due to the varying complexity of the code. Some errors may be complex logical issues, while others may be simple syntax errors. A custom strategy may be required when dealing with these types of errors.
Let's Fix These Errors!
It's important to read the error message that is printed, whether you're running the code in test mode, compiling, or trying to compile locally.
⚠️ The message often provides a clue about the potential issue. ⚠️
Does the name in the action match the custom action within the actual code?
If this is the error you are having, you a lucky one! This can be simply fixed by making sure the names match in the action name and within your custom action main code declaration.
You Can always also use the “Add BoilerPlate Code” option to add pre-made FlutterFlow code which generates with the current action name.
Do all the imports match the declared imports in the action settings? Are all arguments passed within the builder itself?
You take a look at your custom code action and something is off? Some arguments are missing while others look different? As we see within our example custom action argument, 1 is missing a definition within the settings panel argument 2 is perfectly imported while argument 3 has nullable selected while it's not specified as nullable within the custom code.
There is two ways to fix this:
Go in and manually replace your arguments and make sure everything matches up within the settings panel and your actual code.
Add BoilerPlate Code option, on web you can copy only the part you need, but on native desktop apps it will replace all the code for you, and you may need to copy some code to your clipboard.
Is the name of the main action the same as any of the arguments?
Using the same name for the custom action and arguments can occasionally cause issues. Therefore, it's suggested to use different names for the action and arguments.
Do the names of the arguments avoid conflict with any of Dart's / Flutter's reserved names?
Some variable names are reserved by the Dart/Flutter programming language.
Exampels: abstract, else, import, show, as, enum, in, static, this
The FlutterFlow builder should automatically warn you about these keywords but some may not be caught so its always a good practise to double check.
Does the custom action return the correct data type?
Custom actions often return values as part of their process. Occasionally, these actions may need adjustment. For instance, you might be returning the wrong type of data, or the returned value doesn't match the one defined in the action settings. It's crucial to ensure these all correspond to one variable type.
Consider it this way: in the settings menu, you define the type of value to be returned. In the code, your action should reflect that defined value type. Ultimately, the action is simply a function that returns a specific value, so you need to ensure that you are indeed returning that variable.
Does the custom action import internal libraries, e.g., import “../../flutterflow”?
Sometimes, you might want to use components, assets, or elements already present in the project or built with the no-code builder. In such cases, you may need to set the "exclude from compilation" option to true. This is because the compiler might not recognize the newly created elements, even though they will be present in the actual build.
Does the custom action include pub spec dependencies?
Do those dependency imports match up with the custom action settings?
You may forget to include imports in the PubSpec Dependencies or forget to to include the import within the code.
Are specific version numbers specified for the dependencies?
Specific version numbers may have issues, or may not match with the other version that need to be imported. You will needs to check that these versions do not conflict with other dependencies. This can be checked on pub.dev
Do any other custom functions include similar dependencies but with different versions?
You may sometimes import the same dependency into multiple spots, but with different versions, which creates conflicts. Make sure that you have one version set globally.
Do FlutterFlow imports conflict with any of the imports?
FlutterFlow automatically imports a couple of dependencies which may sometimes conflict with import you have.
Is there an actual code error within the code?
Have you added null values where necessary?
You may sometimes forget to include null values. Ensure that null values are present in all the correct locations.
📝 int example = passingIntWhichMayBeNullable ?? 0;
Have you provided the correct data type in the correct spots
You may sometimes forget pass the right data type in the right spot.
📝 String numberAsString = “5”;
int example = thisWord; ←
↗️ User is passing a string to an integer without conversion
Can be converted with functions like: .toString(); .toInt(); .toDouble()
Are single elements passed in as arrays or vice versa?
You may sometimes pass single elements to lists or lists to single elements. In these cases, they need to incorporate functions to either add an element or retrieve an individual item from the list.
Is “Exclude from compilation” unchecked?
If this option is selected, the code may contain errors as it won't be checked during FlutterFlow compilation or error checking. This selection implies that the code will be excluded from error checks, but will still be included during execution / build during Test or Run Mode.
Are data types / structs not recreated within the code itself (new class created within custom action)?
These days, it's common to generate custom code with tools like ChatGPT or to borrow code from existing projects. However LLMs or external code sources may lack context about where this code will be used. Custom data types or structs, are defined by FlutterFlow within the data schema panel, and do not need to be redefined within the custom code. This could lead to project build errors. Ensure there are no "double definitions".
Are CallBack Actions within custom actions passing the correct data-type back?
Example, you may either forget or pass the wrong type of variable back in the callback action.
Additional Resources
Below is an excellent article on how to debug specific custom code issues or errors using the browser debug console. This is particularly useful when dealing with logic errors, rather than syntax errors:
Below is an excellent video from FlutterFlow University about custom actions. It guides you through the basics of creating custom actions:
Full in-depth docs can be found here: