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 的方法）。

让它在 Flutter for Web 上工作而不是在任何其他平台上工作真的很重要！

谢谢你帮我....

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

Answer 1

I don't think that https://github.com/fluttercommunity/flutter_webview_plugin works in web since it uses native libraries.

HOWEVER, the great advantage of using a browser for your flutter app, is that you can use HTML and you don't need a webview there!

check this example of using a nested youtube player

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

Of course the communication with the content it's another history, since it's an iframe and in web browsers CORS is enabled it means you can't access the iframe from flutter, in the case of Google maps, they have an URL api and pass your marker location there ;)