flutter_html_css_percent_size 0.3.0 copy "flutter_html_css_percent_size: ^0.3.0" to clipboard
flutter_html_css_percent_size: ^0.3.0 copied to clipboard

Published 2 days ago • verified publisherchaosworld.cc
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
→

Metadata

A flutter_html extension that renders percentage width, height, padding and margin, which flutter_html 3.0.0 parses as zero.

More...

0.3.0 #

  • Renamed from flutter_html_css_percent_size_extension on pub.flutter-io.cn. The old package stays published and is marked discontinued with this one as its replacement. Class names are unchanged.

0.2.0 #

  • Percentage padding and margin. flutter_html 3.0.0 loses them two ways: the padding and margin shorthands run a removeWhere that strips every PercentageTerm, so padding: 5% sets nothing and padding: 5% 10px turns into 10px on all four sides; the sixteen longhands go through the same expressionToLengthOrPercent branch that zeroes width: 50%, so padding-left: 5% is a padding of zero. No error, no warning. Re-measured: a <div style="padding: 5%"> is 20 px high where padding: 40px gives 100.
  • Same mechanism as width: at the building step we resolve every side against the containing block's width (all four sides, as CSS says) and write logical pixels into Style.padding and Style.margin. padding: 5% in a 784-wide block now renders bit-for-bit like padding: 39.2px: paragraph at 47.2, box 98.4 high. Shorthands, longhands and the -inline / -block logical forms, 22 property names in all, listed in kCssPercentEdgeProperties.
  • A mixed shorthand is expanded by us in full, because flutter_html expands what is left after the strip: padding: 5% 10px 20px used to render 10 above and below and 20 left and right, and now renders 39.2, 10, 20, 10. px, em, rem, bare numbers and auto ride along; a calc() term in such a shorthand stays with flutter_html.
  • Negative margins work (margin-left: -5% pulls the paragraph out by 39.2), a negative padding is written as zero, and margin: 5% auto still centres a width: 50% block.
  • What it doesn't do: collapse. flutter_html collapses margins at the preProcessing step, when a percentage still reads as zero, and we write the pixels afterwards. Two adjacent <div style="margin: 5%"> sit 100 apart where the same margin in pixels gives 61. Documented in the README.
  • Companions, measured: padding: 5%; max-width: 100px gives a padding of 5 with CssSizeConstraintsHtmlExtension first (the basis is the clamped 100) and 39.2 with it second, and unlike the width case the clamp survives either order. The pinned order stays. CssInteractionHtmlExtension's MouseRegion covers the padding and the margin in either order, and CssBorderHtmlExtension puts the border outside the padding in either order. No new order rule.
  • resolvePercentages: false now zeroes every percentage side, and still writes the pixel sides of a mixed shorthand, so padding: 5% 10px keeps its 10 left and right instead of flutter_html's 10 on all four.
  • CssPercentSizes gains padding and margin (CssPercentEdges, eight CssEdgeLength? sides) and hasPercent. Nothing existing changed shape.
  • Dev dependency on flutter_html_css_object_fit moved from git to pub.flutter-io.cn now that 0.1.0 is hosted. 49 new tests, 96 in all.

0.1.0 #

  • Initial release. flutter_html 3.0.0 parses width and height but has no branch for a percentage value, so width: 50% comes out as zero pixels. A <div> collapses, an <img style="width: 50%"> is Size(0, 0) and disappears, and there is no error and no warning. This extension resolves the percentage against the incoming constraints at the building step and writes logical pixels into Style.width and Style.height. In a containing block of 784 that same <div> is 392 wide, and that same image is Size(392, 196) with its aspect ratio intact, because the pixel width reaches Image.width.
  • Whatever extension or built-in would have rendered the element still renders it. We only change the Style on the way through.
  • Can't resolve a percentage? We drop it, so the used value is auto. That is what CSS does with an invalid declaration, and it still beats the zero.
  • resolvePercentages: false for an Html under an IntrinsicHeight or an IntrinsicWidth. Resolving needs a LayoutBuilder, a LayoutBuilder can't do dry layout, and the tree throws otherwise.

← Metadata

0
likes
160
points
40
downloads

Documentation

API reference

Publisher

verified publisherchaosworld.cc

Weekly Downloads

Metadata

A flutter_html extension that renders percentage width, height, padding and margin, which flutter_html 3.0.0 parses as zero.

Repository (GitLab)
View/report issues
Contributing

Topics

#flutter-html #css #html #extension #percentage

License

MPL-2.0 (license)

Dependencies

flutter, flutter_html, html

More

Packages that depend on flutter_html_css_percent_size

Back