英文:
Flutter Web - Passing Google Maps API Key to index.html using env variables
问题
我的Google Maps API密钥在我像这样硬编码到标签中时正常工作：
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=HARD_CODED_HERE"></script>
</head>
现在，我不想硬编码该值，我需要从.env文件中获取它。
我尝试并迄今为止有效的方法是：
在main.dart中：
js.context['googleMapsApiKey'] = dotenv.env['GOOGLE_MAPS_API_KEY'];
html.document.dispatchEvent(html.CustomEvent("google-maps-api-key-loaded"));
基本上创建一个DOM元素，在index.html中进行捕获，如下所示：
在index.html中：
<script>
document.addEventListener("google-maps-api-key-loaded", function (){
var googleapis = window.GOOGLE_MAPS_API_KEY;
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=" + googleapis + "&callback=initMap";
script.defer = true;
script.async = true;
document.head.appendChild(script);
});
</script>
问题是，这个解决方案只在Web上工作，因为我需要将这些导入到main.dart中：
main.dart文件：
import 'dart:js' as js;
import 'dart:html' as html;
这将不允许iOS和Android运行，因为这些导入仅适用于Web应用程序。
是否有人使用类似的方法？或对解决方案有任何建议？最好不使用额外的包。谢谢。
英文:
My Google Maps API Key works properly when I hardcode it to the tag like this:
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=HARD_CODED_HERE"></script>
</head>
Now, I don't want to hard code the value and I need to get it from .env files.
What I have tried and worked so far was:
in the main.dart:
js.context['googleMapsApiKey'] = dotenv.env['GOOGLE_MAPS_API_KEY'];
html.document.dispatchEvent(html.CustomEvent("google-maps-api-key-loaded"));
Basically creating a DOM element for capturing after in the index.html like this:
in the index.html:
<script>
document.addEventListener("google-maps-api-key-loaded", function (){
var googleapis = window.GOOGLE_MAPS_API_KEY;
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=" + googleapis + "&callback=initMap";
script.defer = true;
script.async = true;
document.head.appendChild(script);
});
</script>
The problem is that this solution works only on web because I needed to import these to main.dart:
main.dart file:
import 'dart:js' as js;
import 'dart:html' as html;
Which will not allow iOS and Android to run because these import are intended for web apps, only.
Is any body using similar approach? Or any suggestion for a solution? Preferably without using additional package.
Thanks
答案1
得分: 1
在移动设备上需要应用密钥。
Dart 为移动设备定义应用密钥。您需要两次输入它，一次在VSCode启动中，一次在任务部分。然后在Dart中检查是否不是Web，并通过Dart定义读取环境密钥。
英文:
hmm so mobile needs the app key.
dart define the app key for mobile. You would need to enter it twice, once in the vscode launch and once in the task part. Then in dart check if not web and read the env key via dart define.
答案2
得分: 0
最终，我找到的解决方案是安装 universal_html 包：https://pub.dev/packages/universal_html
导入应该如下所示：
import 'package:universal_html/js.dart' as js;
import 'package:universal_html/html.dart' as html;
希望这对某人有帮助。
英文:
In the end, the solution that I've found was installing the package universal_html: https://pub.dev/packages/universal_html
The imports should look like this:
import 'package:universal_html/js.dart' as js;
import 'package:universal_html/html.dart' as html;
I hope this helps somenone.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论