Support irregular tables #456

erickok · 2020-11-20T11:21:33Z

This fixes #242 #383 #406 #435 #213 #439 #447 #450

Adds support for irregular html tables and colspan/rowspan attributes. This swaps out Flutter's Table widget for flutter_layout_grid. It still supports styling on table, tr and th/td. Columns can be sized using colgroup (percentage and fixed sizes).

There is always room for improvement (for example, no row styling is applied to missing cells) but this should capture the vast majority of use cases and afaik has no regression to existing flutter_html users. I also believe this is the final thing blocking 0.11.0 users to upgrade to 1.x.

…more robust code

… and allow aligning their child content

daohoangson · 2020-11-20T15:41:35Z

This PR can't render this HTML:

<table>
  <tr>
    <td>
      <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
    </td>
  </tr>
</table>

Error: Intrinsics are not available for PlaceholderAlignment.baseline, PlaceholderAlignment.aboveBaseline, or PlaceholderAlignment.belowBaseline,

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
�[38;5;244mThe following assertion was thrown during performLayout():�[39;49m
Intrinsics are not available for PlaceholderAlignment.baseline, PlaceholderAlignment.aboveBaseline, or PlaceholderAlignment.belowBaseline,
'package:flutter/src/rendering/paragraph.dart':
Failed assertion: line 353 pos 18: 'RenderObject.debugCheckingIntrinsics'


�[38;5;248mEither the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
�[39;49m

�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mLayoutGrid�[39;49m
 ../…/src/layout_element.dart
�[38;5;244mWhen the exception was thrown, this was the stack�[39;49m
�[38;5;244m#2      RenderParagraph._canComputeIntrinsics�[39;49m
 package:flutter/…/rendering/paragraph.dart
�[38;5;244m#3      RenderParagraph._computeIntrinsicHeight�[39;49m
 package:flutter/…/rendering/paragraph.dart
�[38;5;244m#4      RenderParagraph.computeMinIntrinsicHeight�[39;49m
 package:flutter/…/rendering/paragraph.dart
�[38;5;244m#5      RenderBox._computeIntrinsicDimension.<anonymous closure>�[39;49m
 package:flutter/…/rendering/box.dart
�[38;5;244m#6      _LinkedHashMapMixin.putIfAbsent (dart:collection-patch/compact_hash.dart:291:23)�[39;49m
�[38;5;244m...�[39;49m
�[38;5;244mThe following RenderObject was being processed when the exception was fired: RenderLayoutGrid#12a70 relayoutBoundary=up21 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE�[39;49m
�[38;5;244mRenderObject: RenderLayoutGrid#12a70 relayoutBoundary=up21 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE�[39;49m
    �[38;5;244mparentData: <none> (can use size)�[39;49m
    �[38;5;244mconstraints: BoxConstraints(0.0<=w<=412.0, 0.0<=h<=Infinity)�[39;49m
    �[38;5;244msize: MISSING�[39;49m
    �[38;5;244mchild 1: RenderConstrainedBox#26f3c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE�[39;49m
        �[38;5;244mparentData: columnStart=0; columnSpan=1; rowStart=0; rowSpan=1; offset=Offset(0.0, 0.0)�[39;49m
        �[38;5;244mconstraints: MISSING�[39;49m
        �[38;5;244msize: MISSING�[39;49m
        �[38;5;244madditionalConstraints: BoxConstraints(w=Infinity, 0.0<=h<=Infinity)�[39;49m
        �[38;5;244mchild: RenderDecoratedBox#992c1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE�[39;49m
            �[38;5;244mparentData: <none>�[39;49m
            �[38;5;244mconstraints: MISSING�[39;49m
            �[38;5;244msize: MISSING�[39;49m
            �[38;5;244mdecoration: BoxDecoration�[39;49m
                �[38;5;244mcolor: Color(0x00000000)�[39;49m
                �[38;5;244mborder: Border(bottom: BorderSide(MaterialColor(primary value: Color(0xff9e9e9e)), 1.0, BorderStyle.solid))�[39;49m
            �[38;5;244mconfiguration: ImageConfiguration(bundle: PlatformAssetBundle#d6ecd(), devicePixelRatio: 3.0, locale: en_US, textDirection: TextDirection.ltr, platform: iOS)�[39;49m
            �[38;5;244mchild: RenderPadding#1ef65 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE�[39;49m
                �[38;5;244mparentData: <none>�[39;49m
                �[38;5;244mconstraints: MISSING�[39;49m
                �[38;5;244msize: MISSING�[39;49m
                �[38;5;244mpadding: EdgeInsets(6.0, 6.0, 6.0, 7.0)�[39;49m
                �[38;5;244mtextDirection: ltr�[39;49m
                �[38;5;244mchild: RenderConstrainedBox#7717b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE�[39;49m
                    �[38;5;244mparentData: offset=Offset(0.0, 0.0)�[39;49m
                    �[38;5;244mconstraints: MISSING�[39;49m
                    �[38;5;244msize: MISSING�[39;49m
                    �[38;5;244madditionalConstraints: BoxConstraints(biggest)�[39;49m
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderLayoutGrid#12a70 relayoutBoundary=up21 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../…/src/layout_element.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderDecoratedBox#36278 relayoutBoundary=up20 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mText�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderParagraph#82095 relayoutBoundary=up19 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSizedBox�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderConstrainedBox#9447d relayoutBoundary=up18 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderPositionedBox#59fe5 relayoutBoundary=up17 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderDecoratedBox#94c28 relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderPadding#af47b relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mText�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderParagraph#1746f relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSizedBox�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderConstrainedBox#2ddd0 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderPositionedBox#9ec26 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderDecoratedBox#82247 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mText�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderParagraph#ac359 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSizedBox�[39;49m
 ../lib/html_parser.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderConstrainedBox#84c22 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mContainer�[39;49m
 ../lib/flutter_html.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderConstrainedBox#6f591 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: _RenderSingleChildViewport#b297d relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderIgnorePointer#c26ba relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderSemanticsAnnotations#a708f relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderPointerListener#d9d81 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderSemanticsGestureHandler#f69d5 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: RenderPointerListener#486e5 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: _RenderScrollSemantics#d7aef relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mScaffold�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
RenderBox was not laid out: _RenderSingleChildViewport#b297d relayoutBoundary=up7 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mSingleChildScrollView�[39;49m
 lib/main.dart
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by scheduler library ═════════════════════════════════�[39;49m
Updated layout information required for RenderConstrainedBox#26f3c NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.
'package:flutter/src/rendering/object.dart':
Failed assertion: line 2647 pos 12: '!_needsLayout'
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

�[38;5;248m════════ Exception caught by Flutter framework ═════════════════════════════════�[39;49m
Bad state: Future already completed
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-VN)
    • Flutter version 1.22.4 at /xxx
    • Framework revision 1aafb3a8b9 (7 days ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /xxx
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /xxx
    • 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)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (1 available)
    • iPhone 12 Pro Max (mobile) • 7546B6C2-876E-4018-A7D9-81A7E09244BE • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)

! Doctor found issues in 2 categories.

erickok · 2020-11-20T16:36:31Z

@daohoangson Yes, you are right. It is easy enough to prevent that bug (by setting a PlaceholderAlignment.middle for images, which I do not think would impact rendering outside tables), but the images will still not be rendered correctly. Problem is that on initial render the image is not yet available, so the intrinsic height is as tall as the alt text (if any). Then when the image eventually renders (via Image.network) the table sizes is not updated accordingly. I will see if I can fix that.

erickok · 2020-11-20T21:58:08Z

@daohoangson Hum I see you are very aware of the whole situation and that flutter_layout_grid has problems with intrinsic heights.... you have your own html rendering flutter library?

daohoangson · 2020-11-21T01:12:30Z

Yes I do.

… is not up to par (due to the intrinsic height not being recalculated after the network image is ready to render)

ryan-berger · 2020-11-22T21:45:07Z

@erickok I'll review this, but as soon as it is reviewed does it need to get merged in, or is it still a WIP

ryan-berger

Just a couple of prodding questions, I didn't see anything that I would change

lib/src/layout_element.dart

lib/src/replaced_element.dart

…-tables

…eight

…rinsic height" as it breaks flowing usages of images

erickok · 2020-11-25T00:17:52Z

The problem with the images is that their intrinsic height is not being properly dispersed. This is because the cell contents are themselves InlineSpans and the widget therein (via WidgetSpan) seems to break things. Using IntrinsicHeight looked like it could work, but it breaks flowing usages of the widget. 😠

ryan-berger · 2020-12-15T23:16:36Z

@erickok is this PR just waiting on flutter_layout_grid?

erickok · 2020-12-16T09:00:03Z

Yes, it is, if we want to support images in tables. I hope the lib maintainer can find a fix for it.

tneotia · 2020-12-19T23:09:13Z

I gave the issue here a shot:

When using IntrinsicContentTrackSizes the intrinsic height of a row is calculated based on its children, but seemingly only once. When a child resizes, the intrinsic height is not updated I believe. This is especially onbious when using image widgets inside such rows:

PR created on https://github.com/vrtdev/flutter_html/tree/feature/irregular-tables.

Explanation:
I tried to find a way where the app would wait for the image to be loaded. I used bits and pieces from here.
In replaced_element.dart, the Image.network will now return as a FutureBuilder, with the future being the size of the image. Thus, we can pass a width and height parameter inside the Image.network using the snapshot.data and avoid the above issue.

With this implementation we can also allow the user to customize the loading widget if desired.

Let me know if there are any issues with this, I didn't do super extensive testing, but it seems to work fine.

erickok · 2020-12-21T08:19:03Z

Hey @tneotia thanks for that! I think this is very smart. I mean, ideally flutter_layout_grid gets fixed but for our use case in flutter_html it works great like this. I am going to merge it in, update the example app, test things and update my PR here.

Fix sizing issues for images in flutter_layout_grid

erickok · 2020-12-21T08:55:09Z

Seems to be working great!

@ryan-berger for me this is ready to merge now.

tneotia · 2020-12-21T12:37:47Z

Awesome! I did have a thought about this though - we might want to include a blurb about this issue in the README somewhere in case the user is using a customRender with images, since that would override this implementation, correct?

ryan-berger · 2020-12-29T19:38:50Z

@erickok Sorry, didn't see this until today. You are for sure good on this? Just double checking before I do a run through of the other library to check it out and a quick last run through of this code

erickok · 2020-12-29T19:54:38Z

It's working well for me, yes. We use this in production too. There is no known case where the solution doesn't work, either.

tneotia · 2020-12-29T20:56:31Z

Just to leave my two cents, also using this in prod and haven't encountered any issues thus far.

ryan-berger

Extra dependency isn't too overwhelming, makes use of better image loading, seems pretty good. LGTM

tneotia · 2021-01-06T16:21:36Z

@erickok I just encountered a scenario where this doesn't work for some reason:

<h1>Header 1</h1>
<p>&nbsp;</p>
<h2>Header 2</h2>
<p>&nbsp;</p>
<h3>Header 3</h3>
<p>&nbsp;</p>
<h4>Header 4</h4>
<p>&nbsp;</p>
<h5>Header 5</h5>
<p>&nbsp;</p>
<h6>Header 6</h6>
<p>&nbsp;</p>
<h3>Ruby Support:</h3>
<p>&nbsp;</p>
<p><br /><br />漢かん <br />字じ <br /><br />&nbsp;is Japanese Kanji.</p>
<p>&nbsp;</p>
<h3>Support for <code>sub</code>/<code>sup</code></h3>
<p><br />Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup></p>
<p>One of the most <span>common</span> equations in all of physics is <br /><var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
<p>&nbsp;</p>
<h3>Table support (with custom styling!):</h3>
<p>&nbsp;</p>
<p><br /><q>Famous quote.ghyhhy..</q></p>
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
<table><colgroup> </colgroup> <colgroup> <col width="50%" /> </colgroup> <colgroup> <col width="25%" /> </colgroup> <colgroup> <col width="25%" /> </colgroup>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>fData</td>
<td>fData</td>
<td>fData</td>
</tr>
</tfoot>
</table>
<p>&nbsp;</p>
<h3>Custom Element Support:</h3>
<p><br /><br /><br /></p>
<h3>SVG support:</h3>
<p><br /><br /><br /><br /><br /><br /></p>
<h3>List support:</h3>
<p><br /><br /></p>
<ol>
<ol>
<li>This</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>
<p>is</p>
</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>an</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li><br />ordered <br /><br />
<ul>
<ul>
<li>With<br /><br />...</li>
</ul>
</ul>
<br />
<ul>
<ul>
<li>a</li>
</ul>
</ul>
<br />
<ul>
<ul>
<li>nested</li>
</ul>
</ul>
<br />
<ul>
<ul>
<li>unordered <br /><br />
<ol>
<ol>
<li>With a nested</li>
</ol>
</ol>
<br />
<ol>
<ol>
<li>ordered list.</li>
</ol>
</ol>
<br /><br /></li>
</ul>
</ul>
<br />
<ul>
<ul>
<li>list</li>
</ul>
</ul>
<br /><br /></li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>list! Lorem ipsum dolor sit amet.</li>
</ol>
</ol>
<p>&nbsp;</p>
<ol>
<ol>
<li>
<h2>Header 2</h2>
</li>
</ol>
</ol>
<p><br /><br /></p>
<ol>
<ol>
<li>Header 2</li>
</ol>
</ol>
<p><br /><br /></p>
<h3>Link support:</h3>
<p>&nbsp;</p>
<p><br />Linking to <a href="https://github.com">websites</a> has never been easier.</p>
<p>&nbsp;</p>
<h3>Image support:</h3>
<p>&nbsp;</p>
<p><br /><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Google" /> <br /><a href="https://google.com"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Google" /></a> <br /><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d" alt="Alt Text of an intentionally broken image" /></p>
<p>&nbsp;</p>

It's some really random and messy HTML taken from the example app for this package, and I get:

The following assertion was thrown during performLayout():
GridPlacement.columnEnd cannot exceed column count

Any ideas as to why this could be happening? The above HTML renders fine on web...

erickok · 2021-01-06T20:00:43Z

@tneotia I'll check it out.

ryan-berger · 2021-01-07T02:23:18Z

@erickok Although I do trust that you have been using this in production and it has worked okay, I'm now very hesitant to push this out to pub due to @tneotia 's issue.

No pressure on when it needs to get done, but I just want to make sure that this is 100% good to go before pushing out into a place where it will be used in production for others.

tneotia · 2021-01-07T02:53:32Z

@ryan-berger could we do some sort of pre release with this PR? Ideally it would be nice to have some sort of beta test for this - since I found this by pure chance just messing around, it could be possible other types of HTML trigger exceptions as well.

erickok · 2021-01-07T10:56:13Z

That's because in that HTML there are multiple <colgroup> tags. Only the last one is used; which has 1 column defined but then there are actually 3 columns worth of data (3 td's)... I'll see if I can make this more robust.

This also fixes a crash you could get when the specs didn't match the data (cf Sub6Resources#456)

erickok · 2021-01-07T15:28:09Z

Fixed in #484 and also added proper support for the span attribute in colgroups.

ryan-berger · 2021-01-11T00:05:36Z

@tneotia We could definitely do some sort of beta. It looks like however @erickok has fixed the issue and I feel safe deploying this to a non-beta release after #484 is merged.

It is likely that there aren't too many more edge cases, and it seems like we've got a majority of use cases covered so any edge cases we missed can be reported in a new issue.

erickok added 3 commits November 20, 2020 01:33

Support irregular tables using flutter_layout_grid

d876489

Elevate td and tr elements to be parsed as cell type but cleaner and …

fd0a32c

…more robust code

Fix vertical spacing in table cells to expand to row intrinsic height…

dff758f

… and allow aligning their child content

erickok requested a review from ryan-berger November 20, 2020 11:21

Prevent crash when using an img in a table; even though the rendering…

9fa07bb

… is not up to par (due to the intrinsic height not being recalculated after the network image is ready to render)

ryan-berger requested changes Nov 22, 2020

View reviewed changes

lib/src/layout_element.dart Show resolved Hide resolved

lib/src/layout_element.dart Show resolved Hide resolved

lib/src/layout_element.dart Show resolved Hide resolved

lib/src/replaced_element.dart Show resolved Hide resolved

erickok added 3 commits November 23, 2020 00:08

Merge remote-tracking branch 'upstream/master' into feature/irregular…

80ed22d

…-tables

Fix image usage in table cells by always using an image's intrinsic h…

048aa49

…eight

Revert "Fix image usage in table cells by always using an image's int…

fd5e64b

…rinsic height" as it breaks flowing usages of images

erickok mentioned this pull request Dec 1, 2020

Intrinsic height not updated on resizing children shyndman/flutter_layout_grid#16

Closed

Fix flutter_layout_grid resizing issues with images

871d63f

tneotia mentioned this pull request Dec 19, 2020

Fix sizing issues for images in flutter_layout_grid vrtdev/flutter_html#1

Merged

Fix alt text not showing up on broken images

48a65f0

erickok added 2 commits December 21, 2020 09:49

Merge pull request #1 from tneotia/feature/irregular-tables

b24b264

Fix sizing issues for images in flutter_layout_grid

Move example html table down, to the original spot

173994a

erickok mentioned this pull request Dec 21, 2020

Render long html string get Table contains irregular row lengths error #443

Closed

erickok mentioned this pull request Jan 1, 2021

There was an error parsing the content. #477

Closed

ryan-berger approved these changes Jan 4, 2021

View reviewed changes

ryan-berger merged commit f9638ad into Sub6Resources:master Jan 4, 2021

erickok added a commit to vrtdev/flutter_html that referenced this pull request Jan 7, 2021

Support multiple table colgroups and their span attribute

f3aaac3

This also fixes a crash you could get when the specs didn't match the data (cf Sub6Resources#456)

erickok mentioned this pull request Jan 7, 2021

Support multiple table colgroups and their span attribute #484

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support irregular tables #456

Support irregular tables #456

erickok commented Nov 20, 2020

daohoangson commented Nov 20, 2020

erickok commented Nov 20, 2020

erickok commented Nov 20, 2020

daohoangson commented Nov 21, 2020

ryan-berger commented Nov 22, 2020

ryan-berger left a comment

erickok commented Nov 25, 2020

ryan-berger commented Dec 15, 2020

erickok commented Dec 16, 2020

tneotia commented Dec 19, 2020 •

edited

Loading

erickok commented Dec 21, 2020

erickok commented Dec 21, 2020

tneotia commented Dec 21, 2020

ryan-berger commented Dec 29, 2020

erickok commented Dec 29, 2020

tneotia commented Dec 29, 2020

ryan-berger left a comment

tneotia commented Jan 6, 2021

erickok commented Jan 6, 2021

ryan-berger commented Jan 7, 2021

tneotia commented Jan 7, 2021

erickok commented Jan 7, 2021

erickok commented Jan 7, 2021

ryan-berger commented Jan 11, 2021

Support irregular tables #456

Support irregular tables #456

Conversation

erickok commented Nov 20, 2020

daohoangson commented Nov 20, 2020

erickok commented Nov 20, 2020

erickok commented Nov 20, 2020

daohoangson commented Nov 21, 2020

ryan-berger commented Nov 22, 2020

ryan-berger left a comment

Choose a reason for hiding this comment

erickok commented Nov 25, 2020

ryan-berger commented Dec 15, 2020

erickok commented Dec 16, 2020

tneotia commented Dec 19, 2020 • edited Loading

erickok commented Dec 21, 2020

erickok commented Dec 21, 2020

tneotia commented Dec 21, 2020

ryan-berger commented Dec 29, 2020

erickok commented Dec 29, 2020

tneotia commented Dec 29, 2020

ryan-berger left a comment

Choose a reason for hiding this comment

tneotia commented Jan 6, 2021

erickok commented Jan 6, 2021

ryan-berger commented Jan 7, 2021

tneotia commented Jan 7, 2021

erickok commented Jan 7, 2021

erickok commented Jan 7, 2021

ryan-berger commented Jan 11, 2021

tneotia commented Dec 19, 2020 •

edited

Loading