Multiple Environments in Flutter | Android Product Flavours | ios Schemes

hey guys welcome back to a new flutter video today we are going to see how to work with multiple environments in flutter for that we first need to understand why it is required so in real world projects we need to develop app for multiple environments such as development and production each of these environments have a different database API configurations and are used by different people so your testing team will use the development environment and your real users that are on Play store or app store they will use the production environment whenever you build a new feature in your app you build it first for the development environment and once that is tested thoroughly you roll out those features to the production environment this is how uh real world development works now not wasting enough time let's get into the code part so I have a new flutter app created here it's brand new and uh I have run it on two different devices just to uh so that we can see the differences when we implement the environment features so for that let's just start by creating a environment file and I'll will name it env. do now inside this we will create a enum which will have two environments development and production and then we will create a class so that uh we can use that environment inside our app so this is the code for that uh we have a enem here which has development and production environment and a class app envirment which will be used everywhere in the app now uh this class has some properties base API URL which is just an example to show that whenever your backend is developed they are also developed on multiple environments so your development API URL might be different the title for the app that may be different and this is how we are going to configure it so let's go in main. do and let's just copy the main function here since main is the entry point of any flutter app or any Dart app basically we go ahead and create two new files one will be main dev. do and we'll just past the main method here and we'll import it from material uh we'll do the same thing for uh Main prodad and uh similarly we'll import things from here just copy it now inside our main Dev file we will set up the environment to the development environment so how do we do that it's basically uh very simple we'll just call the app environment. setup environment method that we created so let's see the uh EnV file we have a app envirment class and here we have a setup environment method static method so we'll call that that here and we have passed environment. Dev here because that method takes a environment enum now we'll do the same thing with prod and here we'll pass environment. Brad and let's import these things from EnV so now our main Dev and Main prod files are created since we have removed the main method from main. do uh this is throwing error for guys who are using Android studio you can change your configuration I will show you how to do it but uh let's uh restart the apps again and uh this time we are going to use the new files that we have created so I'll just cancel it and flutter app and here we'll set the target to main depth so this is for iPhone 12 device uh which is this left side one and similarly we'll run the production environment on other device so for iPhone 12 I'm going to run the development environment and for 12 Pro we are going to run the production environment now how do we differentiate between these two so for that what I'm going to do is I'll just go to the homepage widget and here I'm going to change the title and uh I will pick it from environment so I'll just call app envirment do title and uh we'll import app environment from ENB okay we need to remove pH from here cool now if we just restart the app you can see uh this has Chang to flutter flavors and if we restart the development app it will change to flutter flavors Dev now similarly we can uh do many things using these two just these two files so anything related to the flutter code can be changed uh depending on the environment just like we can provide a different primary sarch for each of the environment so that our users know exactly which app is which uh uh has which environment so let's go go ahead in development file and inside app environment uh I will create a static variable which will be late of course because we are initializing everything inside the setup EnV function and we'll Define a color let's call it primary switch and I will import color from Material okay now here we'll Define the primary switch to be let's say colors do red and similarly for production we'll keep it blue because blue is good and inside my app we are just going to change it to app environment dot primary switch and right is giving error okay uh it expects a material color and we are providing a color here so let's change it to material color okay so now this should be good let's go to main do do and that error is gone let's just remove all this commments they're of no use so now all the comments are gone Let's uh restart our app and as you can see the uh development tab is now red in color and this one will be blue because we did not change it now we want to remove this debug label from the production environment only uh we want to keep it inside the development environment we'll just remove it from production environment so for that also like uh what we can do is we can uh go ahead to material app and here we can set the debug check mode Banner to true or false based on environment so for that what we can do is We'll add a switch statement basically a conditional operator so we'll check if app. envirment is equal equal to environment. dep then we'll return true otherwise it will be false so if the environment is a development environment then we will show the banner otherwise we will not show it let's restart this so as you can see that from the production app the debug label is gone now uh this is it for the flutter part you can definitely do many things using using just this EnV file uh as you will start creating the apis you can call your API URL based on the de development environment or the production environment so I've just created the variables here to show like how you can use it and what about the native configurations like we know that two apps cannot have the same package name or the bundle IDs on Play Store and App Store and uh we cannot give code access to uh the whole team like we cannot give code access to the testing team we need to provide some APK or some ipas so that the testing team can test those things so we'll need to publish it somewhere uh on play store or on app store or test flight based on the environments so for that how are how do we manage those things so for Android if you go into the Android folder we have something called as product flavors uh which we'll be talking about in the next video and for iOS we have something called excort schemes which is equivalent of product flavors in Android so yeah in next video see you guys and we will discuss about the product flavors in Android uh in the next videos so don't miss it yeah let us now see how to use Android product flavors to set native configurations for different environment now for that uh we need to go to the Android native documentation of product flavors you can find it inside the build variants option now here we can set product flavor and for that we need to define a flavor Dimension and then the name of those product flavors so in our case it will be your development and a production flavor so I'll just copy this from here and then inside our Android curly braces we'll just paste it and flavor inside flavor Dimensions we'll keep it default I'll let you know what this means and how this works Works actually and we'll change it to Dev this will be Broad and for production we won't add any application ID suffix or any version suffix now uh what we want to do is we want to change the name of the app to something like flavors Dev for development environment and we will leave it as it is for the production environment so for that we need to Define our string app name inside flavor Dev as flavor Dev and then we'll use this app name inside Android manifest.xml file so let's uh do something similar for production environment also and here we'll just name it flavors now inside Android manifest.xml if your Android label is something else you can just change it to at theate string and/ apppp name this is basically the name of the variable that we are going to provide using our flavors now let's close this app and run it using flutter flavors here we will Define the target file which is main dev. do and then we will Define a flavor which is the development flavor DV this dep should match this so you need to keep these things in mind so let's wait for that now app is installed and uh let's check out the name of the app so for that I will go ahead and as you can see that we have flavors Dev here now let's do something similar for production app so we'll change our Target file to main Brad and then we'll change the flavor to Broad and let's see if we get another app or it overrides the current tab now what does this Dimension actually does so if you if you have ever used Firebase or worked with Firebase you know that we have to add a Google service. Json file inside our SRC folder for Google signin and dynamic links to work properly now with flavor Dimension we create two separate Firebase projects for Dev and prodad then we cannot add the same Google service. Json file inside thec folder because it will be like duplicate file so for that we need the dimension and by default Dimension it it means that the SRC folder will Define the configuration of Dev and prod environments so inside SRC folder we can see that I have created a Dev directory and a prod directory so your Google service. Json file will for development environment will go inside the dev directory and for production environment it will go inside the prod directory now this is this is the basic use of product flavors now as you can see that uh our production environment is up and running now let's just check out if we have two apps or not so we have a flavors app which is our production environment and then we have a development app which has our Dev environment so now you can test out these two apps separately and yeah this is it for the Android product flavors part this is very basic video and I've just told you like how the product flavors is set up and how you can use it to separate out your native code and Native configurations using these two folders you can even create separate Android manifest file for these two folders and it will automatically pick up whichever flavor is built thank you let's see you in the next video where I will discuss the configuration similarly for the iOS part in last video we saw how product flavors work with Android today we will work with the iOS folder and for that we will have to open xcode so you can uh go ahead and open the iOS folder inside xcode you have you just have to click on open and then go ahead in your project and Open click on the isos folder and click on open so this is our project currently we have debug release and profile as configurations so first of all we will need to create these configurations for our product flavors that we are going to use which is Dev and Broad so for that you have to click on this plus icon first you have to click on this Runner then this screen will appear and then you have to click on the plus icon and then duplicate debug similarly we'll duplicate release and duplicate profile configuration now for each of these we are going to create a Dev and prod version so release Dev similarly profile Dev now the existing debug release and profile configurations we can rename them as debug prod release prod and profile prod so debug is basically when you are running the app release is when you are using archive to use the release configuration and profile is when you are targeting a uh a specific device so uh here you can see that we have run test profile analyze and we'll see how these things work first we need to uh edit the configurations so this will be debug prodad similarly this will be release prod this will be profile prod now the documentation to all these steps can be found on the official Apple documentation page inside the customize the build schemes for a project and uh you will get a very detailed text for why we are doing these things you can study these things in detail if you want now here as you can see that we don't have any scheme right now so what we'll do is we'll create a new scheme and uh we'll name it Dev and then we'll create one more scheme and we'll name it prod and the target will be Runner because our Target is Runner okay and let's go ahead and see manage schemes now here we have a default Runner scheme which was already running and we have created two more schemes Dev and prod so we don't need to uh actually use this Runner scream anymore so we'll delete it now we'll just double click on dev and start the configuration so for build we are going to use Target runner for the dev configuration for running we will use debug Dev and for testing similarly for testing we are going to use deug Dev for profiling also we will use release uh sorry profile Dev for analyzing we will use debug Dev for archiving we will use release Dev for profiling also we are going to use release Dev now this is the configuration that you need to Define to get your schemes to work so let's uh check it once again for build we are going to use the target runner for running our build uh in debug mode we'll use the debug Dev configuration similarly for testing also we will use the debug Dev for profiling we will use the release Dev uh I'm setting all these things to Dev because we are inside the dev scheme similarly for analyzing also we'll use debug Dev and for archiving that means when when you are going to release your app to test flight or app store we'll use the release [Music] configuration we can close this and now we will just do the same thing for prod so for prod uh I think you don't need to change anything because it will already be set to the prod version of each profiles so for prod we'll just check it once again for testing we are using debug prod for profiling we are using release prod similarly for analyzing we are using debug prod and for archiving we are using release prod so yeah this is correct now let's go ahead and see our flutter flavors app with two configurations so we'll just run flutter run minus t we'll run a main Dev do do configuration so this should give error actually because we are not defining the scheme in this command now for that we'll need to specify the flavor option so let's go ahead and specify the flavor option and this will be since we are running main Dev do do we will use the flavor Dev now similarly for prod we are going to use main prod and then we will Define the flavor as prod now we'll see that we will get two apps here okay we got some error so the error says that requested but did not find extension point with identifier so remember that we added a Dev to our bundle ID with the dev configuration uh when we were building for Android so uh we can see that the prod build has run successfully because we did not change the bundle identifier it was same as the original one so for solving this we'll go to xcode and then we'll click on Runner now we will go inside Target and then we will change the extension to Dev for all the dev configuration so for debug Dev I'm going to append Dev here similarly for release and similarly for prod profile sorry now if we run our app it should open the dev app successfully let's just wait and see now as you can see our development app is also running alongside our production app so what is the issue here the issue will be regarding the name because we did not change the bundle name so we have two apps here with the same name flutter flavors and flutter flavors so how are we going to identify like which one is our Dev we will have to open it every time to see which is Dev configuration and which is running on prod configuration so let's fix this and for that we'll again go to Runner and inside Target just like we changed the bundle ID for each of the configuration we are going to change the dis display name for each of the configuration so this display name comes from the info. pl file and uh which is the bundle name so let's just change it and we'll store it in a variable and we'll name it product display name now how how are we going to define the values of this variable so for that we'll go in build settings and here we'll click on this plus and add a user defined setting and here we'll just paste uh the variable name and now we will Define it for each of the configuration so for development I'm going to use flavors Dev that's it now let's just copy this to all the dev configurations similarly for release Dev and now for prodad we'll just let it be flutter flavors we'll just copy it for profile prod and also for release prod so now we have our configuration set and now if we kill our apps and then rerun it similarly for the production one we'll see that the names will appear here so we have our flutter flavors prod app here and we have our Dev app also running okay so looks like we missed up something so let's go back and check if we did it right or not because the display name here still shows flutter flavors we'll go again to our info.plist file and then we'll search for the display name Pro okay so we change the bundle name but we had to change the bundle display name so I'll just change it back and use the variable here now this will automatically change okay so let's rerun the apps again the prod one will remain same so that does not matter the main thing is for the development one so as we can see that the production build is ready and also the development build so let's check again now here we can see that the production app has flutter flavors name and the development app has FL D Dev name so this is how you configure your environments using iOS schemes on iOS apps that's it for today's video we'll see you in the next videos

Channel: Evoqys

Views: 1,154

Keywords:

Id: PsY1lILk2-c

Length: 31min 45sec (1905 seconds)

Published: Sat Feb 03 2024