Optimizely

Log into app.optimizely.com and select your project (or create one). In the left navigation, go to 'Feature Flags' and click 'Create New Feature Flag'. Give it a key like `new_onboarding_v2` or `checkout_button_test` — this key is what you will pass to `decide()` in your Dart code, so note it exactly. The flag key is case-sensitive. If you want to run an A/B test rather than a simple on/off flag, add variations to the flag: click 'Variables & Variations' and add a string or boolean variable that each variation sets differently (e.g., `button_text` = 'Get Started' in control, 'Start Free Trial' in challenger). To get the SDK Key, navigate to Settings → Environments. You will see at least two environments: Development and Production. Each environment has its own SDK Key. Copy the Development SDK Key for testing — you will use the Production key when you are ready to publish. The SDK Key is a long alphanumeric string and is safe to include in client code. Before leaving the Optimizely console, activate the flag (toggle it 'On') and if you have an audience or traffic allocation rule, configure it. For testing, set traffic to 100% and audience to 'Everyone'. Save your changes.

In your FlutterFlow project, click 'Custom Code' in the left navigation bar. In the Custom Code panel, look for the 'Dependencies' or 'Pub Dependencies' section. Click '+ Add Dependency' and type `optimizely_flutter_sdk`. FlutterFlow will look up the package on pub.dev — select the latest stable version from the dropdown. Do not add a version constraint manually; let FlutterFlow handle version resolution. Click 'Save'. FlutterFlow automatically adds this package to the `pubspec.yaml` of the generated Flutter project. You do not need to run `flutter pub get` — FlutterFlow handles this when you build or test the app. This is a native Flutter plugin, which is why it will not function in FlutterFlow's web-based Test Mode (the 'Run' button in the browser). The plugin requires platform code that only works on compiled iOS and Android builds or FlutterFlow Local Run. Verify the dependency was accepted: refresh the Custom Code panel and confirm `optimizely_flutter_sdk` appears in the list of dependencies without an error badge. If it shows an error, check that the package name is spelled correctly — the exact name on pub.dev is `optimizely_flutter_sdk` (all lowercase, underscores).

In the Custom Code panel, click '+ Add' and choose 'Action'. Name it `initOptimizely`. Set the return type to void (this action has no return value — it initializes a shared client). In the arguments section, add one argument: `sdkKey` (String). This is where you will pass your SDK Key from FlutterFlow's App Values or directly from an action parameter. Paste the Dart code below into the code editor. The action initializes the Optimizely Flutter client using the provided SDK Key, waits for the datafile to be downloaded, and stores the initialized client in a static variable so the decide action can reference it later. The `OptimizelyDecideOption` and `OptimizelyClientConfig` classes come from the `optimizely_flutter_sdk` package. After pasting the code, click 'Save'. If FlutterFlow shows any import errors, confirm the dependency is correctly added in the Dependencies tab. Then go to your app's initial screen (usually the main screen or a splash screen) and add this action in the 'On Page Load' action chain: Action Flow Editor → '+ Add Action' → 'Custom Actions' → 'initOptimizely' → pass your SDK Key string. For the SDK Key value, either type it directly or store it in FlutterFlow's App Values (left nav → App Values → + Add Constant) and reference it there. Note: this action is async and the Optimizely client takes a moment to download the datafile. Guard your decide calls to run only after initialization completes. A simple way is to use a Boolean App State variable `optimizelyReady` that the init action sets to true on completion.

1// Custom Action: initOptimizely
2// Argument: sdkKey (String)
3// Return: void
4
5import 'package:optimizely_flutter_sdk/optimizely_flutter_sdk.dart';
6
7// Static holder so decideFlag can access the same client
8class OptimizelyHolder {
9  static OptimizelyFlutterSdk? client;
10}
11
12Future<void> initOptimizely(String sdkKey) async {
13  // Create the client
14  final client = OptimizelyFlutterSdk(sdkKey);
15
16  // Start the client and wait for the datafile to be fetched
17  final response = await client.start();
18
19  if (response.success) {
20    OptimizelyHolder.client = client;
21    // The SDK now has the datafile and is ready for decide() calls
22  } else {
23    // Log or handle initialization failure
24    // response.reason contains the error message
25    debugPrint('Optimizely init failed: ${response.reason}');
26  }
27}
28

In the Custom Code panel, click '+ Add' and choose 'Action'. Name it `decideFlagAction`. Add two arguments: `userId` (String — a unique ID for the current user, typically the user's UID from Firebase Auth or a device ID) and `flagKey` (String — the flag key from Optimizely, e.g., `new_onboarding_v2`). Set the return type to Boolean (or JSON if you need the full decision object including variation key). Paste the Dart code below. The action retrieves the shared client from `OptimizelyHolder.client`, creates a user context with the provided userId, calls `decide(flagKey)`, and returns the `enabled` boolean. If the client is null (init has not completed yet), it returns false as the safe default. After saving, go to the App State panel in FlutterFlow (left nav → App State → + Add Field) and add a Boolean field called `flagEnabled` (default: false). Optionally add a String field `flagVariation` to store the variation key. To use the decide action: in the Action Flow Editor of the relevant screen or widget, add '+ Add Action' → 'Custom Actions' → 'decideFlagAction'. Pass `userId` from your authentication state (e.g., Firebase Auth user UID, or `FFAppState().userId` if stored). Pass the flag key as a string literal (`new_onboarding_v2`). Set the action's 'Return Value' output to update the `flagEnabled` App State variable. After the action, add conditional navigation or use FlutterFlow's conditional visibility settings to show different UI based on `flagEnabled`.

1// Custom Action: decideFlagAction
2// Arguments: userId (String), flagKey (String)
3// Return: bool
4
5import 'package:optimizely_flutter_sdk/optimizely_flutter_sdk.dart';
6
7Future<bool> decideFlagAction(
8  String userId,
9  String flagKey,
10) async {
11  final client = OptimizelyHolder.client;
12
13  // Guard: if init hasn't completed, return safe default (off)
14  if (client == null) {
15    debugPrint('Optimizely client not initialized — returning false for $flagKey');
16    return false;
17  }
18
19  // Create a user context for this user
20  final userContext = await client.createUserContext(userId: userId);
21
22  if (userContext == null) {
23    debugPrint('Failed to create Optimizely user context for $userId');
24    return false;
25  }
26
27  // Decide the flag
28  final decision = await userContext.decide(flagKey);
29
30  // decision.enabled is the main result
31  // decision.variationKey is the variation name for A/B tests
32  debugPrint(
33    'Flag $flagKey: enabled=${decision.enabled}, variation=${decision.variationKey}'
34  );
35
36  return decision.enabled;
37}
38

Custom Actions that use native Flutter plugins — including `optimizely_flutter_sdk` — do not run in FlutterFlow's browser-based Test Mode (the 'Run' button). This is a hard limitation: the web preview uses a JavaScript renderer that does not execute native Dart plugin code. When you tap the preview in the browser and nothing happens, the Custom Action code is not running — this is expected, not a bug in your code. To test, you have two options. First, FlutterFlow Local Run: install the FlutterFlow companion app on a physical iOS or Android device, connect via Local Run from the FlutterFlow toolbar, and your app runs natively on the device with live reload. Second, download the Flutter project from FlutterFlow (via the Download Code button) and run it locally with `flutter run` — but Local Run is the easier option that stays in the FlutterFlow workflow. Once running on device, observe the debug console for the `debugPrint` messages from the init and decide actions. You should see `Optimizely init failed` or confirmation of the initialized client, then the decide output showing the flag key, enabled status, and variation key. For the conditional UI: on the screen where you want to gate a feature, select the widget (Container, Screen, or Button) you want to show/hide. In its properties panel, find 'Conditional Visibility' and set the condition to 'App State → flagEnabled == true'. If you are running an A/B test, use a conditional value on a Text widget's content property: if `App State → flagVariation == 'challenger'` then 'Start Free Trial', else 'Get Started'. If you would rather skip writing the Custom Actions yourself, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.