flutter_html_css_transform #

A flutter_html extension that renders the CSS transform and transform-origin properties. flutter_html 3.0.0 parses neither. It drops both from an inline style, and there is no error and no warning.

Features #

• transform wraps the element in a CssTransformBox that applies the matrix at paint time. transform-origin is the point that matrix turns and scales around.
• The functions are translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skew(), skewX(), skewY() and matrix(). A list of them composes left to right, so translate(-50%, -50%) rotate(45deg) is one matrix.
• A percentage resolves against the element's own box during paint, as CSS does.
• A transform changes paint only. The element keeps its untransformed box.
• Hit tests follow the paint, so a rotated link is tapped where it appears. Pass transformHitTests: false to keep tap targets on the untransformed box.
• An element with no transform, or one that composes to an identity such as none, gets no widget.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_transform: ^0.2.0

Usage #

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_transform/flutter_html_css_transform.dart';

Html(
  data: '''
    <div style="transform: rotate(-4deg); background-color: #ffe08a;
                padding: 12px;">
      A note pinned at an angle
    </div>
  ''',
  extensions: const [CssTransformHtmlExtension()],
);

CssTransformBox is exported for use without an Html widget.

Before you register it #

List this extension before every TagExtension. flutter_html prepares an element with the first extension 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 it, and the transform is dropped. There is no error and no warning.

Html(
  data: '<v-card style="transform: scale(1.1);">Card</v-card>',
  extensions: [
    const CssTransformHtmlExtension(), // must come first
    TagExtension(tagsToExtend: const {'v-card'}, child: const Text('Card')),
  ],
);

List flutter_html_css_border_radius last. It extracts border and margin at the preStyling step and needs the final style by then. The transform lands outside its rounded clip in either order, which is measured.

Order against a utility-class extension does not matter at the default wrapIfHasAnyClass: true. Set it to false and an element that carries its transform in a class alone gets no wrapper, in either order. The transform is dropped, with no error and no warning.

Released flutter_html_bootstrap 0.1.1 and flutter_html_vuetify 0.1.0 do not recognise CssTransformHtmlExtension. Both still suppress the classes this extension could render, and report them through FlutterError. Write transform into an inline style attribute until a release of theirs lists it. Bootstrap's translate-middle classes centre nothing here even then. The composition notes say why.

Limitations #

• Every 3D function is invalid, perspective() and matrix3d() included. One invalid function voids the whole declaration, as in CSS.
• calc(), var() and the viewport units make a declaration invalid. This package carries no CSS engine.
• px and a percentage are exact. 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 at parse time, so em on that element follows the inherited size. flutter_html_css_font_size will close this gap.
• A tap does not reach content that paints outside an ancestor's box. The element still paints there. Only the tap target is gone.
• flutter_html 3.0.0 renders nothing for a tag no extension claims. Give it a TagExtension. There is no error and no warning.
• Only the inline style is read. <style> blocks and stylesheets are not.

Additional information #

Issues and merge requests go to the GitLab repository.

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