How to Create Custom Code in FlutterFlow

In the FlutterFlow editor, look at the far left sidebar. You will see icons for Pages, Components, and several others. Click the icon that looks like angle brackets (</>) — this opens the Custom Code panel. Inside, you will see three sections: Custom Actions, Custom Functions, and Custom Widgets. Each has a '+' button to create a new item. Take a moment to read the brief description FlutterFlow shows for each type before creating anything. This orientation step prevents the most common mistake: creating a Custom Action when you actually need a Custom Function.

Click '+' next to Custom Actions. Name it 'fetchWeatherData'. Custom Actions are async Dart functions — they can await HTTP calls, read device storage, call Firebase, or do anything that requires waiting. In the code editor that appears, you will see a pre-generated function signature. The function receives typed parameters you define in the Arguments panel on the right, and returns a value you declare in the Return Value section. Add a String parameter named 'city'. Set the return type to String. Write your async logic inside the function body. Custom Actions are invoked from Action Flows — drag them from the Action palette onto a button's On Tap event.

1// Custom Action: fetchWeatherData
2// Arguments: city (String)
3// Return Value: String
4
5Future<String> fetchWeatherData(String city) async {
6  final response = await http.get(
7    Uri.parse(
8      'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUR_KEY',
9    ),
10  );
11
12  if (response.statusCode == 200) {
13    final data = jsonDecode(response.body);
14    final temp = data['main']['temp'];
15    final description = data['weather'][0]['description'];
16    return '$description, ${(temp - 273.15).toStringAsFixed(1)}°C';
17  } else {
18    return 'Could not fetch weather for $city';
19  }
20}

Click '+' next to Custom Functions. Name it 'formatCurrency'. Custom Functions are SYNCHRONOUS pure Dart functions — they take inputs and immediately return an output with no waiting, no async, no await. They are ideal for formatting numbers, parsing strings, calculating values, and transforming data for display in widgets. In the editor, define your parameters (a double named 'amount' and a String named 'currencyCode') and a String return type. Write the pure transformation logic. Custom Functions appear in the Expression Editor throughout FlutterFlow — you can use them directly in widget Text bindings, Condition expressions, and anywhere you type a formula.

1// Custom Function: formatCurrency
2// Arguments: amount (double), currencyCode (String)
3// Return Value: String
4// IMPORTANT: No async/await — this is synchronous only
5
6String formatCurrency(double amount, String currencyCode) {
7  final symbols = {'USD': '\$', 'EUR': '€', 'GBP': '£', 'JPY': '¥'};
8  final symbol = symbols[currencyCode] ?? currencyCode;
9
10  if (amount >= 1000000) {
11    return '$symbol${(amount / 1000000).toStringAsFixed(1)}M';
12  } else if (amount >= 1000) {
13    return '$symbol${(amount / 1000).toStringAsFixed(1)}K';
14  }
15  return '$symbol${amount.toStringAsFixed(2)}';
16}

Click '+' next to Custom Widgets. Name it 'GradientProgressBar'. Custom Widgets are full Flutter StatefulWidget or StatelessWidget classes. They appear as draggable components in the FlutterFlow widget palette, just like built-in widgets. Use them when you need UI that FlutterFlow's visual tools cannot produce — custom painters, complex animations, third-party package widgets, or any rendering logic requiring raw Flutter code. Define widget parameters in the Parameters panel on the right (e.g., a double named 'progress' and a Color named 'startColor'). These parameters become configurable Properties in the FlutterFlow UI when the widget is placed on a canvas.

1// Custom Widget: GradientProgressBar
2// Parameters: progress (double, 0.0-1.0), startColor (Color), endColor (Color)
3
4class GradientProgressBar extends StatelessWidget {
5  final double progress;
6  final Color startColor;
7  final Color endColor;
8  final double height;
9
10  const GradientProgressBar({
11    Key? key,
12    required this.progress,
13    required this.startColor,
14    required this.endColor,
15    this.height = 12.0,
16  }) : super(key: key);
17
18  @override
19  Widget build(BuildContext context) {
20    return ClipRRect(
21      borderRadius: BorderRadius.circular(height / 2),
22      child: SizedBox(
23        height: height,
24        child: Stack(
25          children: [
26            Container(color: Colors.grey.shade200),
27            FractionallySizedBox(
28              widthFactor: progress.clamp(0.0, 1.0),
29              child: Container(
30                decoration: BoxDecoration(
31                  gradient: LinearGradient(
32                    colors: [startColor, endColor],
33                  ),
34                ),
35              ),
36            ),
37          ],
38        ),
39      ),
40    );
41  }
42}

Navigate to a page in your app. Select a Button widget on the canvas. In the right panel, click the Actions tab, then click '+' to add an action. In the Action Flow Editor, click '+' on the flow and search for your Custom Action by name — type 'fetchWeather' and it will appear under the Custom Actions section. Select it. FlutterFlow will prompt you to bind the 'city' argument — tap the binding icon and choose a TextField's value, an App State variable, or type a literal string. Set the Action Output Name (e.g., 'weatherResult') so you can reference the return value in subsequent actions. Add a second action: Update App State → set a variable to 'weatherResult'. Now a Text widget bound to that variable will update after the button tap.

FlutterFlow compiles your Dart code in real time — red underlines in the editor mean syntax errors, and the panel shows a compile error banner. Fix all errors before leaving the Custom Code panel. For runtime debugging, use the FlutterFlow Run Mode (the play button, top-right) to test in the browser. For deeper debugging — print statements, breakpoints — click the '</> View Code' button (top-right) to open the full generated Flutter project, then run it in your local VS Code or Android Studio with a connected device. Custom Functions can also be tested inline: the Expression Editor shows a live preview of the return value when you type test inputs into the argument fields.