Flutter Web中的WebView

Question

Flutter Web中的WebView

27

我正在尝试在Flutter Web中显示Web视图，但我遇到了以下错误：

PlatformException(Unregistered factory, No factory registered for viewtype 'plugins.flutter.io/webview', null)

有没有办法在Flutter Web中显示WebView？

- Pyth0nGh057

5个回答

2

您可以尝试使用easy_web_view插件。对于iOS和Android，它使用本地webview_flutter插件；对于Web，它执行与@alex89607答案类似的操作。

- Alex

1

您可以使用 flutter_inappwebview 插件（我是它的作者）的版本 6.x.x，它引入了Web和macOS平台支持！

当前最新版本可用的是 6.0.0-beta.16。

它在底层使用 iframe HTML元素，因此非常受功能限制，非常遗憾。

查看官方 Setup Web在线文档开始使用。

- Lorenzo Pichilli

我安装了这个测试版，它可以在网页内加载另一个网页。这是我找到的唯一解决方案。非常感谢您的帮助。 - undefined

0

你可以使用 webview_flutter_web 插件，它是 webview_flutter 插件在 Web 上的实现。目前它还有一些限制，只支持以下功能：

loadRequest
loadHtmlString

- Hasan

-1

@mohamed-salah 的回答很有帮助，但是我在屏幕上只看到一个加载符号。我们需要将 webview 放在 WillPopScope 小部件中。使用以下代码来正确加载 webview -

在 pubspec.yaml 中添加依赖项

flutter_webview_plugin: ^0.3.9+1 // replace with latest version

在 StatefulWidget 类中，可以使用以下代码 -

class _WebViewLoadingState extends State<Details> {
  final _webViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // on pressing back button, exiting the screen instead of showing loading symbol
    _webViewPlugin.onDestroy.listen((_) {
      if (Navigator.canPop(context)) {
        // exiting the screen
        Navigator.of(context).pop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // WillPopScope will prevent loading
    return WillPopScope(
      child: WebviewScaffold(
        url: "https://www.google.com",
        withZoom: false,
        withLocalStorage: true,
        withJavascript: true,
        appCacheEnabled: true,
        appBar: AppBar(
          title: Text("Browser"),
        ),
      ),
      onWillPop: () {
        return _webViewPlugin.close();
      }
    );
  }
}

- Rohan Kandwal

2

@Rohan Kandwal，这个问题中所要求的在Flutter Web上不起作用。它只能在Flutter Android和iOS上工作，就像你使用的插件中所提到的一样。 - Jon Stark

@JonStark 您是正确的，当回答时没有注意到Flutter Web。 - Rohan Kandwal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alex89607 · Accepted Answer

编辑：以下是截至2021年5月16日的可运行示例：

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  // ignore: undefined_prefixed_name
  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'),
    ),
  ));
}

以下内容是本文作者的原始文章，与上述内容相同

首先需要执行platformViewRegistry：

  ui.platformViewRegistry.registerViewFactory(
  'hello-world-html',
  (int viewId) => IFrameElement()
    ..width = '640'
    ..height = '360'
    ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
    ..style.border = 'none');

看看这个示例。在这个示例中，老的库被导入了（在2019年9月29日），但是如果你把'flutter_web'改成'flutter'，它应该能够正常工作。

另外，你不仅可以使用 'IFrameElement'，也可以使用普通的html：

    ui.platformViewRegistry.registerViewFactory("simple_div", (int viewId) {
  DivElement element = DivElement();
  ...
  return element;