Customize Your Flutter Environment with Dart Define | Step-by-Step Tutorial

so here we are inside vs code with a sample project uh we just have this homepage and if you ignore this get data for time being we have a very simple layout a text some spacing and a button now what we're going to do we're going to simulate the scenario where you click on a button and you call an [Music] API for the demo purpose I have created this get data where I create a URL from the base and the end end point all of these informations are stored in separate file like you do in a normal project you have a base URL some endpoints some Secrets client credentials so of course you keep them in a different file let's see that in an action I'm going to click on the test button and let's see what it prints so here we have our HTTP call Demo HTTP call which is calling the dev example.com which is our Dev environment just for demo and some API key which which belongs to the dev and now comes the real scenario where you want to make this product live so of course you have to go through different environments like maybe you have a staging QA envirment then you have a actual production envirment which looks something like this and the same thing you have to do for your key files also because many of the time we have different key for different envirment now what I have done I have commented out the dev and staging URL and instead of that I have added a production URL which works and I have to be honest I have done that in couple of projects as well uh but you know it's a manual work you have to maintain different branch or you have to manually check that you have commented out the right file and you have enabled the you know the proper envirment before you make a build it may lead to some error like you may forget some envirment and you may uh end up with having a different key and different URL targeting in your final build so now comes the solution part for instance here I created dev. Json which contains base URL which is pointing to the dev right uh and all the API Keys the secrate whatever I have in here I'm going to bring all the information in a single Json file okay I think I placed the production URL so let's correct that the dev URL the dev key and the depth secret perfect now similarly I'm going to duplicate this file for staging environment production environment or whatever environment you have you can create multiple files for that right and each file contains its own data so now when we have all the environments created we have to bring these values the base URL the API keys inside our actual dot inside our actual coding right so the way we do we write string Dot from environment this is in build method and you just have to provide the key name whatever you have specified in the Json make a quick note that this key the base URL which you see on the right hand side is something which belongs to the Json and not with the variable name base URL right same thing we will do for other uh Keys also string. environment from API key from Secret and with that all our uh you know constants and apis are now targeting the dynamic values of these files perfect now let's go ahead and give this application a run and we don't need this uh you know commented outlines anymore we have dynamically configured uh files so let's give it a run and see what we get we have the URL as empty so there's no uh you know actual HTTP call and there's no API key which means that it's not picking up any of this environment and the simple reason for that is we haven't specified which environment to select when we are running the application we have to choose one of them right so let me show you in the terminal how to choose an envirment you have to write this simple command with the argument do Define from file now don't worry I will give you a trick also at the end you don't have to write this all the time so with flutter run I'm appending one more uh argument which takes all the configuration from the specified file now let's go ahead and give it a run perfect now you can see that it's pointing to the STG example with the STG key perfect so our environment is totally working fine we just have to provide Q uh staging do Json prod. Json depending on which envirment we are going to Target cool now let me give you some tip you can create a launch Json configuration if you don't have already so that you can Define different Arguments for different environment if you have already created you can click on the setting button and what we're going to do we're going to leave the profile mode and release mode and we're going to duplicate this one couple of more times so the idea here is to create different configuration for different environments so let's begin with our Dev environment you can also change the name of the configuration it doesn't have to be the project name so I'm going to write Dev staging production so that I can see that in a drop down and here you have to specify that argument the parameter name is ARS and we are going to give the same value which we did inside flutter run ARS which is do Define from file and the name of file the path of the file actually now same thing we will repeat for staging and prod environment we just have to change the name of the file and this is onetime process you don't have to do uh you don't have to do that again and again now let's go ahead save this file and now if you go to the Run configuration you will see a nice drop down with different envirment targets so I'm going to Target the dev envirment give it a run and automatically it should take the argument it should run on that particular environment file and if you click on the test button let's see so our URL and header is pointing to perfect Dev envirment let's also verify that on a staging envirment so I'm going to change the target run again and this time it should say STG example and STG key perfect so our solution is working perfectly fine but before we end the video Let's also see how to configure on Android Studio so you have to click on this drop down go to edit configuration and inside additional ARS we will specify the same argument do defined from file and name of the file so this is our Dev configuration similarly we can add another configuration you just have have to go to edit configuration click on that plus button and choose flutter configuration now again you have to keep in mind one thing that your dot entry point should be main. dot file and then you specify the same dot Define pointing to different files and just give them a different name and with that we have successfully configured all the three environments inside Android Studio so let's go ahead and give it a run on prod because we verified staging and Dev on vs code so I'm going to verify the prod on Android Studio so if I click on test you can see here it points to example.com and it uses a prodad key Perfect Isn't it now one most important thing you have to remember whenever you are going to make a build for production like you want to create IPA app bundle or APK which you want to make live on a store you have to give this command manually and it's fine because you don't make really is every single day it's just once in a while I hope you learn something new how to change environment in Dart language without having to worry about all those comments changing manually you can just configure it and run that with a simple argument make sure to give this video a like hit subscribe if you're new here and you can also take a membership of this channel codex I will try my best to produce content on a regular basis thank you so much for watching I will see you guys in the next one

Channel: CodeX

Views: 2,913

Keywords: flutter, tutorial, how to, android, ios, ui, FlutterDevelopment, DartDefine, FlutterEnvironment, FlutterTutorial, FlutterTips, LearnFlutter, FlutterCoding

Id: 5U-y6hQuboU

Length: 8min 28sec (508 seconds)

Published: Wed Jan 17 2024