Flutter Firebase Remote Config Tutorial: Customize Your App Dynamically #firebase #flutter

so here in this app I want to be able to show a banner at the top of this page and I want to be able to control that remotely so I want to be able to show or hide the banner remotely I want to be able to change the text remotely and I want to be able to set the action remotely specify the action so on clicking the banner which page should be loaded or which activity should be loaded I want to specify that remotely so I can do that by implementing the logic in my back end myself or I can do that easily using Firebase remote config so now I'm going to try to implement this to achieve this using Firebase remote config so first thing that I'll do is to is to go to the documentation of Firebase remote config and I'll see how to implement this how to use Firebase remote config with flutter I'm not going to walk you through all of these steps everything written here I'm going to show you the minimum code required to achieve this so the first thing that you have to do is to set up Firebase with your flutter app so I have already set up Firebase with this flutter project so this project is configured to use different Firebase Services if you have not done that then you have to do that and if you don't know how to do that then I'll add a link in the description you can go to that and you can learn how to set up Firebase with a flutter app all right so now we have to add the specific dependency for using Firebase remote config and for that you have to you can run this command flutter pub at Firebase remote config or you can also add the dependency in the pubp spec. ml file yourself manually and as a part of the process you also have to install the Firebase analytics dependency so add that to flutter pub at Firebase analytics now you can try running the app once now let me show you the code of the project that I have created so here is the main function and here this part is Firebase initialization we have to call Firebase do initialize app and we have to do this for initializing Firebase to use any of the Firebase services and we have to initialize this thing widget flutter binding. answer initialize to able to use this Firebase plugin all right so and for other works as well but in this case let's not focus too much on this thing so basically this is the Firebase installation steps and then we are going to get an instance of the class Firebase remote config inside this in state function of the my home based State class so this widget my homepage is the one responsible for this page for this page and here is the state class the corresponding State class for this wiget my homepage State and here you can see that I have a stack because I want to overlap widgets right I want to display the banner on top of this screen and does I have added this stack and inside this like I have added a g view for displaying the list of products and I have this card which is responsible for the banner but I am displaying it only if this Boolean is true show Banner is true which I have initialized to false and then I have initialized another variable Banner text with an empty string and these values we shall set them we shall change them using Firebase remote config all right so now we have show Banner false we shall make it true from Firebase remote config and accordingly we shall display or hide the banner now to get the values from remote config we are going to listen to the changes to the values that we have in remote config and for that first of all we have to get an instance of the class fire remote config so inside the inate function or of the of this state class my homas state let us get an instance of the class Firebase remote config we can call Firebase remote config do instance and this will give us a single tone so basically from whever inside our project we call Firebase remote config do instance we shall get the same instance of the Firebase remote config class so if we set some values here we are sure that in some if we try to access the instance somewhere else in our code we shall get the same values the same properties the basically the same instance of Firebase remote config now we have got the instance of Firebase remote config now we are going to listen to the changes all right and for that we shall call Firebase remote config do on config updated and then we shall call listen so this is a stream of remote config updates and we shall listen to it and to this listen function we shall pass an implementation of a function and inside this function we are going to write the code to use the values of the deot config so we shall get the values and accordingly we shall update the UI or perform some other task this function that we are going to pass to this function list has a specific syntax it has a parameter it getes an instance of this class remote config update as an argument and using this we can get the information about the specific remote config fields that has been updated we can get a list of the fields which has been updated which we are not going to use in this case so in some cases that that may be a useful thing in this case we are not concerned about then because we have a very few fields we shall work with if only a three or four Fields all right so we are not going to take a look at which Fields has been updated which are not so we are going to Simply activate those fields so unless you call remote config do activate the new values will not be effective so if you don't call this then you will still be getting the old values of the instance all right so this will activate the new values the changes that has been made to remote config so we are going to set the values to remote config using Firebase console but you can also do that from the back end using the different apis that Firebase provides but in this case we are going to provide the values through the Firebase console only I'm going to show you that but before that let me show you how to get the values so we have these two Fields here right show banner and Banner text depending on the values we are going to display the banner and we are going to get the values from remote config so we have this instance and show Banner is Boolean so we shall call remote config dog Bull and we shall pass the name of the field this is what we are going to set in remote config also and so this has to be the same with the one that we set in the console and then we are we are also going to get the banner text and once we get these values we shall call set state so that the UI gets rebuilt makes sense right now let me show you the console Firebase console and let us try to set some values using that remote set some values to the remote config and we shall see how it changes here now if you run the app we should see nothing because this is false and we have not set any value in remote config now if you go to your projects page on Firebase you will find this option remote config inside this drop- down menu release and monitor so click on it and you have to click on get configuration and this options will appear to add parameters so here first of all we are going to add one parameter which will be of typ Boolean so Banner this has to be same with the one that we are using here that we have specified here in our project so this has to be show banner and then we shall add one another which is Banner text so it is show banner and this will be Boolean and you can provide some description here show hide Banner and then provide a default value let's make it true now save this let us also add the other parameter for the text of the banner and then we shall publish them together all right so here we can see the list of parameters that we have added that we have in our remote config so now we have only one show Banner let's add one more let's let's name it Banner text this will be string and now let's add one text here let's add welcome to the app now save the changes and we have to publish the changes now you'll see that it has been labeled as draft Because unless we click on this button to publish the changes the changes will not be affected so let's open the app and we shall click on the publish button we should be able to see the changes immediately because this should make the banner appear automatically all right because we are listening to the changes right so let's click on this button publish changes and notice that this Banner has appeared with the text that we have specified here now let us try to change the text once the changes should be effective immediately let's save again we have to publish the changes and notice that the text got changed so this is a very helpful feature right you can change the UI of your app you can make a lot of things completely remotely without publishing any update and without implementing complex logic in your own backand so Firebase remote config is a very helpful and Powerful feature you can you can make features available on demand you can for example let's consider that you have some button here and that takes the user to some feature some other feature some other page and you want to experiment with that feature so you may want to enable that feature for only one week then you can add this add one parameter in remote config to make that button visible or invisible or hide that button so whenever you want to make that feature available simply make it visible by changing the value the corresponding value in your remote config and whenever you want to hide it then make that false makes sense right you can you can experiment with different features in that way you can experiment with different colors of your UI you can do a lot of different things now let me show you one problem that may appear and that is if we don't set values for one particular item so let's delete this text and let's see what happens so now we have the value for the Boolean to make the banner visible or hide it but we don't have the text so in that case the banner appears but the text is not appearing and this does not look good this is not desert Behavior right so this may be trivial we you may say that we can set it set the default values in our variables of the state class itself but in case of remote configs the convention is to provide some default values for the remote config parameters and we should do that so let me show you how to do that as well so now we are going to provide some default values that will be used when we don't get the values from the remote config from Firebase from the server all right so we don't have set any values in the console then we sell the app will use the values that we said here the default values so for that again we are going to get the instance of the class Firebase remote config we will call Firebase remote config do instance this will give us the same instance of Firebase remote config this this is a single tone so we can use it anywhere in our app and we shall get this same instance only and here we are going to set default values by calling this function set defaults so remote config is the instance of Firebase remote config and we shall call the function set defaults and to this function we shall pass a map inside the map we shall provide the values in key value pairs the default values so let's add a map here and then we shall provide qy value pairs for our parameters so let's add true as the default value for show banner and let's add this text as the default text for the Panner text parameter all right we have to make some changes in one more place and that is inside our state class so here is our state class my homepage state so here inside in state we are listening to the changes of our remote config so whenever something changes in the back end if we make changes to the parameters in Firebase console this code will be executed but to get the default values we shall add these two statements here as well so we have some default values we shall try to get them here and whenever something changes in the back end then the values will be updated with the new values from the remote config now save the changes and let us take a look at the app so here we have this Banner with the default defa text now if we change the text again in the back end let's add the text add the banner text parameter so here now we have the default values we have the banner and we have the default text because we don't have the corresponding parameter for the text in our remote back end right in the remote config in Firebase console we don't have that so let us try to set that again and let us see what happens so here I'm creating a new parameter Banner text which will be a string let's save this and let us publish the changes and we should see the changes immediately here and here we got the changes so this is cool right now if you take a look at this data type drw drop down you'll find we have the option to add Jon so we can add a complex structure too so for example let us consider that we want to define the target page that we want to take the user on clicking this Banner then we can Define it using a zon we can Define it without using a zon too but using zon we can make it a little more flexible for example let's consider that in some cases we load an external web page and in some cases we load a page of the app itself so we can use zon to Define all those conditions and we can add some eils in our code and we can perform this navigation easily so for this video I'm going to end it here itself just before leaving let's summarize what we have learned the main points so most important component is this in stance and then we have to listen using this statement we have this stream on config update and we can listen to the stream to the stream we can pass a function and inside the function we can get the values from the remote config but before getting the new values we have to activate them we have to call remote config do activate so the instance then this stream to which we can listen and then we have to activate and then we can access them all right and to set the default values we can use this function remote config do set defaults and to this function we have to specify the default values inside a map we have to add the key value pairs inside a map all right so I hope this video has been helpful to you if it has been helpful then like the video subscribe to the channel and and comment if you have any doubts or if you have any feedback

Channel: Droidmonk

Views: 1,988

Keywords: firebase, firebase remote config, remote config, firebase developers, flutter, flutter tutorial, firebase developer

Id: 65jx06_lnzE

Length: 19min 1sec (1141 seconds)

Published: Thu Dec 07 2023