flutter_html_css_effects #

A flutter_html extension that renders the CSS opacity, box-shadow and visibility properties. flutter_html 3.0.0 parses none of the three. It drops them from an inline style, and there is no error and no warning.

Features #

• opacity wraps the element in an Opacity. A number and a percentage are both accepted. An out-of-range value clamps to 0..1.
• box-shadow wraps the element in a DecoratedBox that carries one BoxShadow per layer.
• A shadow layer takes the two-, three- or four-length form, with its colour before, between or after the lengths.
• Shadow colours accept #hex, rgb(), rgba() and the common keywords. A layer with no colour uses the element's text colour, which is CSS currentColor.
• visibility: hidden and visibility: collapse both keep the layout space, as CSS does outside a table. visibility: collapse on a table row or column removes it. visibility: visible adds no widget.
• A border-radius on the same element shapes the shadow to the rounded corners. Rounding the element itself is flutter_html_css_border_radius's job.
• An element whose final inline style holds none of the three properties gets no widget.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_effects: ^0.2.0

Usage #

Html(
  data: '''
    <div style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); padding: 12px;">
      Raised card
    </div>
  ''',
  extensions: const [CssEffectsHtmlExtension()],
);

Before you register it #

List this extension before every TagExtension. flutter_html prepares an element with the first extension in the list that matches it. A TagExtension matches on the tag name at every step, the preparing step included. List the TagExtension first and it prepares the element itself. This extension never wraps that element, and the shadow, opacity or visibility is dropped. There is no error and no warning.

Html(
  data: '<v-card style="box-shadow: 0 4px 12px #0005;">Card</v-card>',
  extensions: [
    const CssEffectsHtmlExtension(), // must come first
    TagExtension(tagsToExtend: const {'v-card'}, child: const Text('Card')),
  ],
);

Order against a utility-class extension does not matter. This extension reads the inline style at the building step, after every utility class is expanded.

No released flutter_html_bootstrap or flutter_html_vuetify recognises CssEffectsHtmlExtension yet, so both still suppress the classes this extension could render. Write opacity, box-shadow and visibility into an inline style attribute until a release of theirs lists it.

Limitations #

• An inset shadow layer is dropped. Flutter's BoxShadow paints outside the box only. The other layers of the same declaration still render.
• visibility does not re-inherit. A visibility: visible child stays hidden inside a visibility: hidden parent.
• hsl(), hwb(), lab(), oklch(), color() and the rarer colour keywords make a shadow layer invalid.
• A box-shadow length in px is exact and pt multiplies by 4/3. em resolves against the element's own font size; rem against rootFontSize, whose null default is flutter_html's root font size of 14, not the browser's 16.
• flutter_html 3.0.0 drops a font-size written in rem while it parses the inline style, so such an element keeps the inherited size and em here follows it. flutter_html_css_font_size will close this gap.
• calc() and var() make a declaration invalid. This package carries no CSS engine.
• Only the inline style is read. <style> blocks and stylesheets are not.

The full reasoning for each one is on the symbol that implements it, in the API reference.

Additional information #

Issues and merge requests go to the GitLab repository.

CI, publishing and Renovate are described in CONTRIBUTING.md.