search

daohoangson / flutter_widget_from_html

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
https://pub.dev/packages/flutter_widget_from_html
MIT License
641 stars 240 forks source link

Trouble rendering <sup> and <sub> - Flutter Web #203

Closed nadDhanushka closed 3 years ago

nadDhanushka commented 4 years ago

Hi, Hope all of you are staying safe and healthy. I have trouble rendering <sup> and <sub> tags on flutter Web project i'm working.

I'm on flutter Beta channel as i'm working on a web project. My flutter version is, Flutter 1.19.0-4.1.pre • channel beta • https://github.com/flutter/flutter.git Framework • revision f994b76974 (8 days ago) • 2020-06-09 15:53:13 -0700 Engine • revision 9a28c3bcf4 Tools • Dart 2.9.0 (build 2.9.0-14.1.beta)

So I recreated the scenario as below.

import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Widget from HTML (core)',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Widget from HTML (core)'),
        ),
        body: Center(
          child: HtmlWidget('Hello World <sub>subscript</sub>'),
        ),
      ),
    );
  }
}

Below is the log by running flutter run -d chrome,

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ The following NoSuchMethodError was thrown during performLayout(): '' method not found Receiver: null Arguments: []

The relevant error-causing widget was: RichText file:///media/storage/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_widge t_from_html_core-0.4.1/lib/src/core_widget_factory.dart:250:21

When the exception was thrown, this was the stack: dart-sdk/lib/_internal/js_dev_runtime/private/ddcruntime/errors.dart 214:49 throw dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 56:3 throwNullValueError dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 486:39 _notNull packages/flutter/src/widgets/widget_span.dart 108:37 build packages/flutter/src/painting/text_span.dart 211:14 build packages/flutter/src/painting/text_painter.dart 558:13 layout packages/flutter/src/rendering/paragraph.dart 490:18 [_layoutText] packages/flutter/src/rendering/paragraph.dart 513:5 [_layoutTextWithConstraints] packages/flutter/src/rendering/paragraph.dart 581:5 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/shifted_box.dart 394:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/custom_layout.dart 171:10 layoutChild packages/flutter/src/material/scaffold.dart 480:7 performLayout packages/flutter/src/rendering/custom_layout.dart 240:7 [_callPerformLayout] packages/flutter/src/rendering/custom_layout.dart 399:14 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/proxy_box.dart 1267:11 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/proxy_box.dart 3219:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/widgets/overlay.dart 700:14 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/proxy_box.dart 113:13 performLayout packages/flutter/src/rendering/object.dart 1767:7 layout packages/flutter/src/rendering/view.dart 167:13 performLayout packages/flutter/src/rendering/object.dart 1630:7 [_layoutWithoutResize] packages/flutter/src/rendering/object.dart 887:17 flushLayout packages/flutter/src/rendering/binding.dart 402:19 drawFrame packages/flutter/src/widgets/binding.dart 865:13 drawFrame packages/flutter/src/rendering/binding.dart 284:5 [_handlePersistentFrameCallback] packages/flutter/src/scheduler/binding.dart 1113:15 [_invokeFrameCallback] packages/flutter/src/scheduler/binding.dart 1052:9 handleDrawFrame packages/flutter/src/scheduler/binding.dart 861:7

dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback The following RenderObject was being processed when the exception was fired: RenderParagraph#32c8b relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: creator: RichText ← WidgetPlaceholder ← HtmlWidget ← Center ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#b3a03 ink renderer] ← ⋯ parentData: offset=Offset(0.0, 0.0) (can use size) constraints: BoxConstraints(0.0<=w<=937.0, 0.0<=h<=854.0) size: MISSING textAlign: start textDirection: ltr softWrap: wrapping at box width overflow: clip locale: en_US maxLines: unlimited This RenderObject had the following descendants (showing up to depth 5): text: TextSpan WidgetSpan#e80ea ════════════════════════════════════════════════════════════════════════════════ ════════════════════ Another exception was thrown: Assertion failed: file:///media/storage/flutter/packages/flutter/lib/src/rendering/shifted_box.dar t:322:12 Another exception was thrown: NoSuchMethodError: '' Also, I suspect this issue could be related to https://github.com/flutter/flutter/issues/42086 Highly appreciate a help on this. Thanks.
daohoangson commented 4 years ago

Thank you for the bug report, I'll see what I can do.

daohoangson commented 4 years ago

It looks like WidgetSpan support for web is still buggy therefore some tags won't render properly in Flutter Web. We will have to wait for web to catch up with other platforms then. Sorry, not much can be done from our side.

nadDhanushka commented 4 years ago

Hi @daohoangson. Understood & thanks for looking into this. Hope WidgetSpan support for Flutter Web added soon by Flutter team. Thanks.

daohoangson commented 4 years ago

The aforementioned flutter/flutter issue has been closed. The flutter/engine PR has been merged (see https://github.com/flutter/engine/pull/20276). Hopefully this will be made available soon to Flutter master channel, I'll test once it's released and report back.

daohoangson commented 4 years ago

SUP and SUB now work on Flutter Web (dev channel) 🎉 Try it yourself here https://html-widget-demo.now.sh/#/helloworld

Screen Shot 2020-08-19 at 4 34 03 PM

kubaprzetakiewicz commented 3 years ago

I'm getting this error again, although now it's tied to the CanvasKit.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following JSNoSuchMethodError was thrown during performLayout():
TypeError: Cannot convert "[object Object]" to float

The relevant error-causing widget was:
  RichText
  file:///Users/jprzetakiewi/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_widget_from_html_core-0.5.1+4/lib/src/core_widget_factory.dart:187:7

When the exception was thrown, this was the stack:
https://unpkg.com/canvaskit-wasm@0.18.1/bin/canvaskit.js 214:169           toWireType
https://unpkg.com/canvaskit-wasm@0.18.1/bin/canvaskit.js 171:403           ParagraphBuilder$_addPlaceholder
https://unpkg.com/canvaskit-wasm@0.18.1/bin/canvaskit.js 75:149            addPlaceholder
lib/_engine/engine/canvaskit/text.dart 644:23                              [_addPlaceholder]
lib/_engine/engine/canvaskit/text.dart 639:5                               addPlaceholder
packages/flutter/src/widgets/widget_span.dart 110:12                       build
packages/flutter/src/painting/text_span.dart 212:14                        build
packages/flutter/src/painting/text_painter.dart 569:7                      layout
packages/flutter/src/rendering/paragraph.dart 525:18                       [_layoutText]
packages/flutter/src/rendering/paragraph.dart 548:5                        [_layoutTextWithConstraints]
packages/flutter/src/rendering/paragraph.dart 620:5                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter_widget_from_html_core/src/widgets/css_sizing.dart 221:11  performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter_widget_from_html_core/src/widgets/css_sizing.dart 221:11  performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 266:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/proxy_box.dart 1306:11                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/shifted_box.dart 395:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/custom_layout.dart 171:10                   layoutChild
packages/flutter/src/material/scaffold.dart 911:7                          performLayout
packages/flutter/src/rendering/custom_layout.dart 243:7                    [_callPerformLayout]
packages/flutter/src/rendering/custom_layout.dart 402:14                   performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/proxy_box.dart 1306:11                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/stack.dart 565:14                           performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/proxy_box.dart 3230:13                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/widgets/overlay.dart 743:14                           performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/proxy_box.dart 111:7                        performLayout
packages/flutter/src/rendering/object.dart 1777:7                          layout
packages/flutter/src/rendering/view.dart 167:7                             performLayout
packages/flutter/src/rendering/object.dart 1634:7                          [_layoutWithoutResize]
packages/flutter/src/rendering/object.dart 884:17                          flushLayout
packages/flutter/src/rendering/binding.dart 454:19                         drawFrame
packages/flutter/src/widgets/binding.dart 895:13                           drawFrame
packages/flutter/src/rendering/binding.dart 320:5                          [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1117:15                        [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1055:9                         handleDrawFrame
packages/flutter/src/scheduler/binding.dart 864:7                          <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19    internalCallback

The following RenderObject was being processed when the exception was fired: RenderParagraph#2bc8e relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: RichText ← CssBlock ← WidgetPlaceholder<BuildTree> ← CssBlock ← ColumnPlaceholder ←
    TshWidget ← HtmlWidget ← DecoratedBox ← ConstrainedBox ← Container ← ClipRect ← Center ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=1920.0, 0.0<=h<=50.0)
  size: MISSING
  textAlign: start
  textDirection: ltr
  softWrap: wrapping at box width
  overflow: clip
  locale: en_US
  maxLines: unlimited
This RenderObject had the following descendants (showing up to depth 5):
    text: TextSpan
      WidgetSpan#05eea
      TextSpan
➜ flutter doctor -v
[✓] Flutter (Channel master, 1.24.0-8.0.pre.374, on macOS 11.0 20A5364e darwin-x64, locale en-GB)
    • Flutter version 1.24.0-8.0.pre.374 at /Users/jprzetakiewi/flutter
    • Framework revision 183f0e797a (4 days ago), 2020-11-26 19:12:28 +0100
    • Engine revision 20caf54969
    • Dart version 2.12.0 (build 2.12.0-76.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/jprzetakiewi/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 12.0, Build version 12A8189n
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Ultimate Edition (version 2020.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 51.0.3
    • Dart plugin version 202.8070

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (4 available)
    • iPhone 11 Pro (mobile) • 2A1554C1-CEDE-49D1-AD8B-91D6B16ED09C • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 11.0 20A5364e darwin-x64
    • Web Server (web)       • web-server                           • web-javascript • Flutter Tools
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 87.0.4280.67

• No issues found!
daohoangson commented 3 years ago

What is your HTML?

kubaprzetakiewicz commented 3 years ago

This can be reproduced with the demo_app as well.

The HTML can be as simple as:

<sup>test</sup>
<sub>8</sub>
kubaprzetakiewicz commented 3 years ago

Actually, it doesn't seem to work properly on DomCanvas either:

carbon

image

daohoangson commented 3 years ago

I think you may have encountered some Flutter Web bug. I'm unable to reproduce your issue with latest master and beta:

Screen Shot 2020-12-04 at 09 53 37

Can you try upgrading to latest master or switch to beta?

kubaprzetakiewicz commented 3 years ago

Upgraded to latest master and I can still reproduce the issue.

Code

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart' show HtmlWidget;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String html =
      '<p>Lorem ipsum dolor sit amet, <sup>consectetur</sup> adipiscing elit. Mauris dignissim turpis magna, id pretium arcu imperdiet vel. Morbi mollis consectetur augue, vitae gravida turpis tempus volutpat. Vivamus ut neque sagittis, facilisis tortor sit amet, maximus lectus. Fusce nec pulvinar tortor, id semper nisl. Duis a diam in mi tristique dictum vel sit amet dui. Fusce consectetur ultrices libero sit amet ultricies. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ante quam, bibendum quis rhoncus quis, rutrum eget tortor. Curabitur congue faucibus augue, sed varius odio elementum sit amet. Fusce fringilla mauris eu orci vestibulum, nec auctor nunc suscipit.</p>';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: HtmlWidget(
            html,
          ),
        ),
      ),
    );
  }
}

Demo

https://kubaprzetakiewicz.github.io/flutter_issue_demos/flutter_widget_from_html_203/

Screenshot

image

Environment

➜ flutter doctor -v
[✓] Flutter (Channel master, 1.25.0-5.0.pre.65, on macOS 11.0 20A5364e darwin-x64, locale en-GB)
    • Flutter version 1.25.0-5.0.pre.65 at /Users/jprzetakiewi/flutter
    • Framework revision 8f3a12f144 (7 hours ago), 2020-12-04 08:42:30 +0100
    • Engine revision 20caf54969
    • Dart version 2.12.0 (build 2.12.0-76.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/jprzetakiewi/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 12.0, Build version 12A8189n
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Ultimate Edition (version 2020.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 51.0.3
    • Dart plugin version 202.8070

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.0 20A5364e darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

Run command

➜ flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

Possibly important factors

daohoangson commented 3 years ago

This was a long time ago but I have just verified on our CI build with both canvaskit and html renderers:

https://html-widget-demo.vercel.app/canvaskit/#/goldens

https://html-widget-demo.vercel.app/html/#/goldens

Screen Shot 2021-09-12 at 01 13 37 Screen Shot 2021-09-12 at 01 13 53

I'm closing this now.

hongfeiyang commented 2 years ago

I can still reproduce this issue on stable 2.8.1

daohoangson commented 2 years ago

What is your HTML @hongfeiyang

hongfeiyang commented 2 years ago

What is your HTML @hongfeiyang

All good my HTML was malformed:) thanks