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

TheCarpetMerchant · 2023-08-15T18:58:26Z

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.

Rockets1080 · 2023-08-23T06:23:58Z

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.

eEQK · 2023-09-01T08:00:46Z

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?

TheCarpetMerchant · 2023-09-01T09:20:25Z

@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

    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

TheCarpetMerchant · 2023-10-03T16:59:39Z

@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.

utkarshmarwaha · 2024-07-14T11:30:02Z

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?

pranavo72bex · 2024-07-23T05:28:32Z

'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 · 2025-03-11T19:57:21Z

Codecov Report

Attention: Patch 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	Patch %	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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

max-width attribute and auto-margins on network images for Flutter 3.10#1359

max-width attribute and auto-margins on network images for Flutter 3.10#1359
TheCarpetMerchant wants to merge 4 commits intoSub6Resources:masterfrom
TheCarpetMerchant:master

TheCarpetMerchant commented Aug 15, 2023

Uh oh!

Rockets1080 commented Aug 23, 2023 •

edited

Loading

Uh oh!

eEQK commented Sep 1, 2023

Uh oh!

TheCarpetMerchant commented Sep 1, 2023

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!

TheCarpetMerchant commented Oct 3, 2023

Uh oh!

utkarshmarwaha commented Jul 14, 2024

Uh oh!

pranavo72bex commented Jul 23, 2024

Uh oh!

codecov bot commented Mar 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

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

Uh oh!

Conversation

TheCarpetMerchant commented Aug 15, 2023

Uh oh!

Rockets1080 commented Aug 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eEQK commented Sep 1, 2023

Uh oh!

TheCarpetMerchant commented Sep 1, 2023

Uh oh!

eEQK Sep 4, 2023 • edited Loading Uh 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 Loading Uh 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!

TheCarpetMerchant commented Oct 3, 2023

Uh oh!

utkarshmarwaha commented Jul 14, 2024

Uh oh!

pranavo72bex commented Jul 23, 2024

Uh oh!

codecov bot commented Mar 11, 2025

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Rockets1080 commented Aug 23, 2023 •

edited

Loading

eEQK Sep 4, 2023 •

edited

Loading

eEQK Sep 4, 2023 •

edited

Loading