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

Question

有没有办法访问--dart-defineFlutter Web的index.html文件中的命令定义的环境变量？

我目前可以在 iOS 和 Android 本机文件中访问它们，但尚未找到在 html 文件中执行此操作的方法

Answer 1

访问环境声明（这是最正确的名称，也在String.fromEnvironment()方法的文档中使用；另请参阅 dart-sdk 问题 #42136 - 澄清 -D/环境变量/环境声明 的用法）是也可以通过 javascript 代码实现。

有两个细节需要记住：

• String.fromEnvironment()只能用const（也是隐式的，在 const 上下文中）调用，而不能用“new”调用。
• 在 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>