Flutter Firebase Remote Config Examples

Flutter Firebase Remote Config Tutorial

Firebase Remote Config is a feature of Firebase that allows you to change the behavior and appearance of your app without requiring users to download an update. In this tutorial, we will explore how to use Firebase Remote Config in a Flutter app.

Table of Contents

1. Installation
2. Initializing Firebase
3. Fetching Remote Config Values
4. Setting Default Config Values
5. Fetching Remote Config Values with Conditions
6. Caching Remote Config Values
7. Listening for Remote Config Changes
8. Activating Fetched Config
9. Logging Remote Config Fetch Results
10. Fetching Remote Config with a Timeout
11. Using Remote Config in Flutter UI

Installation

To use Firebase Remote Config in your Flutter app, you need to add the firebase_remote_config package as a dependency in your pubspec.yaml file:

dependencies:
  firebase_remote_config: ^3.0.0

Then, run flutter pub get to fetch the package.

Initializing Firebase

To use Firebase Remote Config, you need to initialize Firebase in your Flutter app. Follow these steps to initialize Firebase:

1. Go to the Firebase console (https://console.firebase.google.com/) and create a new project if you haven't already.
2. Click on "Add app" and select Flutter as the platform.
3. Follow the instructions to download the google-services.json file and place it in the android/app directory of your Flutter project.
4. Update the android/build.gradle file to include the Google Services Gradle plugin:

dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.3.10'
}

5. Update the android/app/build.gradle file to apply the Google Services Gradle plugin and include the Firebase Remote Config dependency:

apply plugin: 'com.google.gms.google-services'

dependencies {
    // ...
    implementation 'com.google.firebase:firebase-analytics:19.0.1'
    implementation 'com.google.firebase:firebase-remote-config:20.0.3'
}

6. In your Flutter app's main entry point (lib/main.dart), import the Firebase and Remote Config packages:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';

7. Initialize Firebase in the main function:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Fetching Remote Config Values

To fetch remote config values, use the fetch method of RemoteConfig class. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

await remoteConfig.fetch();
await remoteConfig.activate();

The fetch method retrieves the latest config values from the Firebase servers, and the activate method makes the fetched values available for use.

Setting Default Config Values

To provide default values for your config parameters, use the setDefaults method of RemoteConfig class. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

remoteConfig.setDefaults({
  'welcome_message': 'Welcome to MyApp!',
  'button_color': 'blue',
});

The default values will be used if the actual config values are not available.

Fetching Remote Config Values with Conditions

You can fetch remote config values based on conditions. For example, you can fetch different values based on the user's country or language. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

await remoteConfig.fetchAndActivate();

final String welcomeMessage = remoteConfig.getString('welcome_message');
final String buttonColor = remoteConfig.getString('button_color');

The fetchAndActivate method fetches and activates the config values, and then you can retrieve the specific values using the getString method.

Caching Remote Config Values

By default, fetched remote config values are cached for 12 hours. You can customize the cache expiration time using the setConfigSettings method. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

final Duration cacheExpiration = const Duration(hours: 6);
remoteConfig.setConfigSettings(RemoteConfigSettings(
  fetchTimeout: const Duration(seconds: 10),
  minimumFetchInterval: cacheExpiration,
));

await remoteConfig.fetchAndActivate();

In this example, the cache expiration time is set to 6 hours, and the fetch timeout is set to 10 seconds.

Listening for Remote Config Changes

You can listen for changes in the remote config values using the addValueListener method. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

remoteConfig.addValueListener((RemoteConfigValue value) {
  // Handle config value changes
});

The callback function will be invoked whenever a config value changes.

Activating Fetched Config

After fetching remote config values, you need to activate them using the activate method. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

await remoteConfig.fetch();
await remoteConfig.activate();

The activate method makes the fetched values available for use.

Logging Remote Config Fetch Results

You can log the fetch results of remote config using the RemoteConfigFetchStatus enum. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

final RemoteConfigFetchStatus fetchStatus = await remoteConfig.fetch();

if (fetchStatus == RemoteConfigFetchStatus.success) {
  print('Fetch successful');
} else if (fetchStatus == RemoteConfigFetchStatus.failure) {
  print('Fetch failed');
} else if (fetchStatus == RemoteConfigFetchStatus.throttled) {
  print('Fetch throttled');
}

You can handle different fetch status codes accordingly.

Fetching Remote Config with a Timeout

You can set a timeout for fetching remote config values using the setConfigSettings method. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

remoteConfig.setConfigSettings(RemoteConfigSettings(
  fetchTimeout: const Duration(seconds: 5),
));

final RemoteConfigFetchStatus fetchStatus = await remoteConfig.fetch();

if (fetchStatus == RemoteConfigFetchStatus.success) {
  print('Fetch successful');
} else if (fetchStatus == RemoteConfigFetchStatus.failure) {
  print('Fetch failed');
} else if (fetchStatus == RemoteConfigFetchStatus.throttled) {
  print('Fetch throttled');
} else if (fetchStatus == RemoteConfigFetchStatus.noFetchYet) {
  print('Fetch not done yet');
}

In this example, the fetch timeout is set to 5 seconds.

Using Remote Config in Flutter UI

Once you have fetched the remote config values, you can use them in your Flutter UI. Here's an example:

final RemoteConfig remoteConfig = RemoteConfig.instance;

final String welcomeMessage = remoteConfig.getString('welcome_message');
final String buttonColor = remoteConfig.getString('button_color');

return Scaffold(
  appBar: AppBar(
    title: Text(welcomeMessage),
  ),
  body: Center(
    child: RaisedButton(
      color: buttonColor == 'blue' ? Colors.blue : Colors.red,
      child: Text('Click Me'),
      onPressed: () {
        // Handle button click
      },
    ),
  ),
);

In this example, the welcomeMessage is used as the app title, and the buttonColor is used to set the button color.

That's it! You have learned how to use Firebase Remote Config in a Flutter app. Experiment with different config parameters and conditions to customize your app's behavior and appearance without requiring updates.