Access--dart在index.html中定义环境变量

Question

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

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

Answer 1

访问环境声明(这是最正确的名称，也用于String.fromEnvironment((方法的文档中；另请参阅dart-sdk问题#42136-澄清-D/环境变量/环境声明的用法(，也可以从javascript代码中获得。

有两个细节需要记住：

• String.fromEnvironment()只能用const调用(在const上下文中也是隐式的(，而不能用"调用；新的">
• 在Flutter/web中，main((方法是，而不是在加载main.dart.js脚本时立即执行，因此将js脚本(读取dart中声明的变量(放在main.dart.js之后是不够的。因此，有必要在执行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>