Using Firebase Remote Config in Flutter
Hello! I was working on Firebase Remote Config for a while and just wanted to share with you what I know. If you are ready, let’s begin 🔥
Friendly Reminder
I highly recommend you use the identical versions of Flutter and packages. In this way, we will prevent possible changes and problems. I used Flutter version 3.0.4.
If you want to read this article in Turkish, you can read it here.
Installation
Before everything, we need to create a Firebase project. You can follow the steps in this document.
After the creating process, we need to add the packages we need. First of all, to be able to use Firebase Remote Config, we need to add firebase_core (1.20.0). You can read the official documentation to learn how can add it to the project.
Is Firebase ready? Great! The next one is adding the firebase_remote_config (2.0.13) to the project.
Preparing the Remote Config,
Open the Firebase Project you created. Then, find Engage > Remote Config on the left menu.
If you have not previously used Remote Config in the current project, an introduction page will welcome you.
You can continue by pressing the Create configuration button.
In general, config parameters consist of a key and value/values. For now, we will create a parameter for showing a message at the center of the screen. The key will be "welcome_message", and the value will be Hey there, welcome to the app!. Parameters have a Data Type. We chose String because we entered a text. Press the Save button to continue.
The updated version of the config waits as a draft. Thus, the application is not affected. You can see the current config and the Draft below the screen.
When you decide to publish the changes, you can press the Publish changes button.
We published our first Config. Congratulations 🎉 Let’s go back to the application side.
Creating Remote Config Service in the Application
We need a service to handle Firebase Remote Config in the app. This service will help us to work on Remote Config cleanly and fit it into one class.
First, create a class named FirebaseRemoteConfigService and put a field for the FirebaseRemoteConfig instance.
It will be helpful to make it Singleton because we will use it more than once in the app. You can get help from get_it, flutter_bloc, provider, and flutter_riverpod packages as an alternative. (But I do not want to make this example complex. So, I will keep going in this way.)
Thanks to this singleton structure, the FirebaseRemoteConfigService instance will be created once, and the instance will be returned each time.
We created our service in general. Now, create a class for the config keys.
We can access the config parameters’ keys by this helper class.
We have two options to get the value of config parameters on Remote Config.
The first option is to export the get methods of the FirebaseRemoteConfig.
The second option is to create a special getter for each config parameter.
The second option can be hard to maintain if you have too many config parameters because of creating a getter for each config parameter. It will start to grow.
The service class will not grow in the first option because the default getters will be kept the same.
The choice is yours.
Configuration of the Remote Config Service
We created a Firebase project, prepared Remote Config, added dependencies to the application, and created the helper class. The last thing to be ready to use, we need to initialize the FirebaseRemoteConfig.
The first step of the initialization process is to set the Config Settings.
fetchTimeout is the maximum duration to wait for the response from the Remote Config server. The default value is one minute.
minimumFetchInterval is the maximum age of the cached data. The default value is twelve hours.
The second step is to set the defaults.
If you mark a parameter as Use in-app default as below, you have to set a default value by the setDefaults() method. Default values can be only String, int/double, or bool.
The last step is to fetch and activate the config parameters. If you want, you can use debugPrint() to see the result in the console.
The reason for making the fetchAndActivate() method public is to be able to get the latest config parameters when needed.
Now, put all the steps into a method.
We can initialize the Remote Config in the main() method.
Using Remote Config Parameters in the Application
All we need to do is access the parameters synchronously by the FirebaseRemoteConfigService.
Here it is 🥳
Fetching Latest Config in the Application
Firstly, if you want to update the config often, you need to set the minimumFetchInterval that we mentioned before to lower. Otherwise, until the age of cached data is up, it will continue to use the cached config.
Let’s convert our HomePage to StatefulWidget.
Add a FloatingActionButton and put our fetchAndActivate() and setState() methods into onPressed parameter.
I mentioned why we made the fetchAndActivate() method public.
Since the button is ready, we can go back to the Firebase Console and change the value of the welcome_message parameter.
Now, go back to the app and press the FloatingActionButton.
The text is changed 🤩
Conclusion
Firebase Remote Config enables to change of the specific parts of the application. These parts can be text, JSON, or Boolean. This way, change the theme or UI, show or hide a button, open or close a specific feature, and much more… Whatever you do, the steps always will be the same.
I hope this article is helpful for you 💙
Finally, I thank Murat for making me curious about Firebase Remote Config.
You can find me on these links below.
