Sublime Text

Download and install Sublime Text from sublimetext.com. The editor is available for macOS, Windows, and Linux. You can evaluate it for free indefinitely—a purchase prompt appears occasionally. The one-time license (verify current price at sublimetext.com/buy) removes the prompt and supports the developers. Once installed, open Sublime Text and install Package Control. Go to Tools in the menu bar and click Install Package Control. Wait for the confirmation message. Package Control is the essential package manager for Sublime Text—without it, adding Dart support requires manual file downloads. Install the Dart syntax package: press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) to open the Command Palette. Type 'Install Package' and press Enter to open the Package Control installer. Type 'Dart' in the search field and install the Dart package by the community maintainer. This adds syntax highlighting, basic code folding, and snippet support for .dart files. For a significantly better experience, also install LSP and LSP-Dart. In Package Control, search for and install 'LSP', then 'LSP-Dart'. LSP (Language Server Protocol) connects Sublime Text to the Dart analysis server, giving you real-time type checking, auto-complete, go-to-definition, and inline error markers—the same features an IDE like VS Code or Android Studio provides. However, LSP-Dart requires the Dart SDK (or Flutter SDK) installed locally on your machine. If you don't have Flutter installed, follow the setup guide at flutter.dev/docs/get-started/install. Once the SDK is installed, LSP-Dart will automatically find it. After installation, open a .dart file and confirm syntax highlighting appears. If LSP is working, you should see analysis markers within a few seconds of opening a file.

1// Package Control packages to install in Sublime Text:
2// 1. Dart          — syntax highlighting, snippets
3// 2. LSP           — Language Server Protocol client
4// 3. LSP-Dart      — Dart analysis server via LSP
5//                    (requires Flutter/Dart SDK installed locally)
6// Optional:
7// 4. SublimeLinter — linting framework
8// 5. Terminus      — terminal inside Sublime (for running dart format)
9
10// LSP-Dart settings (Preferences → Package Settings → LSP → Settings):
11// Add under 'clients':
12{
13  "dart": {
14    "enabled": true
15  }
16}

This is the core workflow for using Sublime Text with FlutterFlow. Open a new file in Sublime Text (File → New File) and save it with a .dart extension (e.g., my_custom_action.dart). This activates Dart syntax highlighting immediately. Write your Custom Action Dart code here. A FlutterFlow Custom Action is a top-level Dart function. The function signature must follow FlutterFlow's conventions: it returns a Future (for async operations) or a value type, and parameter types must be one of the types FlutterFlow supports (String, int, double, bool, List, or FFDynamicParams for JSON). In Sublime Text, you have access to multi-cursor editing (hold Cmd/Alt and click to place additional cursors), find-and-replace across the file (Cmd+H), column selection, and all the editing conveniences that FlutterFlow's inline box lacks. Use LSP-Dart's suggestions to catch type errors before you paste. CRITICAL SECURITY RULE: Do not type any API key, secret, password, or credential as a literal string in your Dart code—even temporarily. Dart code you write locally will be pasted into FlutterFlow's Custom Action editor, and anything that compiles into the Flutter app bundle ships to every user's device in a form that can be extracted. If your Custom Action needs an API key, pass it as a String parameter from FlutterFlow (where it can be sourced from the API Group header or a secure constant) rather than hardcoding it in the Dart function body. Once your Dart looks correct in Sublime, select all (Cmd+A), copy (Cmd+C), and switch to FlutterFlow. Navigate to Custom Code in the left navigation panel → + Add → Action. Give the action a name, set the Return Value type, and add any Parameters that your function signature requires. Paste the Dart code into the code editor area. Click Save. If FlutterFlow shows a compile error, switch back to Sublime, fix the issue, and re-paste.

1// Example Custom Action: calculateBMI
2// Draft this in Sublime, paste into FlutterFlow → Custom Code → + Add → Action
3// Parameters (set in FlutterFlow UI): weightKg (double), heightM (double)
4// Return Value: double
5
6Future<double> calculateBMI(
7  double weightKg,
8  double heightM,
9) async {
10  if (heightM <= 0) return 0.0;
11  final bmi = weightKg / (heightM * heightM);
12  // Return rounded to 1 decimal place
13  return double.parse(bmi.toStringAsFixed(1));
14}
15
16// Another example: formatCurrency
17// Parameters: amount (double), currencyCode (String)
18// Return Value: String
19
20Future<String> formatCurrency(
21  double amount,
22  String currencyCode,
23) async {
24  // Format without external packages (safe for FlutterFlow)
25  final absAmount = amount.abs();
26  final formatted = absAmount.toStringAsFixed(2);
27  final symbol = currencyCode == 'USD' ? '\$' : currencyCode;
28  return amount < 0 ? '-$symbol$formatted' : '$symbol$formatted';
29}

Custom Widgets in FlutterFlow allow you to embed pub.dev Flutter packages that FlutterFlow doesn't support natively. The Dart code for a Custom Widget is more complex than a Custom Action—it must extend a Flutter StatelessWidget or StatefulWidget and accept parameters. Sublime Text with LSP-Dart is particularly useful here because widget code has more nesting, more types to satisfy, and benefits greatly from autocomplete. To create a Custom Widget: in FlutterFlow, go to Custom Code → + Add → Widget. Give it a name (e.g., 'CustomRatingBar') and note the parameter names and types you define in the FlutterFlow UI—these become the named parameters of your widget's constructor in Dart. Set the width and height properties FlutterFlow asks for. In the Dependencies field of FlutterFlow's Custom Widget editor, add the pub.dev package name and version (e.g., 'flutter_rating_bar: 4.0.1'). FlutterFlow handles the dependency installation; you do not need to run pub get. Now draft the widget Dart in Sublime. The widget class must be named exactly as FlutterFlow expects (matching the name you entered), and the parameters must match the names and types configured in FlutterFlow's parameter panel. Use Sublime's multi-line editing to carefully structure the widget tree. Important note: Custom Widgets don't run in FlutterFlow's browser-based Run mode—they require testing on a real device or emulator using a debug APK or Xcode build. The web renderer (html vs canvaskit) can also affect how some widgets render in web builds. Test on device after pasting your Dart into FlutterFlow.

1// Example Custom Widget: StarRatingWidget
2// FlutterFlow → Custom Code → + Add → Widget
3// Name: StarRatingWidget
4// Parameters (set in FlutterFlow): rating (double), maxRating (int)
5// Dependency: flutter_rating_bar: 4.0.1
6
7import 'package:flutter/material.dart';
8import 'package:flutter_rating_bar/flutter_rating_bar.dart';
9
10class StarRatingWidget extends StatelessWidget {
11  const StarRatingWidget({
12    Key? key,
13    required this.rating,
14    required this.maxRating,
15    this.width = 200,
16    this.height = 40,
17  }) : super(key: key);
18
19  final double rating;
20  final int maxRating;
21  final double width;
22  final double height;
23
24  @override
25  Widget build(BuildContext context) {
26    return SizedBox(
27      width: width,
28      height: height,
29      child: RatingBarIndicator(
30        rating: rating,
31        itemCount: maxRating,
32        itemSize: height,
33        direction: Axis.horizontal,
34        itemBuilder: (context, _) => const Icon(
35          Icons.star,
36          color: Colors.amber,
37        ),
38      ),
39    );
40  }
41}

This step applies only to teams on paid FlutterFlow plans that include Code Export and GitHub sync. If you are on a free or starter plan without code export, skip this step. FlutterFlow can export your project as a complete Flutter/Dart codebase to a GitHub repository. Once exported, you can clone the repo locally and open it in Sublime Text to edit any file. However, the critical rule is: FlutterFlow WILL overwrite most files in the lib/ directory the next time someone clicks Export or triggers a sync from FlutterFlow. Files that FlutterFlow regenerates are off-limits for permanent hand edits. The files that are typically SAFE to edit (FlutterFlow does not regenerate them): - assets/ directory (images, fonts, JSON files you add manually) - pubspec.yaml edits for additional pub.dev packages (though FlutterFlow manages this too—be careful) - Platform-specific files: ios/Runner/AppDelegate.swift, android/app/src/main/AndroidManifest.xml (for native permissions) - Files you create from scratch outside the generated lib/ structure The files that are OVERWRITTEN on next export (do not hand-edit): - lib/flutter_flow/ — all FlutterFlow-generated utilities - lib/pages/ — your screen widget files - lib/components/ — your component widget files - lib/backend/ — Supabase/Firebase queries To edit the exported project in Sublime: File → Open Folder → select the cloned repo root. Sublime will show the full project tree in the sidebar. Navigate to the file you want to edit, make your changes, and use Git (via command line or Sublime's Terminus package) to commit and push. Never store secrets (API keys, tokens) in any file in this locally edited project—they would be committed to your GitHub repository in plaintext.

1// Files SAFE to edit in Sublime (FlutterFlow will not overwrite):
2// ✅ ios/Runner/AppDelegate.swift    — native iOS platform code
3// ✅ android/app/src/main/AndroidManifest.xml — Android permissions
4// ✅ assets/*                        — images, fonts, JSON you add
5// ✅ Custom files you create outside lib/flutter_flow/
6
7// Files OVERWRITTEN on next FlutterFlow export (do NOT hand-edit):
8// ❌ lib/flutter_flow/**             — all generated utilities
9// ❌ lib/pages/**                    — your screen files
10// ❌ lib/components/**              — your component files
11// ❌ lib/backend/**                 — Supabase/Firebase backend code
12// ❌ pubspec.yaml (partially managed by FlutterFlow)
13
14// Git workflow to minimize overwrite risk:
15// 1. git checkout -b manual-edits
16// 2. Edit safe files in Sublime
17// 3. git commit -m 'chore: add native iOS platform channel'
18// 4. When FlutterFlow exports, merge to main
19// 5. git merge manual-edits (keep your safe-file edits, take FlutterFlow's generated files)