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

Question

你好，

我遇到了无法加载 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 的东西）。

It is really important to get it working on Flutter for Web and NOT on any other Platform!

谢谢你帮助我....

也许以后我可以为其他人回答这样的问题:D

Answer 1

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

但是，为您的 flutter 应用程序使用浏览器的巨大优势在于，您可以使用 HTML 而您不需要 webview！

检查这个 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，这意味着你无法从 flutter 访问 iframe，在 Google 地图的情况下，他们有一个 URL api 并在那里传递你的标记位置 ;)

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

WebView in Flutter for Web is not loading Google Maps or others

google-maps

webview

flutter-web