Custom Code - Deep Dive

This section explores the behind-the-scenes of Custom Code in FlutterFlow. It's aimed at revealing how your own code integrates and functions within the FlutterFlow framework. Perfect for developers seeking a deeper understanding of the internal workings!

In FlutterFlow, users have the flexibility to write three types of custom code snippets to enhance their projects:

Custom Functions: This could be simple input output operations or logic sequences that can be reused throughout the project.

Custom Actions: Used for complex functionalities not covered by built-in actions, allowing you to write custom Dart code for tasks like data processing or integrating external packages from pub.dev.

Custom Widgets: Useful for designing unique user interface elements, either by using Flutter's own libraries or by bringing in widgets from external packages available on pub.dev.

Custom Functions

Custom Functions in FlutterFlow are straightforward code pieces that always return a value. They're mainly used for reusable tasks like input-output operations. Common examples include converting kilometers to miles or calculating the total price from a user's cart items.

In the import list of these functions, you'll find some pre-added packages for e.g timeago, intl, etc and FlutterFlow generated files. These imports generally cover what you need for creating simple and reusable custom functions. However, note that FlutterFlow doesn't allow adding new imports directly in this section (though you can do this in Custom Actions or Custom Widgets).

In the FlutterFlow builder, custom functions are written individually, but in the generated code, they're all grouped together in the custom_functions.dart file within the flutter_flow directory. Since all functions are in one file, it's a good idea to keep them short and easy to understand. This way, your code stays neat and simple. For a deeper understanding of how this file fits into the overall directory structure, you can refer here.

In your custom functions within FlutterFlow, you have the flexibility to utilize your custom Data Type classes and Enums. However, it's important to note that access to your FFAppState or FFConstants classes is restricted. This restriction is in place to maintain a clean and organized structure within your code, ensuring that these functions remain focused on their specific tasks without intertwining with the broader application state or constants.

Custom Actions

Custom Actions in FlutterFlow offer extensive flexibility, allowing you to access a wide range of classes such as FFAppState, FFAppConstants and action blocks, which are restricted in Custom Functions.

For instance, if you want to use FFAppState, you can interact with its properties through public methods. Since FFAppState is a singleton, you can easily access its instance and utilize its properties or methods. For example, if you need to add a new score to the global game score stored in FFAppState, you would use a method like FFAppState().addToGameScore(newScore)or if you want to set the game score with a new value, then it may be like FFAppState().Board = newScore;

Custom Actions also allow integrating new packages as needed, with the ability to add corresponding imports to your action code. All actions in FlutterFlow are efficiently grouped in the index.dart barrel file, providing straightforward access throughout your project.

Notably, Custom Actions typically return a Future of some type to handle asynchronous operations. However, it's also possible for an action not to return any value, in which case it would be a Future<void>or simply Future.

Custom Widgets

Custom Widgets in FlutterFlow, similar to Custom Actions, handle imports and access in much the same way. They're mainly used for crafting complex UI elements. A key point about Custom Widgets is that they're always created as Stateful Widgets, which allows them to be dynamic and responsive, perfect for more advanced and interactive user interface components.