在 index.html 中访问 --dart-define 环境变量

Question

有什么方法可以访问 Flutter Web 的 index.html 文件中 --dart-define 命令定义的环境变量？

我目前可以在 iOS 和 Android 本机文件中访问它们，但在 html 文件中没有找到这样做的方法

Answer 1

访问环境声明（这是最正确的名称，也用于String.fromEnvironment() 方法的文档中；另请参阅 dart-sdk issue #42136 - Clarify usage of -D/environment variables/environment declarations)，也可以来自 javascript 代码。

有两个细节需要牢记：

• String.fromEnvironment() 只能用 const 调用（也是隐式的，在 const 上下文中），不能用“new”调用。
• 在 Flutter/web 中，main() 方法不是在加载main.dart.js 脚本后立即执行，因此放置 js 脚本（在 main.dart.js 之后立即读取在 dart 中声明的变量。因此，当 dart 代码已执行时，有必要以某种方式向 js 代码发出信号。为了解决这个问题，我求助于自定义 DOM 事件。如果有更好的解决方案，我邀请您报告。

示例：

main.dart

import 'package:flutter/material.dart';

import 'dart:js' as js;
import 'dart:html' as html;

void main() {
  //To expone the dart variable to global js code
  js.context["my_dart_var"] = const String.fromEnvironment("my_dart_var");
  //Custom DOM event to signal to js the execution of the dart code
  html.document.dispatchEvent(html.CustomEvent("dart_loaded"));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
   //...
}

在index.html：

  <script src="main.dart.js" type="application/javascript"></script>

  <script>

    //Here my_dart_var is undefined
    console.log(`my_dart_var: ${window.my_dart_var}`);

    document.addEventListener("dart_loaded", function (){
      //Here my_dart_var is defined
      console.log("dart_loaded event");
      console.log(`my_dart_var: ${window.my_dart_var}`);
    });
  </script>