Flutter x Firebase | Remote Config
For the last article in our Flutter x Firebase February series we’ll be looking at Firebase Remote Config.
Firebase Remote Config is a cloud service that lets you change the behaviour and appearance of your app without requiring users to download or re-install an app update. E.g., changing icons or elements in the UI depending on the occasion/season of the year. (A good example I can think of is Candy Crush. With Candy Crush, the different candies change color and/shape during various seasons of the year. And these updates come through without needing to re-install the application).
When using Firebase Remote Config, you create in-app default values which will be used to control the behaviour and appearance of your app. Then, you can later use the Firebase console or the Remote Config backend APIs to override the in-app default values for all app users or for segments of your user base. Your app controls when updates are applied, and it can frequently check for updates and apply them with a negligible impact on performance.
Key capabilities of Firebase Remote Configs
- Quickly rolling out changes to users: With Remote Configs, you can make changes to your app’s default behaviour (with no need to publish an app update) by changing server-side parameter values.
- Customise your app for segments of your user base: You can use Remote Config to provide different variations and experiences to different segments of your user base. E.g., by app version, language etc.
- Running A/B tests to improve your app: A/B testing (split testing) is a testing methodology used to compare two versions of an application to know which one performs better. With Remote Configs, you can push different app versions/features across different user segments and thus you can check on how the features are received. When you validate these improvements, you can then roll them out to your entire user base.
Implementing marketing/promo banner with Firebase Remote Config.
Define the changing elements
To get started with Remote Config, you’ll need to know which aspects of your app behaviour and/or UI you want to be able to change using Remote Config. Then, translate these into the parameters that you will use in your app. For our app, we can configure some promotional/marketing messages.
Create the parameters
Parameters are key-value pairs that can be used as feature flags. You can change these parameters anytime you want to update the elements noted above. Your application will then periodically fetch these parameters from the server, thus allowing you to remotely change your app configuration without the need to push a new release. So, the parameters we can set for our application promo banner are: showPromoCard — this is a Bool value that we can toggle off and on for when we want the card to be visible and the promoCardText — this is the message/text to be displayed on the card.
Update UI
For the marketing message to be displayed in our app, we’ll need to have a widget that receives this data. So for that reason, I’ll be adding this container as a ‘banner’ and we can then configure it’s visibility and the message displayed remotely as needed..
Container(
height: height * 0.2,
width: width * 0.7,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.black87,
),
child: const Center(
child: Text(
promoCardText, // This is where promo text goes,
style: TextStyle(
fontFamily: 'YouTubeSansRegular',
color: Colors.white,
fontSize: 16.0,
),
),
),
),This is therefore the resulting UI.
Note: The banner will be tied to the showPromoCard flag. And because at first it’ll be set to the default false, this banner will not be visible at the beginning — you’ll see this in the demo at the end.
Add code logic get parameter values
Add the Firebase Remote Config dependency to your project. Run flutter pub add firebase_remote_config. Aside from that, for Remote Config, Google Analytics is also required. Run flutter pub add firebase_analytics.
You’ll then need to listen to the changing values from the server. Thus, get an instance of Remote Config inside the initState function of the dart class and then listen to the changes. Using the argument from the onConfigUpdated method, you’ll get the information about the specific parameter as it gets updated. To get these values, call the getBool() and getString() method with the parameter key as an argument. There are other methods depending on the data type required e.g., getDouble(), getInt()
var showPromoCard = false;
var promoCardText = '';
@override
void initState() {
super.initState();
final remoteConfig = FirebaseRemoteConfig.instance;
remoteConfig.onConfigUpdated.listen((event) async {
await remoteConfig.activate(); // activate the parameters so that new values are picked and updated in your app
setState(() {
showPromoCard = remoteConfig.getBool('showPromoCard');
promoCardText = remoteConfig.getString('promoCardText');
});
});
}Publish the parameters
The parameters we added in the second step are still in draft mode. In order for the changes to be seen on the app, they need to be published. Once published, the updates will be fetched by the client app. Anytime changes are made to the parameters, they have to be published in order to be visualised.
Testing
Now let’s see Remote Config in action!!
This is the promo we are running this February: The February Catsagram newsletter is now available. Valentine’s offer: 40% off on all cat food! https://kymoraa.medium.com/
As you can see, we are able to toggle on/off the promo card as well as change the text remotely. The changes are visualised instantly on the client app.
Thus, Firebase Remote Config is very useful in that, you don’t need to write a lot of complex code nor publish new APKs and app bundles every time you want to make a small update to your app. You can tweak bits of your app features and UI remotely with this service.
This brings us to the end of our Firebase x Flutter February series, if you enjoyed the content, leave a clap and share with your networks. I absolutely loved worked on this demo app and diving more into Firebase features. Let me know if you followed these tutorials and tried any of these services.
“You can thrive and excel when you’re working remotely, if you adopt the mindset, habits, and tech tools of professionals who are even more productive outside the office.”
— Robert C. Pozen, Author of Remote, Inc.
Muchas gracias por leer ❤
In case you missed the previous articles in the series, check them out here:
