How to use Environmental Variables in Flutter
Sandro MaglioneGet in touch with me
28 September 2022[updated]•
7 min read
Coming from the web I was used to define and use environmental variables in my apps. Typically those are defined inside a
How to achieve the same result in Flutter? In dart the process is different. After some research, I was able to implement a complete setup for environmental variables in a Flutter app.
In this post we are going to learn:
- How and where to define environmental variables in dart
- How to access these variables in the app
- How to setup different environmental variables for different environment (production, development, testing, etc.)
Why would you need environmental variables at all?
The primary usecase for environment variables is to limit the need to modify and re-release an application due to changes in configuration data.
Some examples of environmental variables are keys, URLs, domain names, email addresses.
What these have in common is that their values change infrequently. The application logic treats them like constants, rather than mutable variables.
The typical usecase for environmental variables is for storing and accessing secret keys in your app.
Every API requires to pass a secret key with each request to validate your identity. These keys should remain secret; they should not be pushed to a remote repository.
The most basic approach would be to define these variables as global constants in your app, directly inside a
Nonetheless, this method is not ideal for the following reasons:
- Every member of the team needs to create the
keys.dartfile in his local machine, since this file cannot be stored in a shared repository
- These keys are static, they cannot be switched based on the app configuration or environment
- Every time an environmental variable changes we need to access the source code
That is why dart has a built-in alternative for this!
String class in dart has a static method
String.fromEnvironment. This method allows to access the variables defined using the
For example, when you run the
build command, you can add multiple
--dart-define flags to assign a value to each environmental variable:
When we run this command our app has access to the
With this strategy is easy to define multiple variables for different environments (production, development, testing, etc), directly from the command line.
Defining environmental variables from the command line is ideal for testing different configurations in a CI/CD pipeline.
The first step to access environmental variables in dart is to define an
abstract class that stores a constant for each variable in the app.
In this example, we are going to see how to define environmental variables for a Supabase project. A Supabase app needs to access two variables:
SUPABASE_URL: The source URL of your Supabase project
SUPABASE_ANNON_KEY: The key used to make request to your project
In order to access these two variables, we create a
constants.dart file with the following content:
By defining these variables as
static const we can access them by calling
The class is defined as
abstractbecause it should not be possible to create an instance of this class (you cannot do
The second step is defining those variables when we run our app.
As we have seen above, we just need to add the
--dart-define flag to our
Make sure to spell the name of the variables correctly: this should be the same name used when calling
There is more.
Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.
If you are using vscode as IDE, you can create a
launch.json file. This file contains the command run by the IDE when starting your app.
.vscode directory and a
launch.json file inside it. You can then add the following to run your app using environmental variables:
As stated before, our goal is to define different environments with different variables for every configuration.
--dart-define this becomes super easy. We can just add a new entry to our
This two commands are used for the
Development environments. As you can see, we reference two different entry files:
We need to create those two files alongside the default
main.dart. The suggestion here is to keep the shared configuration inside
main.dart and defined environment-specific configurations inside
You can also use an external package to import environmental variables in your app.
There are many different solutions on pub.dev. The final goal is the same: define some shared global constants and access them in your Flutter app.
One example is envify. Envify allows you to import environmental variables directly from a
This package uses build_runner to read the content of
.env and generate a class containing all your constants.
First of all, create a
.env file. This file contains a list of key-value pairs:
Then create a dart file (
env.dart) and define the expected environmental variables to generate:
Finally, run the generator to access the variables in your app:
This command will generate an
As you can see, the end result is the same: we have an
abstractclass containing all our environmental variables.
That's it! Now you can leverage the power of environmental variables in your Flutter app.
Every member of the team should create a
launch.json file containing the correct
--dart-define configuration. You can then define different environments simply by creating a new
main_*.dart file and its corresponding entry inside
If this post was interesting, you can follow me on Twitter for daily updates and tips on Flutter and dart.
Thanks for reading.