Adding Feature Flag Override to the Debug Panel

Enterprise

What you'll learn

• Generating the feature flag spoofer sub-brick for app_debugger
• Understanding how the spoofer delegate chain works
• Wiring the override into your bootstrap
• Enabling and suspending individual flag overrides without deleting them

Prerequisites

• app_debugger brick already installed (see App Debugger Setup)
• feature_flag_impl configured and registered in your bootstrap

Step 1: Generate the Brick

archipelago generate app_debugger_feature_flag

No variables are required. The brick works with any FeatureFlagProvider registered at runtime.

Step 2: Understand the Generated Packages

infrastructure/
├── app_debugger_feature_flag_api/     # Spoofer contract
│   └── lib/src/
│       ├── feature_flag_spoofer_sdk.dart
│       └── models/flag_override.dart
├── app_debugger_feature_flag/         # Debug tab implementation
│   └── lib/src/
│       ├── feature_flag_spoofer_sdk_impl.dart
│       ├── delegate/spoofer_delegate.dart
│       └── di/feature_flag_spoofer_module.dart
└── app_debugger_feature_flag_noop/    # Release no-op
    └── lib/src/
        └── feature_flag_spoofer_sdk_noop.dart

The FlagOverride Model

class FlagOverride {
  final String flagKey;
  final FeatureFlagResult value;
  final bool enabled; // default: true — set false to suspend without deleting
}

Step 3: Configure build_prepare

# build_prepare.yaml
flavors:
  debug:
    app_debugger_feature_flag:
      dependency: app_debugger_feature_flag
  release:
    app_debugger_feature_flag:
      dependency: app_debugger_feature_flag_noop

Step 4: Wire the Spoofer in bootstrap.dart

After DI is initialised, attach the spoofer delegate to the front of your feature flag delegate chain:

final spoofer = getIt<FeatureFlagSpooferSDK>();
if (spoofer.delegate != null) {
  featureFlagSdk.addDelegate(spoofer.delegate!);
}

The spoofer installs at position 0 of the delegate chain, so its overrides take precedence over all other providers.

Step 5: Verify in Debug Mode

Run the app in debug mode and open the debug panel. You should see a Feature Flags tab listing all registered flags.

To override a flag manually in the panel, tap the flag row and select a value. To test programmatically:

// Inject a forced override (useful in integration tests)
getIt<FeatureFlagSpooferSDK>().addOverride(
  FlagOverride(
    flagKey: 'new_checkout_flow',
    value: FeatureFlagResult.enabled(),
  ),
);

Step 6: Suspend vs Delete an Override

Setting enabled: false suspends the override without removing it. The underlying provider's value is used while the override is suspended, and you can re-enable it without re-entering the value:

getIt<FeatureFlagSpooferSDK>().updateOverride(
  flagKey: 'new_checkout_flow',
  enabled: false, // suspend
);

Delegate Chain Priority

Position	Provider	Notes
0 (first)	SpooferDelegate	Debug panel overrides — highest priority
1+	Your real providers	Remote config, local defaults, etc.

Next Steps

• Set up App Debugger if you haven't already
• Configure Feature Flag SDK to manage your flag providers