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

相关推荐
火柴就是我7 小时前
flutter 之真手势冲突处理
android·flutter
Speed1237 小时前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间7 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭8 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone8 小时前
从flutter源码看其渲染机制
android·flutter
ALLIN1 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei1 天前
Flutter 国际化
flutter
Dabei1 天前
Flutter MQTT 通信文档
flutter
Dabei1 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉1 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter