How to Use Custom Scripts in FlutterFlow for Advanced Features

FlutterFlow has two scripting types. Custom Functions are synchronous, pure functions — they take input parameters, perform a calculation or transformation, and return a value. No async, no Firebase, no external calls. Use them for: formatting currency (formatCurrency(1234.56) -> '$1,234.56'), calculating a user's age from a birthday timestamp, filtering a list by a condition, generating initials from a full name, or building a display string from multiple fields. Custom Actions are async functions — they can await Firestore operations, call HTTP endpoints, use platform channels, write to shared preferences, or launch other apps. Use them for: uploading a file, copying text to clipboard, opening a URL, querying a third-party API, or running code that needs to complete before the next Action Flow step runs. Choosing the wrong type is harmless but confusing — a formatting operation defined as a Custom Action works but cannot be used in widget binding expressions.

In FlutterFlow, open Custom Code > Custom Functions > Add Function. Name it formatRelativeTime. Set the return type to String. Add one parameter: timestamp of type DateTime. In the code editor, write a function that returns 'just now' for timestamps under 60 seconds ago, '5 min ago' for minutes, '3 hours ago' for hours, and 'Yesterday' or the formatted date for older entries. After saving, FlutterFlow validates the Dart syntax. You can now use this function anywhere in the builder: in a Text widget's value binding, inside a Conditional expression, or as a parameter in another action. Custom Functions must be pure — avoid any global state or async operations inside them.

1String formatRelativeTime(DateTime timestamp) {
2  final now = DateTime.now();
3  final diff = now.difference(timestamp);
4
5  if (diff.inSeconds < 60) return 'just now';
6  if (diff.inMinutes < 60) return '${diff.inMinutes} min ago';
7  if (diff.inHours < 24) return '${diff.inHours} hour${diff.inHours == 1 ? '' : 's'} ago';
8  if (diff.inDays == 1) return 'Yesterday';
9  if (diff.inDays < 7) return '${diff.inDays} days ago';
10  return '${timestamp.day}/${timestamp.month}/${timestamp.year}';
11}

In FlutterFlow, open Custom Code > Custom Actions > Add Action. Name it saveToLocalStorage. Add parameters: key (String) and value (String). In the code block, import shared_preferences, get the SharedPreferences instance, and call setString. Create a companion getFromLocalStorage action that takes key (String) and returns String. These actions give you persistent local storage outside of Firebase — useful for user preferences, cached values, or draft content. In your Action Flows, call saveToLocalStorage when a preference changes and getFromLocalStorage in the page's On Page Load action to restore settings. Test by restarting the app and verifying values persist.

1// Custom Action: saveToLocalStorage
2import 'package:shared_preferences/shared_preferences.dart';
3
4Future<void> saveToLocalStorage(
5  String key,
6  String value,
7) async {
8  final prefs = await SharedPreferences.getInstance();
9  await prefs.setString(key, value);
10}
11
12// Custom Action: getFromLocalStorage
13// Return type: String
14Future<String> getFromLocalStorage(String key) async {
15  final prefs = await SharedPreferences.getInstance();
16  return prefs.getString(key) ?? '';
17}

Some capabilities require Dart packages not bundled with FlutterFlow. To add one, export your project (Project Settings > Code Export > Download), open pubspec.yaml, and add the package under dependencies (e.g., url_launcher: ^6.2.0 for opening URLs). Run flutter pub get. For the package to be usable in FlutterFlow's online editor, you must either work in the exported project going forward, or use FlutterFlow's Pub.dev integration: in Custom Code, click Add Dependency at the top and type the package name. FlutterFlow will attempt to resolve it. Once added, import the package in your Custom Action or Custom Widget using the standard import statement. Note that FlutterFlow's online package support is limited — complex packages with platform-specific configuration (like camera or Bluetooth) require the exported project workflow.

FlutterFlow allows you to define multiple helper functions inside a single Custom Action file. Create a Custom Action named appUtils and write all your reusable utility functions as top-level Dart functions in the same file. Functions in this file are available to all other Custom Actions via the same compilation unit. Include utilities like: validateEmail(String email) -> bool, truncateText(String text, int maxLength) -> String, sanitizeInput(String input) -> String, generateUUID() -> String, and debounce timers. Centralizing these means that when you need to change the email validation regex or truncation logic, you update one file and every action using it gets the fix automatically.

1// Utility functions — available to all custom actions
2import 'dart:math';
3
4bool validateEmail(String email) {
5  return RegExp(r'^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,}$').hasMatch(email.trim());
6}
7
8String truncateText(String text, int maxLength) {
9  if (text.length <= maxLength) return text;
10  return '${text.substring(0, maxLength - 3)}...';
11}
12
13String sanitizeInput(String input) {
14  return input.trim().replaceAll(RegExp(r'[<>"\']'), '');
15}
16
17String generateUUID() {
18  final rng = Random.secure();
19  final bytes = List<int>.generate(16, (_) => rng.nextInt(256));
20  bytes[6] = (bytes[6] & 0x0f) | 0x40;
21  bytes[8] = (bytes[8] & 0x3f) | 0x80;
22  return bytes
23      .map((b) => b.toRadixString(16).padLeft(2, '0'))
24      .join()
25      .replaceRange(8, 8, '-')
26      .replaceRange(13, 13, '-')
27      .replaceRange(18, 18, '-')
28      .replaceRange(23, 23, '-');
29}
30
31String initials(String fullName) {
32  final parts = fullName.trim().split(' ');
33  if (parts.isEmpty) return '?';
34  if (parts.length == 1) return parts[0][0].toUpperCase();
35  return '${parts.first[0]}${parts.last[0]}'.toUpperCase();
36}