Using Firebase Remote Config to Roll Out Features Gradually in Flutter

Introduction

In mobile development, controlling feature rollouts is critical for reducing risk and improving user experience. Flutter developers can leverage Firebase Remote Config to toggle features remotely without publishing new app versions. This tutorial outlines a code-forward approach to integrate Remote Config into your Flutter app, define default values, fetch and activate parameters, and execute percentage-based feature rollouts.

Setup Firebase Remote Config

Begin by adding the Firebase Remote Config plugin to your pubspec.yaml. Ensure you’ve configured your Flutter app with Firebase CLI or the console and included the google-services.json (Android) or GoogleService-Info.plist (iOS) files.

In your main.dart, initialize Firebase and acquire a RemoteConfig instance. Set conservative minimum fetch intervals during development; increase caching in production for performance.

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';n
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  RemoteConfig config = RemoteConfig.instance;
  await config.setConfigSettings(RemoteConfigSettings(
    fetchTimeout: Duration(seconds: 10),
    minimumFetchInterval: Duration(hours: 1),
  ));
  runApp(MyApp(remoteConfig: config));
}

Defining and Fetching Parameters

Define default values for each feature flag in your code to guarantee predictable behavior if fetch fails. Use setDefaults or configure defaults in the Firebase console.

After initialization, call fetchAndActivate() to retrieve updated values and apply them:

class FeatureManager {
  final RemoteConfig remoteConfig;
  FeatureManager(this.remoteConfig) {
    remoteConfig.setDefaults({
      'new_ui_enabled': false,
      'max_items_to_show': 20,
    });
  }

  Future<void> initialize() async {
    bool updated = await remoteConfig.fetchAndActivate();
    print('Remote config updated: $updated');
  }

  bool isNewUiEnabled() {
    return remoteConfig.getBool('new_ui_enabled');
  }
}

Invoke initialize() early in your app lifecycle (e.g., in a splash screen or top-level provider) to ensure flag values are ready before critical UI builds.

Rolling Out Features Gradually

Firebase Remote Config enables gradual rollouts via percentage-based conditions. In the Firebase console, create a condition (for example, 10% “new_ui_enabled”) targeting users by percentage. Link this condition to your new_ui_enabled parameter. Users in the 10% bucket will receive true, others false.

For more granularity, combine user properties (country, app version, or custom identifiers) to control which segments see the feature. This phased rollout helps catch unexpected errors before full deployment.

At runtime, simply check the boolean flag before rendering new UI components:

if (featureManager.isNewUiEnabled()) {
  return NewDashboard();
} else {
  return LegacyDashboard();
}

Monitor analytics and crash reports for users in the test bucket. Adjust the rollout percentage or conditions in the console without modifying your code.

Best Practices

• Set safe defaults: Always default feature flags to disabled or a stable state.
• Use descriptive parameter names: e.g., promo_banner_enabled or checkout_flow_variant.
• Cache response: Tune minimumFetchInterval to balance freshness and performance.
• Monitor traffic: Integrate Firebase Analytics to tag events and track flag performance.
• Version your flags: Clean up unused parameters periodically to avoid console clutter.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By integrating Firebase Remote Config with Flutter, you gain fine-grained control over feature rollouts. Define defaults, fetch parameter values at startup, and use console-based conditions to manage gradual deployments. Adhering to best practices—set safe defaults, monitor usage, and iterate—ensures a stable, responsive mobile development lifecycle.