flutter web 中嵌入一个html

介绍

flutter web 支持使用 HtmlElementView嵌入html

Dart 复制代码
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';

class WebWidget extends StatelessWidget {
  const WebWidget({super.key});

  @override
  Widget build(BuildContext context) {
    DivElement frame = DivElement();
    IFrameElement iframe = IFrameElement()
    ..style.width = '100%'
    ..style.height = '100%'
    ..src = 'https://www.baidu.com'
    ..style.border = 'none';
    frame.append(iframe);
    // //设置token
    // StyleElement sFrame = StyleElement();
    // String script = """localStorage.setItem('token',token)""";
    // sFrame.innerHtml = script;
    // frame.append(sFrame);
    //ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        'hello-world',
            (int viewId) => frame);
    return SizedBox(
      height: 300,
      child: HtmlElementView(viewType: "hello-world",),
    );
  }
}

遇到的问题:

1. dart.ui找不到platformViewRegistry

复制代码
ui.platformViewRegistry.registerViewFactory报错

通过2种方案解除报错

1.在代码上方添加注释来接触报错

2.在analysis_options里添加设置忽略该错误(不推荐,影响范围大)

2.dart.html报错

dart.html,IFrame,ScriptFrame都是flutter web下的类,如果要以app的方式运行会报错,运行不起来。

解决方案:条件导包

写一个默认的widget在app环境下导入,HtmlElementView在web环境下导入

导致的问题(带来的影响)

触摸事件被HtmlElementView消费了,导致覆盖在HtmlElementView上层的widget响应不了点击事件,直白一点的说就是覆盖在HtmlElementView的button点击不了

解决方案:

有个 pointer_interceptor的库专门就是解决这个问题的pointer_interceptor,用PointerInterceptor包裹有需要响应点击的widget

思路是给需要响应点击的widget包裹一个HtmlElementView,覆盖在本身的那个HtmlElementView,以此来阻隔本身的HtmlElementView的点击事件

引用:

Flutter Web 加载html的填坑记录 - 简书

flutter - html editor enhanced alert dialog not working when the dialog placed on editor - Stack Overflow

相关推荐
0wioiw06 小时前
Flutter基础(FFI)
flutter
Georgewu9 天前
【HarmonyOS 5】鸿蒙跨平台开发方案详解(一)
flutter·harmonyos
爱吃鱼的锅包肉9 天前
Flutter开发中记录一个非常好用的图片缓存清理的插件
flutter
张风捷特烈10 天前
每日一题 Flutter#13 | build 回调的 BuildContext 是什么
android·flutter·面试
恋猫de小郭10 天前
Flutter 又双叒叕可以在 iOS 26 的真机上 hotload 运行了,来看看又是什么黑科技
android·前端·flutter
QC七哥10 天前
跨平台开发flutter初体验
android·flutter·安卓·桌面开发
小喷友11 天前
Flutter 从入门到精通(水)
前端·flutter·app
恋猫de小郭11 天前
Flutter 里的像素对齐问题,深入理解为什么界面有时候会出现诡异的细线?
android·前端·flutter
tbit11 天前
dart私有命名构造函数的作用与使用场景
flutter·dart