时间戳

首页 > 解决方案 > Flutter for Web 中的 WebView 未加载 Google 地图或其他

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

问题描述

嘿那里，

我有我的 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

标签： google-mapswebviewflutter-web

解决方案

我不认为https://github.com/fluttercommunity/flutter_webview_plugin在 web 中工作，因为它使用本机库。

然而，在 Flutter 应用程序中使用浏览器的最大优势在于，您可以使用 HTML，并且不需要 Web 视图！

检查这个使用嵌套 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'),
    ),
  ));
}

来源

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

推荐阅读