max-width attribute and auto-margins on network images for Flutter 3.10 by TheCarpetMerchant · Pull Request #1359 · Sub6Resources/flutter_html ·

This PR is not ready to be merged. I made it as best as I could while trying to learn the inner workings of this beautiful package :)

max-width is applied only within the build function of CssBoxWidget ; I have no idea if this is complete or even correct.
The behavior isn't fully coded
I added shrinkWrap to network images so they could work with Flutter 3.10, which apparently is the cause of images going out of screen ([BUG] Images extend beyond layout boundaries in flutter_html: ^3.0.0-beta.2 #1357)

Hopefully, it's not too shabby. The use of shrinkWrap should probably be removed in favor of understanding what's going wrong in the _calculateUsedMargins, but I haven't even tried given shrinkWrap fixes it (by bypassing the issue), at least AFAIK.

It is necessary to determine whether the current style width is greater than the screen width;
Keep the aspect ratio of the picture, otherwise the picture will be stretched and distorted

Where used set like this.

@TheCarpetMerchant

This PR is not ready to be merged. I made it as best as I could while trying to learn the inner workings of this beautiful package :)

@TheCarpetMerchant Do you intend to finish it or would you prefer someone to take over?

@eEQK

@eEQK Would prefer someone at least look it over. I didn't even run tests because my local setup kept erroring out ; it just works for my use case as is. If what I did is enough then great, but it would still be better someone take it over, especially to separate the 2 commits which are really two different things.

eEQK · 2023-09-04T09:23:31Z

lib/src/css_box_widget.dart

+Width? maxWidthCalculated;
+if (style.maxWidth != null && style.width != null) {
+if (style.maxWidth!.unit == Unit.percent &&
+style.width!.unit == Unit.px) {
+// If our max is a percentage, we want to look at the size available and not be bigger than that.
+try {
+double width =
+MediaQuery.of(context).size.width * (style.maxWidth!.value / 100);
+maxWidthCalculated = Width(width, style.width!.unit);
+} catch (_) {}
+} else if (style.width!.unit == style.maxWidth!.unit &&
+style.width!.value > style.maxWidth!.value) {
+maxWidthCalculated = Width(style.maxWidth!.value, style.maxWidth!.unit);
+}
+}


Could be extracted to a method called calculateMaxWidth and then you'd have final maxWidthCalculated = _calculateMaxWidth(style);
this way you don't have to use a var (finals should be used whenever possible)

eEQK · 2023-09-04T09:25:38Z

lib/src/css_box_widget.dart

+double width =
+MediaQuery.of(context).size.width * (style.maxWidth!.value / 100);
+maxWidthCalculated = Width(width, style.width!.unit);
+} catch (_) {}


silent errors are generally not a good idea - you should print the exception with a stacktrace at the very least (if this code happens to fail, you won't know unless you debug carefully the whole flow)

eEQK · 2023-09-04T09:32:55Z

lib/src/css_box_widget.dart

@@ -59,8 +59,24 @@ class CssBoxWidget extends StatelessWidget {
 final direction = _checkTextDirection(context, textDirection);
 final padding = style.padding?.resolve(direction);

+Width? maxWidthCalculated;
+if (style.maxWidth != null && style.width != null) {


Suggested change
if (style.maxWidth != null && style.width != null) {
final maxWidth = style.maxWidth;
final width = style.width;
if (maxWidth != null && width != null) {
this way you don't have to use the bang operator below (style.width!), just use width

also, if it's not entirely clear what an if checks for, I really like to assign names to stuff I put inside if, e.g. instead of
if (maxWidth != null && width != null) {
I would do
final hasWidthConstraint = maxWidth != null && width != null; if(hasWidthConstraint)
but I'd say it's fine to leave the one below as it is since it's pretty self-explanatory what you're trying to do there
if (maxWidth.unit == Unit.percent && width.unit == Unit.px)

eEQK · 2023-09-04T09:40:52Z

lib/src/css_box_widget.dart

+maxWidthCalculated = Width(width, style.width!.unit);
+} catch (_) {}
+} else if (style.width!.unit == style.maxWidth!.unit &&
+style.width!.value > style.maxWidth!.value) {


I think here would also be a good idea to name what the condition checks for

@eEQK

@eEQK Finally back to it. What's missing for now it the ability to compare 2 Widths that aren't in the same unit, if you know how to do that on a sufficient "best effort" basis at least that'd be great.
Since there's now a bunch of commits and this is 2 separate things in one PR (maxWidth and the BoxFit.contain change), I can close this PR and open 2 others if you think it's better for the commit history.

Adding
fit: BoxFit.contain,
to lib/src/builtins/image_builtin.dart

and using the width property in HTML() as follows:
'img': Style( width: Width( MediaQuery.of(context).size.width, Unit.auto, ), )

This give image width a good size but shows empty white space above and below the image.
Something that can be recommended?

'img': Style( width: Width( MediaQuery.of(context).size.width, Unit.auto, ), )

Any update on this issue?

 Html(
                  shrinkWrap: true,
                  data: widget.content,
                  onLinkTap: (url, _, __) {
                    handleLinkTap(url, _, __, _);
                  },
                  style: {
                    "body": Style(
                      margin: Margins.zero,
                      padding: HtmlPaddings.symmetric(horizontal: 0),
                    ),
                    'img': Style(
                      width: Width(100, Unit.px),
                    )
                  }),

unable to render image

…ter 3.10

Codecov Report

Attention: coverage is 26.31579% with 14 lines in your changes missing coverage. Please review.

Project coverage is 63.83%. Comparing base (2814407) to head (db25c35).

Files with missing lines	%	Lines
lib/src/css_box_widget.dart	25.00%	9 Missing⚠️
lib/src/css_parser.dart	0.00%	5 Missing⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1359      +/-   ##
==========================================
- Coverage   64.08%   63.83%   -0.25%     
==========================================
  Files          39       39              
  Lines        3032     3050      +18     
==========================================
+ Hits         1943     1947       +4     
- Misses       1089     1103      +14

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

TheCarpetMerchant mentioned this pull request Aug 15, 2023
[BUG] Images extend beyond layout boundaries in flutter_html: ^3.0.0-beta.2 #1357
Closed

TheCarpetMerchant mentioned this pull request Aug 27, 2023
[FEATURE] Support for max-width #1334
Open

eEQK reviewed Sep 4, 2023
View reviewed changes

TheCarpetMerchant added 4 commits March 11, 2025 13:53

Added the 'max-width' css attribute

4d1667c

Made network image be shrinkWrapped to work with auto margins in Flut…

3e5b069
…ter 3.10

Changed shrinkWrap for BoxFit.contain, seemingly achieves the same

b6d1173

maxWidth calculation in _calculateMaxedWidth, annotated

db25c35

Sub6Resources force-pushed the master branch from 36db0e8 to db25c35 Compare March 11, 2025 19:53

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eEQK Sep 4, 2023•
edited
Loading

Uh oh!

eEQK Sep 4, 2023

Uh oh!

eEQK Sep 4, 2023

Uh oh!

eEQK Sep 4, 2023•
edited
Loading

Uh oh!

eEQK Sep 4, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

-if (style.maxWidth != null && style.width != null) {
+final maxWidth = style.maxWidth;
+final width = style.width;
+if (maxWidth != null && width != null) {

Uh oh!

Conversation

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eEQK Sep 4, 2023•edited LoadingUh oh!There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eEQK Sep 4, 2023

Choose a reason for hiding this comment

Uh oh!

eEQK Sep 4, 2023

Choose a reason for hiding this comment

Uh oh!

eEQK Sep 4, 2023•edited LoadingUh oh!There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eEQK Sep 4, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Codecov Report

Uh oh!

Uh oh!

eEQK Sep 4, 2023•
edited
Loading

eEQK Sep 4, 2023•
edited
Loading