Flutter_html: Does this work in a Flutter Web App?

Created on 18 May 2019  ·  10Comments  ·  Source: Sub6Resources/flutter_html

enhancement
Source
picture hyperpanthera
👍3

All 10 comments

Not currently, since Flutter Web is still mostly separated from the main flutter library. Once flutter web gets merged into the main library it should work just fine. I'll do some more testing as that gets closer.

Sub6Resources picture Sub6Resources on 18 May 2019

@Sub6Resources Quick reply thanks, do you know a workaround to display a basic HTML file in a Flutter Web App?

hyperpanthera picture hyperpanthera on 18 May 2019

One fairly simple option would be for you to clone this library and switch all the imports to their web counterparts. I'd be open to hosting another branch on GitHub with a web version of this plugin until the two converge.

Other than that, I haven't heard of any other solutions for Flutter Web. Flutter Web is only in developer preview though, so it may be a while before they have the necessary support.

Sub6Resources picture Sub6Resources on 18 May 2019

One fairly simple option would be for you to clone this library and switch all the imports to their web counterparts. I'd be open to hosting another branch on GitHub with a web version of this plugin until the two converge.

Other than that, I haven't heard of any other solutions for Flutter Web. Flutter Web is only in developer preview though, so it may be a while before they have the necessary support.

Hey, Flutter is now currently in beta and was already merged into master.
Are there any updates regarding this package and flutter web ?
Currently on the v1.0.2 flutter web does not seem to work.

Would be great to get support for web as it gets more and more used :smile:

daniel-vera-g picture daniel-vera-g on 17 Sep 2020

It seems to work in proper Flutter for Web project for every major browser except Safari.

In case of Safari, petitparser package seems to be the culprit.

[Error] SyntaxError: Duplicate parameter 'char' not allowed in function with default parameter values.
    (anonymous function) (optional.dart.js:376)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__core__parser')
    load__packages__petitparser__src__parser__misc__epsilon_dart (epsilon.dart.js:6:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__parser__combinator__delegate')
    load__packages__petitparser__src__parser__action__cast_dart (cast.dart.js:6:84)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__core__parser')
    load__packages__petitparser__src__parser__predicate__predicate_dart (predicate.dart.js:6:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__core__parser')
    load__packages__petitparser__src__parser__action__pick_dart (pick.dart.js:6:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__core__parser')
    load__packages__xml__src__xml__utils__character_data_parser_dart (character_data_parser.dart.js:6:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__parser__combinator__delegate')
    load__packages__petitparser__src__parser__action__flatten_dart (flatten.dart.js:6:84)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__parser__repeater__possessive')
    load__packages__petitparser__src__parser__repeater__separated_by_dart (separated_by.dart.js:7:86)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__core__parser')
    load__packages__petitparser__src__parser__repeater__limited_dart (limited.dart.js:7:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__parser__character__parser')
    load__packages__petitparser__src__parser__character__whitespace_dart (whitespace.dart.js:7:82)
    execCb (require.js:1696)
    check (require.js:883)
    (anonymous function) (require.js:1139)
    (anonymous function) (require.js:134)
    (anonymous function) (require.js:1189)
    each (require.js:59)
    emit (require.js:1188)
    check (require.js:938)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__core__parser')
    load__packages__petitparser__src__definition__reference_dart (reference.dart.js:6:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
[Error] TypeError: undefined is not an object (evaluating 'packages__petitparser__src__parser__combinator__optional$46dart.src__parser__character__parser')
    load__packages__petitparser__src__parser__character__range_dart (range.dart.js:7:82)
    execCb (require.js:1696)
    check (require.js:883)
    enable (require.js:1176)
    init (require.js:788)
    callGetModule (require.js:1203)
    completeLoad (require.js:1590)
    onScriptLoad (require.js:1717)
kubaprzetakiewicz picture kubaprzetakiewicz on 22 Sep 2020
👍1

@ryan-berger are there any plans to update the library to work fully w/ Flutter for Web & CanvasKit?

kubaprzetakiewicz picture kubaprzetakiewicz on 23 Nov 2020

There are no such plans, but help and/or PRs are very much welcome.

erickok picture erickok on 23 Nov 2020
👍1

I've been using this package successfully with Flutter Web for almost a year now, but unfortunately found out that it is now crashing when I force the compiler to use --web-renderer=canvaskit
Would love to help fix this, but don't know where to start...

Just this very basic sample crashes with canvaskit but works fine without it:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Html(data: '<p>Test</p>'),
      ),
    );
  }
}


Crash

══╡ 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:
  Text
  file:///Users/jan/.pub-cache/hosted/pub.dartlang.org/flutter_html-1.2.0/lib/html_parser.dart:758:19

When the exception was thrown, this was the stack:
https://unpkg.com/[email protected]/bin/canvaskit.js 217:169         toWireType
https://unpkg.com/[email protected]/bin/canvaskit.js 174:403         ParagraphBuilder$_addPlaceholder
https://unpkg.com/[email protected]/bin/canvaskit.js 73:409          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 211:14                      build
packages/flutter/src/painting/text_span.dart 211:14                      build
packages/flutter/src/painting/text_painter.dart 569:7                    layout
packages/flutter/src/rendering/paragraph.dart 517:18                     [_layoutText]
packages/flutter/src/rendering/paragraph.dart 540:5                      [_layoutTextWithConstraints]
packages/flutter/src/rendering/paragraph.dart 653:5                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 281:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/shifted_box.dart 430:7                    performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/shifted_box.dart 226:5                    performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/paragraph.dart 565:14                     [_layoutChildren]
packages/flutter/src/rendering/paragraph.dart 652:30                     performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 281:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/shifted_box.dart 430:7                    performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/paragraph.dart 565:14                     [_layoutChildren]
packages/flutter/src/rendering/paragraph.dart 652:30                     performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 281:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 281: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 407:14                 performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/proxy_box.dart 1373:11                    performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/layout_helper.dart 54:10                  layoutChild
packages/flutter/src/rendering/stack.dart 570:43                         [_computeSize]
packages/flutter/src/rendering/stack.dart 597:12                         performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/proxy_box.dart 3364:13                    performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120: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 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/custom_paint.dart 518:11                  performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120:7                      performLayout
packages/flutter/src/rendering/object.dart 1777:7                        layout
packages/flutter/src/rendering/proxy_box.dart 120: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 900:13                         drawFrame
packages/flutter/src/rendering/binding.dart 320:5                        [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1144:15                      [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1082:9                       handleDrawFrame
packages/flutter/src/scheduler/binding.dart 865: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#8e9b1 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: RichText ← Text ← SizedBox ← StyledText ← Align ← DecoratedBox ← Padding ← Container ←
    ContainerSpan ← Semantics ← RichText ← Text ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=629.0, 0.0<=h<=Infinity)
  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
      TextSpan
        WidgetSpan#8494e
════════════════════════════════════════════════════════════════════════════════════════════════════

jlubeck picture jlubeck on 19 Jan 2021

Yes, the package works semi-reliably with HTML renderer, but it completely fails on CanvasKit.

Try flutter_widget_from_html - it's not perfect and has some issues, but it's actively maintained.

kubaprzetakiewicz picture kubaprzetakiewicz on 20 Jan 2021

Hopefully this will fix it: https://github.com/flutter/engine/pull/23685

jlubeck picture jlubeck on 20 Jan 2021
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Larpoux picture Larpoux  ·  3Comments
DrobyshevAlex picture DrobyshevAlex  ·  3Comments
red42 picture red42  ·  4Comments
robert-virkus picture robert-virkus  ·  3Comments
The-Redhat picture The-Redhat  ·  3Comments