How to Manage Multiple App Versions with Different Features in FlutterFlow

In the Firebase console, open Firestore and create a collection called 'app_config'. Add a single document with the ID 'features'. This document stores all your feature flags as Boolean or Map fields. Create these fields: new_checkout_flow (Boolean, default false), dark_mode_v2 (Boolean, default true), ai_assistant (Boolean, default false), min_required_version (String, e.g., '2.1.0'), maintenance_mode (Boolean, default false), and rollouts (Map — containing sub-fields like new_checkout_flow_percentage: Integer 0-100). In FlutterFlow, import this as a Firestore document in your Firestore panel. You will bind these values to App State variables after loading them at startup.

Add App State Boolean variables for each feature flag you want to control: isNewCheckoutEnabled, isAiAssistantEnabled, isMaintenanceMode, etc. Also add a String App State variable called 'minRequiredVersion'. On your Entry Page's initState, add a Backend Query action (one-time fetch, not real-time) targeting app_config/features. In the Backend Query's on-success callback, add Set App State actions for each variable, binding to the corresponding Firestore field. Critically, do this before any other navigation: check isMaintenanceMode first — if true, navigate to a maintenance screen instead of the normal app flow. Checking feature flags on every page is wasteful; loading once at launch and caching in App State is the correct pattern.

For each feature controlled by a flag, wrap its UI in a Conditional visibility widget. Select the widget or container that represents the feature, go to its Properties panel, and toggle the 'Visible' property to a Condition. Set the condition to: App State > isNewCheckoutEnabled equals true. This makes the widget completely invisible (and not rendered at all) when the flag is false. For feature flags that replace existing functionality (like a new checkout flow replacing the old one), show the new UI when the flag is true and the old UI when it is false — use two parallel containers with opposing conditions: one visible when true, one visible when false.

Gradual rollout releases a feature to an increasing percentage of users. When a user registers, assign them a random integer between 0 and 99 and store it in their Firestore user document as 'rollout_bucket'. This value never changes — it stably assigns the user to a consistent cohort. In your feature flag document, store each feature's rollout percentage: new_checkout_flow_percentage: 25 means users with rollout_bucket 0-24 see the feature. In your App State initialization, add a comparison: isNewCheckoutEnabled = (userRolloutBucket < featureRolloutPercentage). To roll out to more users, increase the percentage in Firestore — no app update required.

1// Custom Action: assign rollout bucket on registration
2// Run once during user registration flow
3import 'dart:math';
4import 'package:cloud_firestore/cloud_firestore.dart';
5import 'package:firebase_auth/firebase_auth.dart';
6
7Future<void> assignRolloutBucket() async {
8  final uid = FirebaseAuth.instance.currentUser?.uid;
9  if (uid == null) return;
10  final userRef = FirebaseFirestore.instance.collection('users').doc(uid);
11  final snap = await userRef.get();
12  // Only assign if not already assigned
13  if (snap.data()?.containsKey('rollout_bucket') == true) return;
14  final bucket = Random().nextInt(100); // 0-99
15  await userRef.update({'rollout_bucket': bucket});
16}

After code export, add the package_info_plus package (version ^5.0.1) to pubspec.yaml. Create a Custom Action called 'checkAppVersion' that calls PackageInfo.fromPlatform() to get the current app version string, compares it to the minRequiredVersion App State variable using semantic version comparison, and if the app is below the minimum, shows a non-dismissible dialog with an 'Update App' button that calls launchUrl() to open the app store listing. For maintenance mode, in your Entry Page initState check the isMaintenanceMode App State variable immediately after the feature flag load — if true, navigate to a MaintenancePage with an estimated return time loaded from Firestore.

1// custom_actions/check_app_version.dart
2import 'package:package_info_plus/package_info_plus.dart';
3
4// Returns true if current version meets minimum requirement
5// Version format: major.minor.patch (e.g., '2.1.0')
6Future<bool> checkAppVersion(String minVersion) async {
7  final info = await PackageInfo.fromPlatform();
8  final current = info.version;
9  return _compareVersions(current, minVersion) >= 0;
10}
11
12int _compareVersions(String v1, String v2) {
13  final parts1 = v1.split('.').map(int.tryParse).toList();
14  final parts2 = v2.split('.').map(int.tryParse).toList();
15  for (int i = 0; i < 3; i++) {
16    final p1 = (i < parts1.length ? parts1[i] : 0) ?? 0;
17    final p2 = (i < parts2.length ? parts2[i] : 0) ?? 0;
18    if (p1 != p2) return p1.compareTo(p2);
19  }
20  return 0;
21}