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

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

Metadata

A flutter_html extension that lays out CSS flexbox containers, single-axis grid containers and gap.

More...

0.3.0 #

  • Renamed from flutter_html_css_flex_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 #

  • Repairs the rest of the display keywords flutter_html 3.0.0 gets wrong. expressionToDisplay (css_parser.dart:905-921) knows five keywords and returns Display.inline for everything else, and declarationsToStyle (:302) assigns it without a check. So table, table-cell, inline-table, contents, flow-root, ruby and eleven more demoted a block element to inline, which is worse than dropping the declaration. Measured before the fix, on a <div> carrying each value, with the text xx in front of it, in an 800 px Html: every one of the nineteen keywords rendered the page 17 px tall, with the div's text joined to xx and no CssBoxWidget of its own, against 34 px and an 800x17 box for display: block.
  • table, table-row, table-row-group, table-header-group, table-footer-group, table-caption, flow, flow-root and run-in now render block-level: 34 px, an 800x17 box, same as display: block. table-cell and inline-table become a shrink-to-fit box in the line, 42x17 where the text is 42 px wide, so two cells sit side by side. No table layout: no column widths, no shared row height, no borders between cells.
  • table-column and table-column-group now render nothing. A column box does not render its content (CSS 2.1 17.5.1), and that is the one mapping here that removes content rather than restoring a box. Nothing warns about it.
  • contents and the five ruby keywords keep their own Display. They are inline-level, so Display.inline was already the right level and the pixels do not move: same height, same box count, measured both ways. Only Style.display stops lying, for whatever else reads it.
  • Reads the two-value display syntax. flutter_html passes only the first term to its parser, so block ruby was already block while inline flow-root was inline. inline flow-root and inline table now get the inline-block box they ask for, and block list-item and inline list-item reach Display.listItem and Display.inlineListItem instead of Display.inline. A flex or grid inner keyword sets the box level only; use the one-word form for the layout.
  • New kCssDisplayRepairValues and cssDisplayRepairOf. kCssFlexDisplayValues is unchanged: it is still exactly the four values this extension lays out, and the two sets do not overlap. A sibling package that suppresses display: table can keep suppressing it, because a <div> is block-level anyway without the declaration.
  • Known cost of mapping table to Display.table rather than Display.block: flutter_html trims white space around a Display.block child only (whitespace.dart:53), so a space either side of the box survives. A space on each side measured as "xx yy" and "AAA ", where display: block gives "xxyy" and "AAA".

0.1.0 #

  • Initial release. Adds a flutter_html extension that lays out display: flex and display: inline-flex containers with flex-direction, flex-wrap, justify-content, align-items, align-content, align-self, flex, flex-grow, flex-basis, order, gap, row-gap and column-gap, all read from an element's inline style.
  • Repairs Style.display for these containers. flutter_html 3.0.0 maps every display value it does not know to Display.inline, so display: flex turns a block element inline before this extension runs.
  • Lays out display: grid and display: inline-grid as well, with grid-template-columns limited to <length>, <flex> and auto tracks and repeat(). A template outside that set is treated as absent and the grid becomes a single column.
  • flex-shrink parses and is then ignored. Flutter's flex layout never shrinks an item.

← Metadata

0
likes
160
points
39
downloads

Documentation

API reference

Publisher

verified publisherchaosworld.cc

Weekly Downloads

Metadata

A flutter_html extension that lays out CSS flexbox containers, single-axis grid containers and gap.

Repository (GitLab)
View/report issues
Contributing

Topics

#flutter-html #css #html #extension #flexbox

License

MPL-2.0 (license)

Dependencies

flutter, flutter_html, html

More

Packages that depend on flutter_html_css_flex

Back