Closed
Description
I am trying to switch from 'dart:html' to 'package:web/web.dart' and ran into a problem migrating IFrameElement to HTMLIFrameElement.
My use-case is to visualize HTML-Code in a Flutter Web-App.
The following code compiles, but runs into an error when opening the View:
The following JSNoSuchMethodError was thrown building Builder(dirty):
TypeError: Illegal constructor
The line "web.HTMLIFrameElement iframeElement = web.HTMLIFrameElement()" seems to be the problem.
With "IFrameElement" (outcommented line) everything works fine.
// import 'dart:html';
import 'package:web/web.dart' as web;
import 'package:flutter/material.dart';
import 'dart:ui_web' as ui_web;
import 'package:business_app/features/news/models/news_model.dart';
class HTMLTextView extends StatelessWidget {
final NewsModel news;
HTMLTextView({super.key, required this.news}) {
String viewId = news.content ?? '';
// IFrameElement iframeElement = IFrameElement()
web.HTMLIFrameElement iframeElement = web.HTMLIFrameElement()
..style.border = 'none'
..style.width = '100%'
..style.height = '100%'
..srcdoc = """
<html lang="DE">
<head>
<title>${news.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { margin: 0; padding: 0; }</style>
</head>
<body>
${news.content ?? ''}
</body>
</html>
"""
..allowFullscreen = true;
// Das IFrameElement der Flutter-App UI hinzufügen.
// Hierfür wird die 'dart:ui' Plattformansicht genutzt.
ui_web.platformViewRegistry.registerViewFactory(
viewId,
(int _) => iframeElement,
);
}
@override
Widget build(BuildContext context) {
String viewId = news.content ?? '';
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(news.title),
),
body: HtmlElementView(viewType: viewId));
}
}
Versions:
Flutter 3.19.2 • channel stable
Dart 3.3.0 • DevTools 2.31.1
web 0.4.2 (web 0.5.0 incompatible with dependency constraints)
Metadata
Metadata
Assignees
Labels
No labels