Flutter Tutorial

Managing environments in Flutter

We must be aware of the our environment!

Saurabh Pant
Dev Genius
Published in
5 min readFeb 11, 2024

--

In Flutter, as a developer, we always encounter the need of managing different environments for our different use cases in the app. For instance, we’ve different base urls for our apis on dev, test and prod mode. Now keeping an eye manually when pushing code to any environment is very risky and can break things.

So, recently I’ve been looking to simplify it for myself. There are multiple ways of doing it. But the approach I used in my project is what I’m going to discuss.

Use Case

Let’s take the very obvious use case which probably all of deals with is managing our base urls for multiple environments.

// dev
"api_base_url": "https://dev.some.domain.com"

// test
"api_base_url": "https://test.some.domain.com"

// prod
"api_base_url": "https://some.domain.com"

We assume that we’ve the above base urls for each of our environments.

Now we want a very convenient way of switching between these environments while doing either development or testing on our local machine.

Creating Environment Folder

So lets begin by creating the environment folder in our project at the lib folder hierarchy level as follows and name it .env.

Now within this folder, we create three different json files with name as

We can give these files any name we want to depending on our understanding but for brevity here, lets use these only. Now let’s add some content in them as follows

// dev-config.json
{
"api_base_url": "https://dev.some.domain.com"
}

// prod-config.json
{
"api_base_url": "https://prod.some.domain.com"
}

// test-config.json
{
"api_base_url": "https://test.some.domain.com"
}

Here, we’ve simply added a key value with key as api_base_url and the corresponding url value. We have to make sure that key we used for mapping the base url must be same across the json files otherwise we’ll get an error.

That is all for this step.

Accessing the Variables from Env

Next step is to access the url value which we defined in the json files. So we create a class called AppEnvironment as follows

abstract class AppEnvironment {

static const apiBaseUrl = String.fromEnvironment('api_base_url');
}

Here, we’re using the same json key we defined in the env json files i.e api_base_url. We extract the environment variable by using String.fromEnvironment. Similarly we can extract int and other data types as well.

Now we can use this static variable in our remote data sources classes which are making the api calls.

Running and Switching between Env

Now the last step is to run an environment and also to switch between them.

We can run the app in an environment by two ways

  1. By running the following command in the terminal
    flutter run — dart-define-from-file=.env/dev-config.json for dev env and similarly for other env.
  2. Or if you want a more convenient and using Android Studio then head to the run configuration button which you see on the top bar of Android Studio as follows

By default we’ve a main configuration set. Let click on the drop down icon and you’ll get an option of Edit configuration as follows

Click on Edit Configurations and you’ll see a screen as follows

Now on the left side, click on the ‘+’ icon, select Application type as Flutter and you’ll now see an empty config created as follows

Give this config a name like prod and in the Dart Entrypoint field, paste the path of the main.dart file. Then in the Additional run args paste the same command which we used in the terminal with flutter run

--dart-define-from-file=.env/prod-config.json

Now the config would look like this

Now click on Apply and Ok. Similarly create rest of the configs for other environments.

Now go back to the same run config drop down and you would be able to see all the configs you’ve created are visible in the list and we can select either of them to run our app with as follows

Bamn! That’s it. Now switching and running our environment is just a click away and no more code is required. We can add any number of variables we want to, define them in AppEnvironment class and can run our app with different configs without breaking any feature.

This is one way I found quite useful in my projects. It require no external dependency. You can try it out too and let me know what do you think.

That is all for now! Stay tuned!

Connect with me (if the content is helpful to you ) on

Until next time…

Cheers!

--

--

App Developer (Native & Flutter) | Mentor | Writer | Youtuber @_zaqua | Traveller | Content Author & Course Instructor @Droidcon | Frontend Lead @MahilaMoney