发现LIKES比较多的flutter_webview_plugin 库和webview_flutter都不支持web端内嵌网页。而使用框架url_launcher在web端会另起一个页面并加载网页。
框架1
框架2
而我们的需求是在flutter页面内嵌Widget并加载网址。
最终效果
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Container(
child: HomePage(),
),
),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Widget getWebView() {
final IFrameElement _iframeElement = IFrameElement();
_iframeElement.src = "https://www.baidu.com";
_iframeElement.style.border = 'none';
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
'iframeElement',
(int viewId) => _iframeElement,
);
Widget _iframeWidget;
_iframeWidget = HtmlElementView(
key: UniqueKey(),
viewType: 'iframeElement',
);
return Stack(
children: <Widget>[
IgnorePointer(
ignoring: true,
child: Center(
child: _iframeWidget,
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: Container(
width: 700,
height: 700,
child: getWebView(),
),
),
);
}
}
当然，你也可以使用第三方支持web端的框架
webviewx 或 fwfh_webview
Web相关知识
有什么错误欢迎批评指正 。
