Update Flutter App State Remotely using Firebase Remote Config

Full Source Code GitHub Repo link is available at the end.

Hello, Reader !!

Ever thought how some apps updates they UI color or show some specific sale dialog without even updating the app?

This technique is called as Remote Configuring and Firebase with a lot of features also provide Remote Config.

Credit: firebase.google.com

So, I this article I will walk you through how you can also use this awesome features to enhance User Experience.

Prerequisite

1. Flutter App with Firebase configured.

If you are done with above requirement then open your Firebase Project and Navigate to Remote Config tab. (In Left Drawer under Grow)

Now here you will get a Window titled Add a parameter which contains two main field’s Parameter Key and Default value

While name Parameter Key be careful as this same key will be used in our App to get the Data.

Creating Parameters:

For Demonstration i will create 3 Parameter for boolean, int and string value respectively.

After creating All the required Parameter click on Publish changes, you will get a prompt saying all the data will be available and will show changes in the app (but we know we have not yet connected the app 😁) simply press OK.

Now when they are published they will look like this:

And now we are Ready to Rock..🤐 !! I mean we are Ready to Start Flutter App coding..

Flutter App Code

What the First Step?

After the usual Firebase setup (adding Flutter app to Firebase project and pasting the google-services.json file) add required Packages:

1. firebase_core
2. firebase_remote_config

Next, for Better practice create a remote_config_service.dart file and start writing the following code:

1. Import the firebase_remote_config package.
2. Then create 3 const variable to for 3 Parameters (look the values of the const variable is same as have defined in Firebase).
3. Now create a RemoteConfigService class and Create a Constructor for getting the instance of Remote Config.
4. After that we have default which contains the default values in case no is fetched or available on Firebase.
5. Then create a getInstance method to call from the Page we need to fetch this data.
6. Now this step in important for showing the data in UI we are creating getter for all the parameters we have in our case it’s 3.
7. After that we are creating initialize method (name of both the method can we any thing whatever you want to call them) in this method we are initializing the default values to remote config using setDefaults(defaults) method and passing the defaults variable which is a map of <String, dynamic>, after that we are calling _fetchAndActivate() which i will explain in next step.
8. In _fetchAndActivate() we will use fetch which takes expiration it takes a duration of decide at what time interval we should fetch this data in the above example we have used 0 seconds but in usual case we can use 24 hours or 1 hours depending on the data changing time and importance. And then finally we will call activateFetched() to fetch the data.

Now, we are done with the Service Class lets update UI or in this sample we will be checking if sample_bool_value is true then will be show the change our background color to amber or blue and we will also print the string value on screen.

Above is a simple RemoteConfig.dart file which contains a StatefulWidget

In initState we are calling initializeRemoteConfig() which will call getInstance() and initialize() of remote_config_service class.

Now to fetch Remote Config data use _remoteConfigService.whatEverYourGetterNameIs

Sample

So, that’s it for this article hope you will use this feature in your Upcoming App 👍

tsvillain/FlutterFirebase