How to use Environment Variables in Flutter with flutter_dotenv

hi there welcome to this tutorial on using environment variables inside of flutter so we'll be using the flutter.nv package for this and essentially what that allows us to do is have variables such as either an api key perhaps a url or a variety of things that change depending on a dev a staging a production or any other environment so here we have essentially just a brand new flutter project i created that using flutter create and we called the project ds.n next up i'm going to install the flutter.env library and that's done by running flutter pub add and we'll say flutter underscore dot end now alternatively you can go over to pubspec.yammo and if we scroll down we could add this directly to the dependencies array so you might want to make sure that your version is 5.0.2 as that's one we'll be using inside of this tutorial next we'll go ahead and create a dot env file that means we'll come across to the root of the project we'll right click hit new file and we'll say dot env this is where essentially you'd add all of your specific environment variables for now we'll say api underscore url equals we'll simply say http localhost 3000. this is where essentially we'd add all of the different environment variables that we'd like to inject inside of our flutter app but in order for flutter to see this we need to go back to pubspec.yaml and scroll down until we see assets here we have to remove the current assets that are there and add.env we can then save the file and run flutter pubget next you might want to add the dot env file to your git ignore so head over to your dots get igno and somewhere inside of here add dot env this will make it so that we don't commit the environment variables to our source control what you may want to do is add a dot env dot example file like this and within this file define the various variables that you use throughout the application so here i've added api url but we won't give it a value that'll just tell us or remind us that we need to add a value for this this can be submitted to source control so we don't need to add this to the git igno with that said we can go ahead now and restart the application under the emulator and then navigate to main dot dot within here we can say dot end dot load we'll need to import that from flutter.nf and as this is a future i'm going to make this async and i'll say future void instead and we will await on that dot end dot load now if we had another file that instead we wanted to load and it wasn't called dot end we can pass the file name parameter here and we could provide a different name by default it's don't end so we don't have to pass anything in but as you can see if you did want to change that you could i'm going to go ahead and remove that just for now so this now means that the application will have all of the variables that we specified inside of dot end will be loaded inside of the app and it will be able to be accessed so let's head over to the home page which is simply just a scaffold with an app bar and inside of the body for now we'll just do a centered text and the text itself will have a dot end dot env and this will give us essentially the map back of environment variables and the thing that we want from here is the api underscore url this will have to be imported again so we'll import flutter.net and you'll see that this is a potential string it's a nullable it says here that the argument type string question mark essentially saying that this might not exist can't be assigned to the parameter type of string so here we can provide a fallback and for now we'll just say api url not filed i'm going to save that and we get a not initialized error that's because the application was already running at this point but if we just step through the debugger and we restart we should be able to see that we have that localhost 3000 that's exactly what's inside of our env file and if we added any more environment variables we'll be able to access them in the same way so there's another way to access the different variables and that's by using dot get so get has the string name so we'll say api url and this won't complain anymore now about potentially being a nullable value but we do also have the option to provide a full back so we can say a named parameter here called fallback and then we'll just say api url not found and if we save this we should get the exact same response so let's reload the app and we can't visibly see any difference because of course we're getting that same url so this works well especially if you're looking for a single environment but oftentimes you might be looking to make a very specific dev environment and that means you have different api urls or different api keys that are separate from a production environment so let's go ahead and create a dot env dot production and the same for a dot env dot development file what we can then do is head over to pubspec.yaml because anytime we add a new asset like this we need to tell flutter about it so we can then add the e dot dot production and a dot env dot development to the assets array we will have to then restart the application so if we go ahead now to main. and i'm going to click run and debug once again we will at least have at the very start no differences but if we then inside of the dot env.development if we add an api url where that equals to localhost 3000 once again but for production we'll copy that over to instead be a different url so maybe we'll say developer.school then inside of middle. we can say if we are in the key release mode this is essentially just a constant and that constant tells us whether we are in the release version of flutter or whether we're on the development environment if we are in release mode we'll use dot end dot load and we'll pass in that file name like before but this time we want to load the dot env dot production and subsequently we can move this one up and instead we'll load the file name of dot env dot development so this will now load the appropriate file depending on whether we are in release or any other mode don't forget you can also specifically instead of saying else here you could check to see whether we are in k debug mode and then we could load the development environment specifically so this will now inside of the debug version of our application load the development variables but in production it should load the production once next up we're going to create an environment class so let's go head to our library and inside of here we'll make it models folder and inside of models we'll make an environment dot dot and then inside of this file we can say class environment and we can use this to define some accessor methods so we'll make this static string get we'll call this one filename and we can take the logic outside of main.dart and we can just copy that in so within the file name we'll simply return env.production in release mode we'll need to import that once again from foundation otherwise we'll return the development file next we can define our api url so we'll say static string get api url let's remove what copilot just gave us that instead we'll say dot end dot env make sure you import the dot end and here we'll say api underscore url we can elect to provide a fullback so the api url not found and then what this means is that we can go back to main.now and instead of loading the different files based on the if statements we can simply load the file name of environment dot file name you could also like to not make these static and instead make an instance of environment but for now this will be good enough for us and we can head back to home dot dot and instead of accessing it like this using dot get we can now say environment dot api url this allows us to put the fullback inside of one place inside of the application and at the same time gives us typed access so we don't make perhaps a spelling mistake when we're trying to access a specific variable one thing to remember with this though is that anytime you add a new environment variable to your file you'll need to go ahead and update that inside of the environment class so that's how you use environment variables inside of your flutter applications one final thing to do before we wrap up is go to our gitigno and add a dot env dot production and a dot env dot development that'll stop the environment variables from being added to source control once again for our different environments so in this tutorial you learned how to add environment variables into your flutter applications you went ahead and created a specific development and production set of values and you created a class to easily access those variables i'd love to hear what you think of this of course let me know inside of the comments what you'd like to see next and don't forget to check out developer.school for the written version of this article

Channel: developer.school

Views: 14,283

Keywords: environment variables, flutter, dotenv, flutter .env, .env, .env flutter, .env flutter development, .env flutter production

Id: xTxwjbcd8kA

Length: 11min 15sec (675 seconds)

Published: Tue Nov 09 2021