flutter Web端支持内嵌加载网页

发现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相关知识
有什么错误欢迎批评指正 。