Ajouter Firebase Remote Config pour un projet Flutter


Avatar de Pierre Courtois

Vous souhaitez stocker des valeurs dans le back-end de votre application pour pouvoir modifier votre application sans avoir à la republier ? Dans ce rapide guide, je vous explique comment mettre en place la solution de Remote Config de Firebase.


À quoi sert Firebase Remote Config ?

Firebase Remote Config est un service de Firebase qui permet de modifier dynamiquement le comportement et l’apparence d’une application sans avoir à la republier. Il est particulièrement utile pour :

  • Changer l’interface utilisateur à distance : Modifier des couleurs, des textes ou des images sans mise à jour de l’application.
  • Activer ou désactiver des fonctionnalités : Déployer progressivement de nouvelles fonctionnalités pour un groupe spécifique d’utilisateurs.
  • Personnaliser l’expérience utilisateur : Afficher du contenu adapté en fonction des segments d’audience créés avec Google Analytics.
  • Effectuer des tests A/B : Comparer plusieurs variantes d’une fonctionnalité pour optimiser l’engagement utilisateur.

Une autre manière de l’utiliser est également de stocker des informations en back-end, pour pouvoir les réutiliser, comme pour une clé API.

Tarification de Firebase Remote Config

Firebase Remote Config est gratuit dans la limite de 5 000 mises à jour par projet et par jour. Au-delà, Google facture l’utilisation supplémentaire.

PlanLimite quotidiennePrix
Gratuit5 000 mises à jour0€
PayantAu-delà de 5 000 mises à jourTarif selon l’utilisation

Étape 1 : Ajoutez le package Remote Config

Si ce n’est pas déjà fait, la première étape pour intégrer remote config à votre projet Flutter, va être de mettre en place Firebase. Une fois cela fait, ajoutez les packages dont vous allez avoir besoin, avec cette série de commandes :

flutter pub add firebase_core
flutter pub add firebase_remote_config
flutter pub add firebase_analytics

Firebase Analytics n’est requis que pour le ciblage conditionnel basé sur les audiences.

Importez ensuite ces packages, dans vos fichiers dart avec les lignes suivantes :

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:firebase_analytics/firebase_analytics.dart';

Étape 2 : Créez une configuration dans Firebase Remote Config

La deuxième étape va consister à stocker les valeurs dont vous aurez besoin, dans votre back-end Firebase. Pour cela :

  1. Allez dans la Console Firebase et choisissez votre projet.
  2. Dans « Tous les produits », sélectionnez Remote Config.
  3. Cliquez sur Créer une configuration et ajoutez les variables que vous souhaitez stocker. Par exemple :
    • welcome_message : « Bienvenue sur notre application ! »
    • feature_toggle : true (pour activer une nouvelle fonctionnalité)
    • discount_rate : 0.15 (pour modifier un taux de réduction en temps réel)
  4. Publiez les modifications pour que les valeurs soient accessibles par l’application.

Étape 3 : Configurer Firebase Remote Config dans Flutter

Enfin, la dernière étape va être de créer une instance de Remote Config dans votre projet Flutter et de récupérer les valeurs que vous avez stockées :

1. Initialiser Remote Config :

//Vous pouvez le faire dès votre fonction main, ou lorsque l'utilisateur presse sur un bouton 

final remoteConfig = FirebaseRemoteConfig.instance;
await remoteConfig.setConfigSettings(RemoteConfigSettings(
    fetchTimeout: const Duration(minutes: 1),
    minimumFetchInterval: const Duration(hours: 1),
));

2. Récupérer des valeurs stockées :

String welcomeMessage = remoteConfig.getString('welcome_message');
bool isFeatureEnabled = remoteConfig.getBool('feature_toggle');
int maxItems = remoteConfig.getInt('max_items');
double discountRate = remoteConfig.getDouble('discount_rate');

3. Définir des valeurs par défaut (utile si les valeurs distantes ne sont pas encore disponibles) :

await remoteConfig.setDefaults({
    "welcome_message": "Bienvenue !",
    "feature_toggle": false,
    "discount_rate": 0.10,
});

4. Forcer un rafraîchissement des valeurs Remote Config :

await remoteConfig.fetchAndActivate();
Avatar de Pierre Courtois