Environments (Flavors) in Flutter with Codemagic CI/CD

you are tweaking an app which is already in production you are implementing code that allows the user to delete his or her data all of a sudden you realize that you made a huge mistake by providing a wrong idea you accidentally deleted data of an actual user horror stories like this can truly become a reality if you don't have separate production and development environments thankfully it's very easy to set all of this up with code magic which is a CI CD service dedicated specifically for flutter apps hello welcome to reso coder where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you built so subscribe and hit the bell to join us on our quest for becoming in demand flutter developers when coal magic reached out to me to sponsor this video there was just no other possible answer than yes that's because I use their services on daily basis and they are truly the leader when it comes to continuous integration and delivery for fuller apps so I can truly recommend their services now let's get on to the actual tutorial to setup environments with code magic so that you will not make such horrible mistakes as for example the leading actual live user data environments can be used for just about anything so for example for supplying different firebase configuration file so that you will have a different file store database for production application and a different one for while you are still in development then you can also use different environments for changing the UI and even the logic so to keep this tutorial in a reasonable time span we are now going to deal with firebase but we are going to instead create environments for a counter application but seriously have you never wanted to change the increment amount from one to five by reading a configuration JSON file well if you didn't now you'll see what you so right over here on this emulator we are currently running an instance of a development environment app which increments the counter by five and as you can see there is some sort of a revealed secret and it says dev at the start then we can also install an app which will be for the production environment or actually running in the production environment so I'm just going to open up a folder on the side here and I will drag the actual production application and once it's installed and I launch it you will see that it's not blue but instead it's red it's incrementing the counter by just one and not by five and also the secret at the start contains the prod for production and not death so this is the kind of app we are going to build again the scope of this tutorial will be limited but you can apply all of this knowledge to whatever apps you are building we are going to really take a look at how to supply a configuration file account figuration JSON file to your app and also how to set up two different environments which you can then later on use for something like dependency injection so we are going to check out all of this in this tutorial and be sure to check out the written tutorial from the link in the description and reso Cora calm where you can also find all of the code written in this video and overall go through all of the content of this tutorial at your own pace and also there are going to be some links in there which I am going to mention in this video to some official documentation pages before we can set up the CIC the pipeline and also the github repository so that we will have a master branch and also a dev branch and all of that stuff we first have to build out an actual Flattr project which will have a support for multiple environments and also notice that I am talking about environments and not flavors although environments are very close to flavors flavors can change some native configuration like for example an icon of the app whereas an environment cannot do that once you know how to setup environments though which you are going to learn in this tutorial setting up flavors is very easy it's just only a natural next step so if you want to learn how to set up flavors after watching this tutorial there are links to some nice articles in the written tutorial so as you already know we are going to build another variant of the counter app the UI code will remain fairly unchanged it's actually going to look pretty much like when you create a new default flutter app but it's going to be a bit different so let's actually see what kind of differences there are going to be I'm now going to type this code out by hand I mean stage is going to copy it from the written tutorials so feel free to do the same thing once I have it copied and I paste it over here there are going to be some errors because we are still not depending on provider we have not yet added it to pop spec yamo and we also don't have any config reader file we're going to get to that later but basically what are the changes from the default count app which we all know and love so much right well the changes are of course that we have to dynamically change or semi dynamically only upon the different environment which is only once pre-built so it's this environment will not change midway through running the app but regardless of that we are sort of dynamically changing the color of the app bar so basically the primary color of our app so that's why we are using a pro vizor to get the color and put it as primary swatch here and then we are incrementing by an amount which we get from a config reader and also lastly we have additional text widget here in the column which will print out the secret key as you can see in the finished app you will see how to get all of this config reader setup and also how are we going to exactly provide the color with a provider in just a bit let's for now focus on creating the configuration JSON file which will be read by this very config reader as you know files present in the project are perfect for providing non dynamic configuration basically they're read-only configuration files and this can range from an increment amount for a counter app as we are doing here to for example passing around a fire based config the problem with configuration files is that we do not really wanna check them into source control because all kinds of people can have access to our git repository for example even if it's private there can be some contractors who you hire and they are gonna have access to the repository and you don't necessarily want to expose your secret private keys which are used for various services which are our mission-critical to a third-party contractor so that's why it's good to add the config files into your project only at Build time which can be done nicely with code magic still we want to be able to develop the app locally and also we of course need to create that configuration file at first locally because we need to put some meaningful data in there so let's first create the app config that JSON file even on our machine we are going to put it under a new folder which will be in the root of the project called config and inside of there we're gonna create a new file app config dot JSON and this file will contain simply two configuration fields the first one will be increment amount which will be equal to five when it comes to development environment and then this will be equal to just one in production environment and the next key will be some sort of a secret key just to prove the point that you do not want to really expose this configuration JSON to third-party contractors or whoever there might be so let's create a secret key and this will be equal to some random string basically which I'm going to copy from the written tutorial so now we have this kind of app config dot JSON file and of course we do not want to check it into source control once we initialize the git repository so let's do the setup even right now we are going to go to get ignore which is present in every four project by default and we are going to add a secret ignore so we're going to ignore everything which is under slash conflict okay and now once we initialize get in this project this config file and that's also the app config that JSON will not be checked into source control into the git repository but it's still going to be present on the machine so for example if this were firebase config file we would still be able to develop the app locally and debug it on our emulator right here with the development environment firebase on fire store but it would not be checked into source control which is precisely what we want later on in this tutorial we are going to put this ad config JSON file into code magic so that it will create this file for us just before the app is built into an apk or an IPA file for iOS or even for the web lastly we need to make sure that this ad config that JSON file is present as an asset in our app because that's how we can access it and read data from it so to add it as an asset we are going to go to pub spec yamo and here just followed the regular process of adding assets so we're going to add the whole config folder as an asset and while we are at it let's also just add the provider package as the dependency the current version of provider is 4.0 point four that's because we are gonna use provider to provide the color for the theme the primary color and also you might be thinking that alright we are setting up the app config dot JSON as an asset but this app config that JSON will not be in the project actually because it's not gonna get checked into the git repository so how is going to code magic know to use this app config that JSON as an asset when it's not going to be in the repository right well the answer is that code magic will add this file for us precisely into this config folder and then when the project will be built by code magic the flutter Bob get commands will be run automatically so it's going to synchronize all of the assets while the app is being built and we are gonna be able to use this app config dot JSON as an assets without any kind of an issue okay so now we know about the structure of the app config da JSON file let's create the config reader class which will read the get increment amount and also the secret key and also I just remember that this should not be called main dart because we are going to move around the main function elsewhere they should actually be called app widget the dart alright because this file currently does not contain a main method we're going to create main files in just a bit because we will need to have multiple main files actually in order to facilitate multiple environments but first let's ignore what I just said and focus on the config reader so let's create a new file under Lib config reader dot dot and inside of here we will have an abstract class conflict reader which I'm actually going to copy from the written tutorial to what you can get from the link in the video description and I am just copying it because this is not really important to what we are trying to accomplish with this tutorial this is not a tutorial about how to read something from the assets but instead this is a tutorial on how to set up multiple environments so in just a brief overview we have an initialized method which will need to be called from the main method before the app is actually run and this just loads the F config dot JSON from the assets by using this root bundle object as a bundle and puts it into this static private config map and then whenever we call get increment amount we are going to read that amount from the map and similar thing applies to the secret key we just read it from the preloaded map which we have gotten from the app config down JSON file so this is the implementation of the configurator and again you can get it from the written article so with this we have just accomplished that we can finally read the get increment amount and also get secret key but still we are not providing a different cover to the my app widget and sure we could just again create a different configuration field in here for example something like color will be red and so on or whatever this should be probably a string we could do that of course but I want to show you another way in how you can provide different environment configuration to your app and that other way is not by using it in our configuration field but instead by using separate main files and then also some sort of a constant string or maybe even an enumeration which you are going to pass around your app so what do I mean by that well if you are not aware of it already if you try to run a flutter app or for example even built a flower app so flutter build a b k you can then provide a target and this target by usual is a Lib slash main dart this is the usual stuff you usually really have this one main method and main file in for project but you can of course change this target manually to be main dev than dart or main prod dot dart and when you start running the app through different main files what you can do is that you can provide some specific configuration for each and every main file which will then be presented in for example passing a different color to the main app widget so let's do just that let's set up multiple environments and multiple main files firstly though we need to have something to actually pass from those multiple main files and that's something as I have already briefly mentioned can either be an enumeration or in our case we are just going to create an environment constant string or actually two strings to be more precise so let's create a new file environment the dart and inside of it we are going to have an abstract class environment which will hold static Const dev it's gonna be equal to Def and then similarly prod which will be equal to prod and we are going to pass these two constant strings around so that we will come to the effect of having different color of the ad bar and also of the floating action button so now once we have this environment abstract class we can create two main files so main dev the dart let's also create main prod the dart and while we are at it we are going to also create main common Dart that's because we do not want to repeat ourselves and there is actually gonna be a lot of common functionality in between the Deaf and production files let's first create main methods inside the main common file it will return future void because it's gonna need to be asynchronous because we want to call configurator dot initialize which is an asynchronous method so inside main common because of this reason we are going to have a function returning future void which will be called named common just to differentiate that this is not an actual entry point because the entry points will be in the environment specific def and prod main files main common is not really an entry point it will accept a string containing the environment constants so he envied for example it's gonna be a sink and we are going to leave the implementation blank for now we are going to come to this later let's just for now see what we can do inside for example the main dev file so the implementation will be really simple it's actually copy in common and it's now going to accept the environment string and it's just going to be called main so this is pretty standard main method you are used to seeing this from all of your flour apps of course this is really an asynchronous function but that's fine that's a perfectly valid main method nevertheless what we want to do here is only one thing we want to call of course a wait and then call main common and this is why we have created two files because from the main dev dot dot we want to pass in environment that dev to the main common method and now we can just copy all of the content of this file go to main that prod and from here the only change will be that we are going to pass in environment prod so really these two files are very similar but we are passing different environment to the common method and what are we going to do from the common method well first because it's asynchronous we definitely want to call widgets for abiding that ensure initialized you just need to do this whenever you have any kind of an asynchronous code going on in your main method and then of course we mustn't forget to initialize our config reader so let's just call config reader whoops that initialize and also await its initialization and once we have that we can now grasp this environment string and do some logic with it so for example we are going to have a switch statement and because I do not really want to bore you to death by writing out the long switch statement which dart unfortunately has I'm just going to paste it from the written tutorial so basically we have a switch statement which checks if the environment passed into this function is development the primary color will be set to blue otherwise it's gonna be red and then of course because we are inside the main method we need to call our trusted friendly method called run app and run app as you know takes in any sort of a widget usually this is just some sort of my app which comes from the app widget the dart which we have created at the beginning of this tutorial but because we want to provide some color to this my widget we also need to wrap this widget instantiation inside another widget which will be provider provider that value to be more precise because we already have a value we do not need to instantiate a new one and then later dispose of it so that's the perfect use case for the provider that value named constructor and the value which we are going to provide down the widget tree is going to be our primary color of course so once we have this all sorted out we can now successfully run the app locally and it's going to run under development environment or is it really because we do not have the usual main dot dart file so trying to run the app now will actually result in a problem because we need to set value in your launch config because it just cannot find the usual main that dart file so as I have already mentioned building a flutter app to an apk or to an IPA for iOS or to whatever you can provide a target you can do a similar thing when you are just running the app so flutter run and you provide the target also but how can you provide a different target when you don't want to run your flower app through the command line but instead you want to run the app through something like vs code well you can set up these launch configuration under vs code launch dot JSON so usually this is default launch configuration but we instead want to have in addition to just these three fields name type and request also a field called program which will point to the main file so this first configuration will be for the development environment so let's call it flutter death and we're going to point to lip forward slash main damn dad art and now let's just copy this first configuration pasted below this one will be for the production or just proud for short and it's going to point to main broad down dart so with this done we now have set up the configuration of the launch for vs code and by the way similar thing is also possible if you are using IntelliJ or Android studio and a link to the appropriate documentation for those IDs is available from the written tutorial so it is done we can now around the app by going to the debug tab and we can actually select in which configuration we want to run so let's now run in the development configuration and once we run it everything is going to work just fine we have the app running under the development environment and we can increment by 5 which is nice and when we stop it and change to production environment so flutter prod and run the app again of course we are still going to increment the counter by 5 because we are not yet changing the JSON configuration file we are going to change that later on but the primary color used for the app bar will indeed change because we are checking for the color inside main common and if the environment is proud we change it to red so if we open up the emulator now we can see that the color is indeed red alright so we have this almost all setup we are go to get to setting up the git repository and also the code magic project in just a bit but first we can see that we have a failing test or actually test with errors that's because we have changed a bunch of things in the process and this there's no longer point to the correct files actually we are going to completely replace this widget test with a very simple just completely fabricated test which is just going to assert that one plus one is two and if I'm not mistaken this test should always be passing so yeah this is just a completely fabricated test to prove the point because we actually want to be able to see a nice green passing test in code magic CI CD because of course what kind of a CI CD service would it be if it didn't run your tests right so code magic can run your tests also integration test and widget tests can be run on code magic in this tutorial we're just going to be okay with this kind of a simple nonsensical test which we have created right here so let's call this file example test the dart right so with all of these changes we have just set up our project and again if you want to go through this at your own pace all of what we have done is available in the written tutorial to which you can get from the link in the video description let's now set up the git repository so that we will have master branch and also a dev branch and we are going to create the app and actually build the app under the development environment when we push comets to the dev branch and we are going to build the app with production environment whenever we push comets to the master branch so first up let's initialize the repository locally so we're going to run and get in it once we have it all initialized we can run git add all of them so git add dot and now we're going to commit our first comets get comets the message will be initial comet and let's hit enter all right so everything was nicely committed we are currently inside the branch master and by the way I am using git bash on Windows so if you are on Linux or you are using Mac OS or a default command line with Windows you will see different things but hopefully all of this process will be pretty similar for you as well so now we have this repository all nicely set up locally and by the way now you can see hopefully also on YouTube that this config folder and this app config that JSON file is a bit more gray than all of the other folders it's a bit less visible that's because it's inside git ignore so this file did not get added to the git repository which is definitely nice now that we have this local repository we also want to set up a remote repository code magic works really nicely with github bitbucket and also with git Lahab and also it can do stuff with some other repository remote repository providers like for example Google Cloud source but github get Lebanon bitbucket are really tightly integrated and they work amazingly well so we're going to set up a github repository of course because that's where I operate if you have not yet noticed so let's go into the reso core organization here and I'm going to create a new repository right on camera so we're going to create for example environments with code magic tutorial environments in flats or maybe garments in water it's kind of a long name but whatever environments in flooded with cold magic tutorial alright so this is definitely a good repository name we're going to make it public and yeah just leave everything as it is let's create the repository right now and you can see that now we can copy this repositories URL and let's get back to vs code and we are going to add this remote repository as a remote so git remote add origin and just paste this URL in here we've just added origin and because there are no branches currently in this repo it's completely blank and empty we need to use the upstream option whenever we want to push a branch which is not yet present in the repo so get push upstream origin and the branch to which we want to push is master right once that's done and we come back to our browser here and refresh it we should see that we have some stuff in the repository which is good to see all right but you know that we don't want to have just the master branch we also definitely want to have a dev branch because while the master branch will build apps with code magic under the production environment the dev branch will build apks and IPAs and all of that under the development environment so let's check out the new branch and by the way you can also do all of this with the visual studio nice UI way of creating new branches and all of that but I am just using this terminal because I want this to be applicable to even users who are on IntelliJ or Android studio so I'm doing it for you I hope you appreciate it alright so let's write git checkout be for a branching of the new branch dev so now we have switched to a new branch dev and we can write git push again upstream origin depth and width that we have just two identical branches with the same exact code present on github right so we can see that we have master and Dev containing only one comment which is the same precise comet and now let's get on to setting up code magic so that we can utilize all of these multiple branches and environments and actually put everything together glue it nicely together and build out ap case which will be under different environments based on the branch to which we have pushed the code to set up code magic you want to go to code magic that IO link is also in the video description and if you don't have an account current that you wanna sign up of course I do have an account so I'm just going to log in and you can log in with github bitbucket gitlab or you can also use their github app which is something similar to github log in but you can grant access only to specific repositories so if you are working on an organization and you want to grant access only to one repository then using github app is probably the good way to go however I'm just going to use the default github log in here now that we are inside code magic we can see that we have were in environments repository somewhere in here yeah I have a lot of repositories here because the reso coder has a lot of tutorial repositories what do I have to say about it right so once we find our repository which we want to configure with called magic we want to hit this gear icon and by the way if you are using a repository which is under an organization which you do not own you might need to request permissions from the owners of the github organization and there is a link on how to do that in the written tutorial let's first set up the development workflow which will build the application files under the development in vironment so first up we want to configure build triggers we want to trigger a build whenever something is pushed so trigger this thing trigger and push on the dev branch so we want to add the pattern for including the source of that branch trigger on push and now it's safe this is only the first step the next step is actually configuring environment variables as you know already we have this app config dot JSON file present over here but it's not checked into the source control it's not present on github we want to get this file over to our project and build it into the finalized apk or IPA file through the magic of code magics environment variables however you cannot just simply put a JSON file directly into code magic as a file before you can put the contents of the file to called magic you have to create a sixty-four strings so that it doesn't contain any white spaces and any of that you have to convert this file into base64 and only then you can add it as an environment variable right over here we're going to call our variable AB config and the variable value will be as I have already mentioned the app config dot JSON can relate to base64 string I'm using git bash on Windows so what I have to do is say base64 and then navigate to config config dot JSON running this command with git bash will provide me with this base64 string which I can copy so this is the process on git bash with Windows but if you are using Mac OS and Linux don't despair because there are all the steps which you have to take for your respective platform outlined in the written tutorial regardless of which platform you are currently running on just copy this base64 string and now go to code magic and we can paste it as an environment variable and also make sure to check this secure so that it's going to be encrypted and nobody will be able to deconstruct this environment variable except for when the build is actually running now it's safe this environment variable is not useful by itself what we need to do is that we need to get this variable convert it again from base64 to just a regular string and then output that string to that add config dot JSON file into the config directory the way we can do it is with a custom pre-built script to configure a prebuilt script you want to scroll down here when it says built you wanna click on this plus icon above it and here you can configure post test script and also what we are interested in the pre build script first up we want to create the config directory if it does not yet exist and most likely it's not going to exist yet because it's not in the github repository after all so the way we can create it is of course with the mkdir so make directory command and this B option will make sure that if it is already present there we're now going to just overwrite it with an empty directory that it would be kind of a bad thing to do so make sure to just to be safe include this B option here and I'm actually going to zoom in a bit more hopefully you can see it properly on YouTube if you cannot see it properly all of these scripts and all of that is available from the written tutorial anyway so you can just grab it from there so mkdir B option and now we want to create conflict directory but we cannot just create something like config because like we do not want to put it into the home folder of the build machine that's silly we want to put it into the folder where our project files are located right and this is simple because on my machine currently that is located under the D disk reso coracle magic projects environments with called magic tutorial this is the path to the project route but how can we get this path which in this case is the Karaka magic projects on the build machine on code magic well that's when you can use predefined variables which called magic provides for you so to get to the root of the project are called magic as it's building you one two use the FCI underscore built underscore dir and this will grant you the path to your project on the code MAGIX build machine once this directory is created we can now echo so write out the app config environment variable this is the variable we have just created and then whatever is in the memory basically we're gonna take that so this column or however you call it this or sign vertical column you wanna convert it or be coded from basic 64 so base 64 decode and whatever is decoded should be output in to again FCI built there for slash config and the file name to which we want to output it is app config dot JSON cool so basically what we did here is that we are now sort of dynamically creating the app config JSON file just before the build is kicked off with this pre build script and lastly we also need to set up the actual build stuff here and also you wouldn't probably hurt to also set up the tests so when we click on this tests tab we want to enable flutter analyzer so that you will get the static analysis and when you are using custom and now it says options file about which you can check out the tutorial from the cart in the corner those analysis options will also get taken into account so you will be able to lend your code precisely how you want it to be and then also make sure to enable flutter test because you are now gonna be able to test without it and of course you can also enable flutter driver tests where I'm going to do that right now so make sure to always save everything and then let's go to the build tab and we are going to limit building only for Android that's because I do not want to just sit around here for too long because you know every build takes a few minutes so you definitely I definitely do not want to sit here for longer than I need to while recording this tutorial and we are going to leave them out at debug lastly these build arguments are very important because this is where we can specify the target file or just short is the T option and this is going to be label and since we are currently setting up the development workflow we want to target main underscore dev dot dot so this is the file which should be run at the start of the app once we save this we have just successfully prepared our workflow so let's scroll all the way up and we are going to start our first build once we hit this we can select a branch currently this workflow is called only a default workflow we are going to rename it to development workflow in just a bit but that's not an issue we're going to select the dev branch so you know you want to build out your dev workflow on the dev branch and the production workflow will be triggered by the master branch of course we're going to also trigger it automatically whenever we push some new code to the repository but the first build has to be actually started manually but only the first build the subsequent builds will be able to run automatically all right so we have our app nicely built with code magic and what's unfortunate is that I have forgot to save the testing configuration right here in testing so I forgot to save that so even though I enabled for tested for analyzer I did not hit the Save button so what happened is that those tests did not run but anyway we have just some freaking blank tests over there so it doesn't matter really much but anyway when I come back here you can see that we have the artifacts built because we were building only for Android we have only the apk files but as I said you can build for iOS web and even Mac OS and all of that so now when we download this apk actually there are two of them but they are both identical so we can download either this debug one or whatever we want to save the file somewhere okay so here we go we have the app debug apk file so now when we go to the emulator and close our app here and we try to install it it should get installed hopefully and nope it's not going to get installed that's because we need to uninstall the environments or something up from here yep this one we need to uninstall it because we have not changed version of the app and the bundle ID for the app is the same so you cannot have two versions of the same app on your device that kind of makes sense so once we have uninstalled already present app installing will go just fine we can now launch it and it's going to run under the development environment and as you can see we can increment by five just fine and if you take a look of course in the github repository if I navigate back there right in the github repository you can see that we indeed do not have any sort of a config directory at the root of our project but we are able to read that configuration file so what must have happened is that of course code magic worked and it added that add config dot JSON file just before the app was built because now we can read it and we can also see the secret is dev extremely secret stuff which we cannot put into the source control so that's awesome now we have only built the app under the development environment we have configured the development workflow so now let's go back and we are going to also configure the production workflow but don't despair because we won't need to configure all of this again manually what we can instead do is that we can scroll up first time we are going to rename the default workflow to development workflow development workflow save that and now we can just duplicate this workflow rename it to production workflow and once we have that we're going to save it and just change the build triggers from dev to master save that and make sure to hit save so that all of the changes are going to be actually persisted at the kinetics side then what we definitely need to change is this environment variable because now we have AB config which holds the increment amount to be 5 and also the secret key is def but under production environment we want to increment the counter only by 1 and the secret key should hold broad right so we have just changed a config that JSON locally and we again need to run the base64 command to get the base64 interpretation of this JSON text file so now copy this base64 string and we are going to paste it again as an environment variable over to code magic so app config should again be its name and paste it here this base64 string again take secure add it there and make sure to save the environment variable lastly we do not need to change anything regarding to tests so we can leave it alone pre-built script can remain the same and what we need to change definitely is that we're going to change the built argument to target main prod that Dart because we want to have the AB bar color to be red and not blue and this changes with our custom environment constants which we pass from the main prod dot dart file we are still going to leave the mode at debug because when we would change the mode to release mode of the app that would require us to provide custom app signing keys for Android so we would need to create a key store and all of that and we do not want to go through that hassle in this tutorial because it's getting long regardless so yeah just save it and we're going to pretend that we have a release version of the app even though we are still gonna have just a debug app and then of course you can also set up all of your Android code signing and Google Play publishing and app store connect stuff over here so you can set up everything with cold magic we're just not going to do that in this tutorial because we are focusing on something different right so just make sure that everything is saved and since we are running the production workflow it's now live we are listening to pushes on a master what we can now do is that we are going to go back to our project and we are going to switch to master so now I'm actually going to use the UI because why not so just switch to the master branch and we are going to make some really I don't know maybe we are going to just change the constant string to say development so the actual functionality of the app will not change at all it's still just a constant which we check for in the main common dart so everything will work as it should but we have just introduced a change which we can push as a new comet to master directly of course you should never put or push comments directly to master you should always create polar requests from the dev branch and so on but you know we are just in it a simple tutorial so we can ignore all of that stuff so let's now push these comments so edit or something like refactoring maybe link and commit it push it to master directly and what's gonna happen now is that once it's pushed and we go to code magic we will see a message that we have just triggered the build all right not sure why it says it's two times but it does matter we have just triggered a build under production workflow which is nice to see so I'll be back once this finishes we are back the belt is finished and now actually the tests have run as well you can see that we have one passing test which is a good thing to see pretty much always because you want your tests to be passing and also no issues were found with the Futter analyzer which is also a good thing to see and we now have again another a bunch of artifacts so we can download the app that apk from here so save the file and then we can install it on the emulator and by the way downloading the apk files directly from this code magic website is not the only way in which you can get apk files to your device you can also use code magics own app called test magic and also you can set up code magic to work nicely with firebase app distribution so that you can distribute your apps to testers very easily and there is a link to how to set all of this up in the written tutorial but anyway we now have this app that apk file which we can now install onto our emulator so currently it increments by 5 has this dev revealed secret and the app color is blue I will need to again uninstall this app because you know it again has the same bangle and ID and the same version because we have not changed that but once I uninstall it and I install this production-grade application and open it up we will see that it's red it increments by 1 not by 5 and it has this production revealed secret key so everything works as we would expect and in addition to what we've seen previously this production workflow was now triggered not manually but instead by a push to the master branch and again all of this will work even if you would create a pull request from the dev branch and then merge it into master branch that is still considered as a push and also you can set up more build triggers and go really deep into this stuff but we are just keeping this simple in this tutorial with listening to pushes on the branch setting up environments with cold magic is really a breeze and since cold magic is a CI CD tool dedicated to flutter they're always on top of their game and although this video is sponsored as I you at the beginning of this tutorial I can really truly recommend them I used them for multiple of my projects and their support is really top-notch I mean I had some issues which were not even caused by cold magic but I just messed something up with my pre-built script actually and they solved it for me so really thanks to the awesome support and yeah they even give you 500 billed minutes for free per month and as you can see this built took something like five minutes 20 seconds most of the builds on more complex apps take around six minutes and of course with iOS edit on top of it that's some somewhere around like 10 minutes or so but really 500 build minutes per month for free even if it takes something like 20 minutes for your app to build that's still like 50 builds for free even if you have some sort of a crazy app which takes long to build so yeah really you can go far with their free plan and even then if you have to buy some plan it's not really that expensive it's just somewhere around $19 for 500 minutes as of now so yeah you're not going to break the bank with their service and it really saves you a lot of time saves you our hassle so I recommend you to check it out and to go through this tutorial at your own pace once again and to get all of the code all of the links to the documentation all of that check out the written tutorial available from the link in the description and if you are serious about becoming a great flower developer who can build real apps for clients or at the job go to flutter de education link is also in the video description to get the top curated flower news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best photo resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this and also tutorials where we build out real actual duction great flower HAP's be sure to subscribe to this channel and also join notification squad by hitting the bell button to make sure you grow your flower skills because here on resale coder I am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer if this video helped you with setting up your CI CD pipeline together with understanding how to create multiple environments for a wrap and also to understand the benefits of having multiple environments for your flower wraps give this video a like and also share it with our developers who are surely going to find it beneficial to leave a comment if you have anything to say see you in the next video [Music]

Channel: Reso Coder

Views: 28,023

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter environment, flutter flavors, flutter codemagic, flutter codemagic ios, flutter target, flutter main.dart, flutter workflow, codemagic flutter ios

Id: zdJkvDANiuY

Length: 62min 29sec (3749 seconds)

Published: Wed Feb 19 2020