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

[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 :)

• 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]

1. It is necessary to determine whether the current style width is greater than the screen width;
2. Keep the aspect ratio of the picture, otherwise the picture will be stretched and distorted
   
   Where used set like this.

[eEQK]

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]

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

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]

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]

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

[eEQK]

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]

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

[TheCarpetMerchant]

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

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]

'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