Control Your Flutter App with Firebase Remote Config - Part 1

hi everyone welcome back to the channel in today's video we'll be looking at how you as a developer you can control your mobile app that's out there or basically how you can control that without having your users to update your mobile app from their respective app stores so in this particular tutorial we'll be using Firebase remote config and it's a really nice service which I thought I should talk about let's get started so as you can see in my screen we have like the default data app uh you can see it's running well on Android and iOS just the normal counter app you think most of you guys have interacted with that and we have already set up fibers my on the app so if you haven't answered take some time to to do so I also have the code on GitHub so you can just clone the real band and look at it so yeah I wanted to connect with the amplifiers so we'll be head we'll be I'll briefly talk about what we're going to do and then head over to the Fabrics console where we can get started and set up the remote field and then come uh basically retrieve the values from our mobile app biscal controller app so let's get started uh so in today's particular video we'll be looking at how we can change the theme color for example from Blue to red as you can see the app looks nice changes changes well and we'll be we'll be looking how you can do that program from a remote uh place and having your users app change according to your specifications basically controlling your app uh yeah so Firebase remote configure the service by Google and Firebase Let's Get Set over to the site uh which allows you to customize and experiment the app Behavior with server side configuration and feature floods so it's a really nice service and the things you guys will try it let's head over to the Firebase console right here uh let's go to remote config just click on the build section then click on remote config make sure your app is connected service if you can do this then create configuration and also make sure you've enabled analytics in your Firebase console uh for the sole purpose of targeting and stuff so let's create a parameter let's give it a name let's say primary color primary color data type let's be a string for the description let's just give you a short description and the default value let's say blue because it's my favorite color let's save that let's publish the changes now that I've published the changes uh all this information is available to our app to First you all you have to do is to set up the configuration in the mobile application so that you can fetch it so let's head over to our app let's create a service let's call it remote config service and in our remote config service we'll have to import to dependencies we have to in part their fabulous remote config then import Revo Port annotation so we'll be using Riverport to generate to make sure that our service is accessible throughout the app through through like widget traffic so import ant I'm also using GitHub compilers so I'd highly recommend that let's import annotation like that let's get a part remote config service strategy so this will be the generated file and let's annotate uh our fetch function to remove food let's give it a name so this will be our reward Point method that will adjust the string from our basically open method that will help us to fake the string from Firebase command config so we give it a feature string type and uh let's call it fetch sorry about supports quite a number of let me say data types one of them being string and you can fetch Boolean Json and all that kind of stuff so exciting for that it's important let's make the method asynchronous and before we finish the our value will need to get before effective value we need the key let's define the key that let's make it a required parameter required string key so I think uh we have we first have to initiate the to instantiate the Firebase remote config just like that then activate it but before activate it let's give it like uh some config settings so just like that copilot is really nice I love it and for the for the minimum effect interval let's give it like seconds 10 seconds so that you can be able to fetch as frequently as possible as frequently as possible then here we'll have to remove return the remote config to get stream key so just like that guys we've created a method that will allow us to fetch strings from from Fabrics remote to config so let's run the code generator let me adjust this build let's give it a second see that it has generated this code first which basically gives us the provider which is called the FED string config provider and it's another dispersed feature provider which will basically allow us to fetch this string from Firebase so let's go to our main.dot file uh make sure that Firebase is initialized correctly after the widgets flutter binding and show initialized method and then wrap your my application with the provider scope which will allow the app to access all River projectors throughout the app all robot classes I mean and uh in my app folder see that we have our colors the thread which is statically defined let's wrap this up with the consumer consumer and now let's add the two params like that let's get a variable color Let's uh use ref.watch ref.watch allows us to basically constantly listen to new changes but you can use craft.red this will not be listening to me changes every time let's just use ref.trade but it will be fetching since it will be fetching we have to constantly observe for the changes so let's use reflect once after towards are fetch config string provider this has been generated by uh our let me say it has been erased by our our Liverpool generator let's do that let's look at this code if it's loading let's just use maybe when you can just handle one case the or else which is the default case let's just return our default color color the trade on data which is a string let's return let's create a utility which allows us to change values from string to color let's get a method get color like that let's generate all the colors that we need I want to give it more colors let's give it some time to like that yeah like that let's go back to our mind like that get color data and just like that it will be able to convert our color to where we want it let's change this parameter to character that it will use this color let's go to our remote config service and see everything is set up correctly color now our key is primary color as you can see right here let's just copy that kit primary color and just like that you see that our app has changed color blue because it has fetched that if we look at our safari our browser see that we have color blue and the color has changed as as we expected it to change so let's try to change the color to a different color let's say if you want like a green color this is that I have okay in our Android it has changed to Green in our iOS let's see it doesn't change the green so as you as you've seen guys the colors the colors have changed like the way we expected it to change the uh based on our configuration so we've just seen how you can change the colors from basically from the team colors based on like your remote configuration what if we want the colors to change or what we want something to change in the app on the Fly Like instantly so we can use streams and good thing the the good team at Firebase are really did uh some good work on that and made sure that Firebase remote config supports real-time configuration so you can change your values and they'll they'll be available to users on the fly so let's see how you can do this so we'll go back to our remote config service but we just created a few seconds ago I will create another method at riverpod it's called the metal it's a stream so let me just close this terminal uh let's say extreme instead of a future now we use a stream a stream which returns a string uh fetch string configuration stream let's see everything is good up to this point and from this point we'll have to add a listener so to add a listener which basically constantly listens for changes will have to use remote config that on on val on config updated listen so once we basically once the config is updated we can call this method again basically kind of like recursion so let's just refresh this fast generate the code and fratern will run a build you can use slatappa Brand Build run a watch but it's kind of heavy on memory and yeah since I'm recording the screen and everything uh it might be a little bit laggy so I don't know that I've deleted the code you can come here and refresh the providers you can read for this in this case we'll use Rev to refresh just like that let's go back to our main.file and change our value from first and config string provider to search config configuration config stream provider that we just generated and like that just like that when we change our values for example from green to let's say red and we publish the changes we'll see that our app will reflect the new change as you have seen right here so let's let's do it again let's change it for example let me minimize my screen so that you can be able to see the wireless change on the Fly let me also put my 100 screen here let's change the value to Bubble publish the change and just like that guys the colors have changed uh thank you guys for watching and I'll see you in the next video the next video I'll talk more like of like maybe advanced concepts maybe if you want to Target like the remote config for a specific User Group basically be testing and things like that or users in a specific region and things like that so bye

Channel: Flutter University

Views: 2,211

Keywords:

Id: Z6d0Eus94QY

Length: 17min 35sec (1055 seconds)

Published: Mon Aug 07 2023