Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.79k stars 860 forks source link

New CSSBoxWidget and lots of bug fixes #1135

Closed Sub6Resources closed 2 years ago

Sub6Resources commented 2 years ago

There's a lot going on in this branch but it's time for review.

tldr; Calculating widths/margins/padding/border is hard, so I made a new widget that replaces both ContainerSpan and StyledText. This refactor also caused a good chunk of Style code to need refactoring, so I did so, adding support for em, rem, px, %, and auto values on the margin/width/height properties.

Fixes:

Enhancements:

Notable breaking change:

codecov[bot] commented 2 years ago

Codecov Report

Base: 51.09% // Head: 51.44% // Increases project coverage by +0.35% :tada:

Coverage data is based on head (7581ea7) compared to base (ee9f478). Patch coverage: 47.96% of modified lines in pull request are covered.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #1135 +/- ## ========================================== + Coverage 51.09% 51.44% +0.35% ========================================== Files 11 17 +6 Lines 2018 2587 +569 ========================================== + Hits 1031 1331 +300 - Misses 987 1256 +269 ``` | [Impacted Files](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker) | Coverage Δ | | |---|---|---| | [lib/src/anchor.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9hbmNob3IuZGFydA==) | `66.66% <0.00%> (-13.34%)` | :arrow_down: | | [lib/src/utils.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy91dGlscy5kYXJ0) | `77.27% <0.00%> (+54.54%)` | :arrow_up: | | [lib/src/layout\_element.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9sYXlvdXRfZWxlbWVudC5kYXJ0) | `36.47% <4.00%> (-3.78%)` | :arrow_down: | | [lib/src/css\_parser.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9jc3NfcGFyc2VyLmRhcnQ=) | `13.48% <4.59%> (-2.80%)` | :arrow_down: | | [lib/src/style/lineheight.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9zdHlsZS9saW5laGVpZ2h0LmRhcnQ=) | `11.11% <11.11%> (ø)` | | | [lib/src/style/size.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9zdHlsZS9zaXplLmRhcnQ=) | `33.33% <33.33%> (ø)` | | | [lib/src/style/fontsize.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9zdHlsZS9mb250c2l6ZS5kYXJ0) | `56.25% <56.25%> (ø)` | | | [lib/style.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3N0eWxlLmRhcnQ=) | `84.77% <58.62%> (-0.18%)` | :arrow_down: | | [lib/src/css\_box\_widget.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL3NyYy9jc3NfYm94X3dpZGdldC5kYXJ0) | `64.85% <64.85%> (ø)` | | | [lib/html\_parser.dart](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker#diff-bGliL2h0bWxfcGFyc2VyLmRhcnQ=) | `72.92% <74.57%> (-0.26%)` | :arrow_down: | | ... and [14 more](https://codecov.io/gh/Sub6Resources/flutter_html/pull/1135/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker) | | Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Matthew+Whitaker)

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

erickok commented 2 years ago

This is impressive work work Matthew! I am going to take it for a spin tomorrow.

I have a bunch of experience with golden widget tests so if you like I can help with that.

erickok commented 2 years ago

This is working really well. It's not that it solves all issues we had rioght now (and it doesn't need to) but it's a great foundation. I tested on Android and Web and rendering looks good.

The code is looking good, evn though it's a bit tough to read through all changes. But that's okay, I'd rather have this base with a bug than the spaghetti we had right now sometimes. Good job @Sub6Resources

Sub6Resources commented 2 years ago

Going to go ahead and merge this since the most recent changes were pretty trivial, unit tests passed, and my visual tests look the same before and after.