我尝试在Flutter for Web中显示Web视图,但出现以下错误:
PlatformException(Unregistered factory, No factory registered for viewtype 'plugins.flutter.io/webview', null)
有没有办法在Flutter Web中显示WebView?
xghobddn1#
编辑:以下是截至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;
wribegjk2#
您可以尝试使用easy_web_view插件。对于iOS和Android,它使用原生的webview_flutter插件,对于Web,它从@alex89607答案中做类似的事情。
vdzxcuhz3#
@mohamed-salah的回答很有帮助,但是我的屏幕上只有一个加载符号。我们需要把webview放在WillPopScope小部件中。使用以下代码正确加载webview-在pubspec.yaml中添加相关性
webview
WillPopScope
pubspec.yaml
flutter_webview_plugin: ^0.3.9+1 // replace with latest version
在StatefulWidget类中,使用以下代码-
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(); } ); } }
n8ghc7c14#
您可以使用flutter_inappwebview插件(我是它的作者)版本6.x.x,它引入了Web和macOS平台支持!目前可用的最新版本6是6.0.0-beta.16。它在底层使用iframe HTML元素,因此不幸的是,它的功能非常有限。请查看官方安装Web联机文档以开始安装。
flutter_inappwebview
6.x.x
6.0.0-beta.16
iframe
4条答案
按热度按时间xghobddn1#
编辑:以下是截至2021年5月16日的可运行示例:
这篇文章的其余部分只是复制了上面的内容,并且是原作者的原始文章
您首先需要执行platformViewRegistry:
看看example。在这个例子中,旧的库被导入(在29.09.19),但是如果你改变'flutter'上的'flutter_web',它必须工作。
此外,您不仅可以使用'IFrameElement',也可以使用一般的html:
wribegjk2#
您可以尝试使用easy_web_view插件。
对于iOS和Android,它使用原生的webview_flutter插件,对于Web,它从@alex89607答案中做类似的事情。
vdzxcuhz3#
@mohamed-salah的回答很有帮助,但是我的屏幕上只有一个加载符号。我们需要把
webview
放在WillPopScope
小部件中。使用以下代码正确加载webview
-在
pubspec.yaml
中添加相关性在
StatefulWidget
类中,使用以下代码-n8ghc7c14#
您可以使用
flutter_inappwebview
插件(我是它的作者)版本6.x.x
,它引入了Web和macOS平台支持!目前可用的最新版本6是
6.0.0-beta.16
。它在底层使用
iframe
HTML元素,因此不幸的是,它的功能非常有限。请查看官方安装Web联机文档以开始安装。