How to Use FlutterFlow's Built-In Code Editor

In the FlutterFlow editor, look at the left sidebar icons. Click the angle-bracket icon (</>) labeled 'Custom Code' — it is typically near the bottom of the sidebar icon column. The Custom Code panel expands to show three tabs across the top: Custom Actions, Custom Functions, and Custom Widgets. Each tab has a '+' button to create a new item. You can also reach the panel via the main menu: Project Settings → Custom Code. Take a moment to look at the three tabs before proceeding, since choosing the right type up front saves you from having to re-create code in the wrong category.

Click the 'Custom Actions' tab, then tap the '+' button to create a new action. Give it a descriptive camelCase name such as 'logAnalyticsEvent'. Once created, the right pane shows the action editor. Scroll down to the 'Parameters' section and tap 'Add Parameter'. Set the name to 'eventName', choose type 'String', and mark it as required. Add a second parameter named 'metadata' with type 'JSON' (optional). Parameters you define here will appear as fillable fields when you add this action to an Action Flow on any button or lifecycle event. FlutterFlow auto-generates the Dart function signature from your parameter definitions — you do not write the signature manually.

The code editor displays the auto-generated function stub with your parameters already wired in. Write your Dart logic inside the function body. FlutterFlow auto-imports common packages — you can reference FirebaseFirestore.instance, FirebaseAuth.instance, and FlutterFlow state variables without adding import statements manually. When you have finished writing, tap the blue 'Compile' button at the top-right of the editor. The panel shows a green 'Compiled successfully' banner if there are no errors, or a red error list with line numbers if there are problems. Fix any errors shown before leaving the editor — uncompiled or error-state custom code cannot be called from Action Flows.

1// Auto-generated stub — write your logic inside
2Future logAnalyticsEvent(
3  String eventName,
4  dynamic metadata,
5) async {
6  final user = FirebaseAuth.instance.currentUser;
7  if (user == null) return;
8
9  await FirebaseFirestore.instance
10      .collection('analytics_events')
11      .add({
12    'event': eventName,
13    'metadata': metadata ?? {},
14    'uid': user.uid,
15    'timestamp': FieldValue.serverTimestamp(),
16  });
17}

Switch to the 'Custom Functions' tab and tap '+'. Name it something like 'formatCurrency'. Custom Functions are pure Dart — they take inputs and return a value, with no side effects or async calls. They are designed to be used in 'Set from Variable' bindings on widget properties, so you can call them directly in Text widget value fields or any binding selector. Define parameters (e.g., amount as double, currencyCode as String) and set the return type to String. Write the transformation logic in the body. Custom Functions cannot access widget state or trigger navigation — if you need those, use a Custom Action instead.

1String formatCurrency(
2  double amount,
3  String currencyCode,
4) {
5  final symbols = {'USD': '\$', 'EUR': '€', 'GBP': '£'};
6  final symbol = symbols[currencyCode] ?? currencyCode;
7  return '$symbol${amount.toStringAsFixed(2)}';
8}

In the Custom Code panel, look for the 'pubspec.yaml' tab (sometimes shown as a small gear or 'Dependencies' label at the top of the panel). Click it to open the dependency editor. You will see the existing FlutterFlow-managed packages listed. Add a new line under 'dependencies' with the package name and version, for example: 'share_plus: ^9.0.0'. After typing the dependency, tap the 'Get Packages' button at the top of the pubspec tab. FlutterFlow runs flutter pub get in the background — wait for the green success indicator before returning to your custom code. You can now import the package at the top of any Custom Action or Custom Widget using the standard Dart import syntax.

Navigate to any widget that has an action trigger — for example, a Button widget. Open its Action Flow editor by tapping the lightning bolt icon or selecting 'Actions' in the properties panel. Tap '+' to add an action, scroll down the action type list, and select 'Custom Action'. Choose your 'logAnalyticsEvent' action from the dropdown. The editor shows fillable fields for each parameter you defined. Set 'eventName' to a string value (or a variable binding) and set 'metadata' to a JSON value or leave it empty. Tap 'Confirm'. Your custom action is now wired to the button and will execute when the button is tapped.