Flutter for Web 中的 WebView 未加载 Google 地图或其他

Posted 2023-02-23

【中文标题】Flutter for Web 中的 WebView 未加载 Google 地图或其他

【英文标题】：WebView in Flutter for Web is not loading Google Maps or others

【发布时间】：2020-02-26 03:35:18

【问题描述】：

嘿嘿，

我的 WebView 无法加载的问题。它只显示一个加载屏幕。

我在 Flutter for Web 中使用 flutter_webview_plugin。 我不知道为什么它总是加载。无论我尝试过什么网站，它都会这样做。

import 'package:flutter/material.dart';
import 'package:website_aalen_by_night/widgets/info_card.dart';
import 'package:website_aalen_by_night/widgets/nav_bar.dart';

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'AAlen by Night',
      theme: ThemeData.dark(),
      home: WebsiteAalenByNight(),
      debugShowCheckedModeBanner: false,
    );
  


class WebsiteAalenByNight extends StatefulWidget 
  @override
  WebsiteState createState() => WebsiteState();


ScrollController controller = new ScrollController();

class WebsiteState extends State 
  @override
  Widget build(BuildContext context) 
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    FlutterWebviewPlugin().onHttpError.listen((WebViewHttpError item) 
      print("   WebView    onHttpError.code: $item.code");
    );

    return Scaffold(
      backgroundColor: Color.fromRGBO(79, 79, 79, 1),
      body: Stack(
        children: <Widget>[
          Scrollbar(
            child: ListView(
              controller: controller,
              children: <Widget>[
                InfoCard(),
                Image(
                  image: AssetImage("lib/images/map.png"),
                  //height: height,
                  width: width,
                  fit: BoxFit.cover,
                ),
                InfoCard(),
                LimitedBox(
                  maxWidth: width,
                  maxHeight: height,
                  child: WebviewScaffold(
                    url: "https://www.google.com",
                    withZoom: false,
                    withLocalStorage: false,
                    withjavascript: true,
                    withLocalUrl: true,
                  ),
                ),
              ],
            ),
          ),
          NavBar(),
        ],
      ),
    );
  

这样做的目的是在屏幕上实现一个带有标记的地图。所以我相信我可以尝试 WebView，但我很快就停下来了。

也许有更好的方法来实现地图（尝试了其他一些方法，例如使用地图插件，但我没有找到任何适用于 Flutter for Web 的方法）。

让它在 Flutter for Web 上运行非常重要，而不是在 任何其他平台！

谢谢你帮助我......

也许将来我可以为其他人回答这样的问题：D

【参考方案1】：

我不认为 https://github.com/fluttercommunity/flutter_webview_plugin 可以在 web 中使用，因为它使用本地库。

但是，在 Flutter 应用中使用浏览器的最大优势在于，您可以使用 html，并且不需要 Web 视图！

检查example 使用嵌套的 youtube 播放器

void main() 
  ui.platformViewRegistry.registerViewFactory(
    'hello-world-html',
    (int viewId) => IFrameElement()
      ..width = '640'
      ..height = '360'
      ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
      ..style.border = 'none'
  );
  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlElementView(viewType: 'hello-world-html'),
    ),
  ));

source

当然，与内容的通信是另一段历史，因为它是一个 iframe，并且在网络浏览器中启用了 CORS，这意味着您无法从颤振中访问 iframe，对于谷歌地图，他们有一个 URL api并在那里传递您的标记位置；）

【讨论】：

我无法在 Flutter for web 中导入 dart:html

我使用了universal_html 包，现在它可以工作了：D 感谢您的帮助

嘿伙计，你知道为什么我不能调整显示 html 窗口的小部件的大小吗？它只是拉伸了整个屏幕的大小......

我认为这可能与在 SliverList 中有关...我还没有找到解决办法