Day 12 - Flutter dotenv file in less than 10 mins for our expense app

hey what's up guys today in this video we are going to look at how we can use dot env files inside our flutter project so that we don't have to rely on some hard-coded stuff inside the code base and most importantly we do understand that the project will have some secrets which shouldn't ever get into our repository and hence as you can understand that the dot env file is kind of inevitable you cannot do a project without having a proper end file so let's see how these can be implemented so what i am trying to do today is right now we don't have any secrets in our project but i do have urls lingering around inside my code so i'll show you my problem if i search for http 192 you can see there are two occurrences of the url now which means this is going to change from time to time and it then becomes difficult for me to change it in all places obviously i can do a search in place but you know these are not the ideal thing to do if i have this inside an env file if you look at this right if i have this part this entire thing till 8 000 coming from an env variable then obviously it will make sense for me to update in one place and every other instance will easily get that so let's get started so i'll search for flutter dot env and let's see what we get so here we have a package called flutter underscore dot env which allows us to achieve what we want it has good popularity 549 likes so which is quite good and as we can see we have the cnv file okay we add that as an asset inside the main function we load it okay that's fine and then you can access the env throughout your application which is good so before this we have like so and accessing env i can do it like this so that's pretty straightforward i don't think this is a very difficult one so let's try and implement it so how do we install it obviously i'll copy this flutter pub add flutter.env go inside the codebase and i'll just do this hit enter obviously i have flutter cli installed so i don't have any problem but if you don't have things already installed i would suggest you look at the first video of this playlist where i have gone through the installation process now the first step is done what we now need to do is obviously modify our yaml file and add this as an asset so let me see i have my pub spec yaml it has some changes let's see what that changes okay it added this dependency which is fine but now let's look at the actual file let me search for assets now this is commented what i need to do is add the dot env over here okay so this is done and then let's look at the next thing which we need to do which is something inside our main function so what we are doing is we are making our main function async and we have this await dot env load that's quite straightforward so let's close everything out or maybe i'll just keep this thing go to main dart where is my main function here it is so obviously first of all it will become an async function await dot env dot it was load if if i'm not wrong yes and file name dot env is this what the code looked like i think so dot env load file name double brackets dot env okay i'll just follow that syntax double quotes with this i think app is still running so no problem there nothing is breaking the library is loading so what what do we do next in here before 5.0.0 we had something like this okay env but how do i load the variable this is some merge null safety we get string for equals okay so i think i can use this if i'm not wrong let's just see it's a little confusing let's just access env using this okay as a variable can i still call a function i'm not sure let me see that would rather make sense because to avoid null safety for variables there are no uh that are known to exist there is a get method that will allow that will throw an exception if the variable is undefined okay you can also specify a default value fair enough let me see let me see if i can do that right now we are on the expenses page so expenses dot dart here we should have our http call where is it expense list this is our url right so why don't we do something like string dot no it's not taking why um oops not the settings let me reload maybe it is creating some problem dot okay where is my auto complete it still doesn't give me any auto complete that is a bit weird i was not expecting this to happen let me see dot get then oh i know what is happening i think i first i'll create this i'll do api host maybe it is not recognizing it i'm not sure no but still it should have at least given me that how do you say this is the wrong url by the way my app is running on 192.168.1.7 so i'll just keep this as my enb variable okay i don't i don't need the slash this is my env variable and what i will do is expense list right string dot env dot get api underscore host or i'll keep this as empty so it's always a string string ah i know what has happened this is expense list api equals ah got it so get and then name is api underscore host something like this otherwise empty okay that's not empty i think it's fallback fallback is like this okay and with this in place we can get rid of this do a plus this should work i don't know maybe my application needs to start again and in the meantime let me find the other occurrence as well 192 168 env and this right so this will also work in the same way copy this string expense add api i'll import the package okay and we should get rid of this and do variable plus this with these two changes in place i think we should be able to run our application and see the data properly let's wait installing apk that's fine welcome to dash if i click will it give me the data it does and on click i get this as well and let me add one more so that we are able to confirm that even the you know add the post url is working so added spelling is wrong added new env our original price okay submit and it is here so right as you can see this is working the two api calls one which is happening on this page you know with with our reload again i i do find it a little difficult to add but yeah um the listing is happening and also the ad is happening this is obviously picking from the same data so it doesn't make too much of a difference yeah so that's about it guys this is how we implement dot env inside our project now what is going to happen is obviously my entire secrets can be inside this file and i don't need to linger or the api calls the api host will not linger in my code if the host changes i just need to change it in one place and every instance will get updated automatically so thanks for watching if you like this video do click on the thumbs up icon and don't forget to subscribe to my channel

Channel: Amitav Roy

Views: 5,598

Keywords: flutter, dart, mobile app, mobile development, android development

Id: sgfoMJFLltE

Length: 9min 16sec (556 seconds)

Published: Tue Mar 22 2022