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

Question

有没有办法访问 --dart-define 定义的环境变量？ Flutter Web 的 index.html 文件中的命令？
我目前可以在 iOS 和 Android native 文件中访问它们，但还没有找到在 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 脚本(读取 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>