How to Create a Feature Flag System in FlutterFlow for A/B Testing

Create a feature_flags collection with fields: flagName (String, unique), isEnabled (Boolean), rolloutPercentage (Integer, 0-100), variants (Array of Maps: [{name: 'A', weight: 50}, {name: 'B', weight: 50}]), targetAudience (String: 'all', 'new_users', 'premium'), description (String), createdAt (Timestamp). Create a flag_impressions collection: userId (String), flagName (String), variant (String), timestamp (Timestamp). Create a flag_conversions collection: userId (String), flagName (String), variant (String), conversionType (String), timestamp (Timestamp). Add App State activeFlags as a JSON map storing {flagName: variantName} for the current user.

Write a Custom Action loadFeatureFlags that runs on app startup. It queries all feature_flags documents where isEnabled == true. For each flag, it checks rolloutPercentage: hash the userId to get a number 0-99 and compare against rolloutPercentage. If the user is in the rollout, assign a variant using consistent hashing: compute a hash of (userId + flagName), mod by 100, then map to a variant based on cumulative weights. Store the result in App State activeFlags map. The key insight is CONSISTENT hashing: the same userId + flagName always produces the same variant, so users never flip between A and B across sessions.

1// Custom Action: loadFeatureFlags
2import 'dart:convert';
3import 'package:crypto/crypto.dart';
4
5int _consistentHash(String userId, String flagName) {
6  final bytes = utf8.encode('$userId:$flagName');
7  final digest = md5.convert(bytes);
8  return digest.bytes.fold(0, (a, b) => a + b) % 100;
9}
10
11String _assignVariant(
12  String userId, String flagName,
13  List<Map<String, dynamic>> variants,
14) {
15  final hash = _consistentHash(userId, flagName);
16  int cumulative = 0;
17  for (final v in variants) {
18    cumulative += (v['weight'] as int);
19    if (hash < cumulative) return v['name'] as String;
20  }
21  return variants.last['name'] as String;
22}
23
24// Called on app startup, returns Map<String, String>
25// Usage: for each enabled flag, call _assignVariant
26// Store result in App State activeFlags

Wherever you want to show a feature-flagged element, wrap it in a Container with Conditional Visibility. The condition checks App State activeFlags. For a simple on/off flag: Conditional Visibility where activeFlags contains the flagName key. For A/B variants: create two Containers side by side. Container A has Conditional Visibility: activeFlags[flagName] == 'A'. Container B has Conditional Visibility: activeFlags[flagName] == 'B'. Only one will be visible. For example, to A/B test a new checkout button: variant A shows the original button, variant B shows a redesigned button with different text and color.

When a feature-flagged element becomes visible, log an impression. Add an On Page Load action that creates a flag_impressions document with userId, flagName, variant (read from App State activeFlags), and timestamp. For conversions, when the user completes the desired action (e.g., clicks the checkout button, completes a purchase), create a flag_conversions document with the same fields plus conversionType. Use a Custom Action that checks if an impression has already been logged today to avoid duplicate counts. The conversion rate for each variant is: count(conversions for variant) / count(impressions for variant).

Create an AdminFlagsPage (gated behind admin role check). Add a ListView with Backend Query on feature_flags ordered by createdAt descending. Each row shows: flagName Text, description Text, isEnabled Switch, rolloutPercentage Slider (0-100), and variant weight display. On Switch toggle, update the isEnabled field. On Slider change, update rolloutPercentage. Add a 'View Results' Button per flag that navigates to a FlagResultsPage showing: total impressions per variant, total conversions per variant, conversion rate percentage per variant, and a winner indicator (highest conversion rate highlighted green). Add a 'Create Flag' FloatingActionButton that opens a form for creating new flags.