How to use .env in Flutter web?

Question

Short story:

I am trying to use .env file in my Flutter Web project.

I used flutter_dotenv before in Flutter mobile app but it is not working in Flutter web.

How can we use .env file in Flutter web?

Long Story:

For now, I am using dart file to save current constant values such as backend url.

Backend is in same domain like this => https://domain_for_webapp.com/api/

class Environment {

  // API URL
  static const String API_URL ='https://domain_for_webapp.com/api/';
...

But problem here is I have one more server to deploy same site https://another_domain_for_webapp.com/api/ So I tried to solve that by using relative url

class Environment {

  // API URL
  static const String API_URL ='/api/';
...

But Flutter web can't find correct full API url for each server.

To solve this I have been trying to use .env like in normal web app.

But I can't use .env in Flutter web.

Is there any proper solution for this problem?

Solution 1

Like mentioned here, you can rename your .env file to something that doesn't start with a dot. I've changed my .env file to "dotenv".

Solution 2

flutter_dotenv support Flutter Web from Jan 18th 2021

Create a .env file in the root of your project with the example content:

FOO=foo
BAR=bar
FOOBAR=$FOO$BAR
ESCAPED_DOLLAR_SIGN='$1000'

Add the .env file to your assets bundle in pubspec.yaml

  assets:
    - .env

Optionally add the .env file as an entry in your .gitignore if it isn't already

*.env

Load the .env file in main.dart

import 'package:flutter_dotenv/flutter_dotenv.dart' as DotEnv;

Future main() async {
  // NOTE: The filename will default to .env and doesn't need to be defined in this case
  await DotEnv.load(fileName: ".env");
  //...runapp
}

You can then access variables from .env throughout the application

import 'package:flutter_dotenv/flutter_dotenv.dart';

env['VAR_NAME'];

For more information. https://pub.dev/packages/flutter_dotenv

Solution 3

Unfortunately, .env doesn't seem to work with web as you've noticed. Hopefully it'll get integrated eventually, but for now when I had the same issue I found that the recommended way of configuring the web involves using environment variables and the dart-define parameter:

String urlBase = const String.fromEnvironment("url_base");

This way you can set up your run and build environment with different variables.

Unfortunately, this isn't quite as 'set and forget' as a .env file, so I like to put a guard like this on it so that you're made aware of it immediately when you try running:

if (urlBase == null) {
  throw Exception("You must define url_base. This can be done "
                  "with the --dart-define arg to run or build");
}

If you're using an IDE you will need to pass in the parameters. For Visual Studio Code you can do this with a launch.json file something like this:

"configurations": [
    {
        "name": "Flutter",
        "request": "launch",
        "type": "dart",
        "args": [
            "--dart-define",
            "url_base=https://myurl.com/base"
        ]
    }
]

And for IntelliJ/Android Studio you can do it in the run configuration:

In whatever you use for your build tooling, it's as simple as adding the additional parameter to the flutter build web command, i.e. with docker:

RUN /usr/local/flutter/bin/flutter build web --dart-define url_base=$url_base