Flutter Web 中的 WebView答案

【问题标题】：WebView in Flutter WebFlutter Web 中的 WebView
【发布时间】：2020-01-28 17:19:33
【问题描述】：

我正在尝试在 Flutter for Web 中显示 Web 视图，但出现以下错误：

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

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

【问题讨论】：

标签： flutter webview

【解决方案1】：

您可以尝试使用easy_web_view 插件。

对于 iOS 和 Android，它使用原生的 webview_flutter 插件，对于 Web，它与 @alex89607 的答案类似。

【讨论】：

【解决方案2】：

编辑：这是一个截至 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');

看看那个example。在该示例中，旧库已导入（在 29.09.19 上），但如果您在 'flutter' 上更改 'flutter_web' 它必须工作。

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

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

【讨论】：

我现在只想补充一点，您必须使用import 'dart:ui' as ui 而不是import 'package:flutter_web_ui/ui.dart' as ui。 ui.platformViewRegistry 会出现错误，但没关系。您可以通过在上面的行中添加// ignore: undefined_prefixed_name 来忽略它。
但是 dart:ui 对 Flutter web 不起作用？！

【解决方案3】：

@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 这个。如问题中所述，将不适用于flutter Web。它仅适用于您使用的插件中提到的flutter android和ios
@JonStark 你是对的，回答时没有注意到 Flutter web。

【解决方案4】：

你可以使用这个包： https://pub.dev/packages/flutter_webview_plugin

这是一个您可以使用的工作示例：

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'some title';
    return MaterialApp(
        title: title,
        home: WebviewScaffold(
          url: "yourwebsite.com",
          withZoom: false,
          withLocalStorage: true,
        ));
  }
}

【讨论】：

我已经复制粘贴了您的代码（只是将 url 替换为 https://www.google.com），它只是显示一个默认的 CircularProgressIndicator。知道为什么吗？提前致谢。