如何在 Flutter web 中使用 .env？

Question

短篇小说：

我正在尝试在我的 Flutter Web 项目中使用 .env 文件。

我之前在 Flutter 移动应用中使用过flutter_dotenv，但在 Flutter web 中无法使用。

我们如何在 Flutter web 中使用 .env 文件？

长篇大论：

目前，我正在使用 dart 文件来保存当前的常量值，例如后端 url。

后端像这样在同一个域中 => https://domain_for_webapp.com/api/

class Environment {

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

但这里的问题是我有另外一个服务器来部署同一个站点https://another_domain_for_webapp.com/api/ 所以我尝试通过使用相对 url 来解决这个问题

class Environment {

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

但 Flutter web 无法为每个服务器找到正确的完整 API url。

为了解决这个问题，我一直在尝试像在普通网络应用中一样使用.env。

但我不能在 Flutter web 中使用 .env。

这个问题有合适的解决方案吗？

Answer 1

就像提到的here，您可以将您的 .env 文件重命名为不以点开头的名称。我已将 .env 文件更改为“dotenv”。

Answer 2

flutter_dotenv 从 2021 年 1 月 18 日起支持 Flutter Web

在项目的根目录中创建一个.env 文件，其中包含示例内容：

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

将.env 文件添加到pubspec.yaml 中的资产包

  assets:
    - .env

如果尚未添加 .env 文件，则可以选择将其作为条目添加到您的 .gitignore 中

*.env

在main.dart中加载.env文件

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
}

然后您可以在整个应用程序中从.env 访问变量

import 'package:flutter_dotenv/flutter_dotenv.dart';

env['VAR_NAME'];

了解更多信息。 https://pub.dev/packages/flutter_dotenv

Answer 3

不幸的是，如您所见，.env 似乎不适用于 web。希望它最终会被集成，但现在当我遇到同样的问题时，我发现推荐的配置 Web 的方法涉及使用环境变量和 dart-define 参数：

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

通过这种方式，您可以使用不同的变量设置运行和构建环境。

不幸的是，这不像 .env 文件那样“一劳永逸”，所以我喜欢在它上面放置一个这样的保护，以便在你尝试运行时立即意识到它：

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

如果您使用的是 IDE，则需要传入参数。对于 Visual Studio Code，您可以使用类似这样的 launch.json 文件来执行此操作：

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

对于 IntelliJ/Android Studio，您可以在运行配置中进行：

无论您使用什么构建工具，只要将附加参数添加到 flutter build web 命令，即使用 docker：

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