在 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 腳本（讀取 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>