flutter_html_vuetify #

A flutter_html extension that inlines Vuetify utility classes as CSS. flutter_html 3.0.0 carries no utility-class vocabulary, and it parses only 51 CSS properties, so 618 of the 1050 classes this package recognises resolve to CSS nothing can render. Those declarations are suppressed and named at runtime. A Vuetify component tag such as <v-card> renders nothing at all without a TagExtension.

Contents #

• Features
• Getting started
• Usage
• Before you register it
• Limitations
• Additional information

Features #

• Spacing (ma-*, pa-* and the per-side variants) and sizing (w-*, h-*).
• bg-* and text-* colour tokens, passed through as CSS colour values.
• Text alignment and decoration, font-weight-*, display: none and border.
• The 13 typography classes, text-h1 to text-overline, state a rem font-size, which flutter_html drops. Their weight and line height render.
• A declaration flutter_html cannot render is suppressed, and the class is named once per parsed document, as a partial drop where it still renders something. A tag flutter_html cannot render is named the same way.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_vuetify: ^0.2.0

Usage #

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

Html(
  data: '<div class="pa-4 bg-blue text-h5">Vuetify-styled card</div>',
  extensions: const [VuetifyHtmlExtension()],
);

A colour token is passed straight through, so use a hex value or a named colour. A Vuetify Sass theme variable renders nothing.

Both reports go to FlutterError.reportError, once per parsed document, and are never thrown. The class report fires on ordinary Vuetify markup, partial drops included, so a page of typography reports. The tag report fires only when an element vanished.

const VuetifyHtmlExtension(
  reportUnsupportedClasses: false, // the suppressed-declaration report
  reportUnrenderableTags: false,   // the dropped-element report
)

isSupportedClass answers for one class. unsupportedClasses holds the 618 classes that render nothing, and no partial. Both answer for bare flutter_html.

Before you register it #

A Vuetify component tag is not one of the 70 tags flutter_html renders. Without a TagExtension the element and its whole subtree render nothing, whatever its classes resolve to. flutter_html gives no error and no warning. VuetifyHtmlExtension.supportedTags lists v-card and does not make it render.

Html(
  data: '<v-card class="pa-4 bg-blue">Card</v-card>',
  extensions: [
    const VuetifyHtmlExtension(),
    TagExtension.inline(
      tagsToExtend: const {'v-card'}, // without this, nothing renders
      builder: (context) => TextSpan(children: context.inlineSpanChildren),
    ),
  ],
);

Eight companion extensions are recognised. Register one on the same Html widget and this package stops suppressing the CSS it renders: rounded-*, elevation-*, opacity-*, cursor-*, the text-wrapping classes, the flex and gap family, and the typography font-size and letter-spacing. Detection is by class name, so a companion named in pubspec.yaml but absent from extensions changes nothing, and --obfuscate has the same effect. The table is in doc/unsupported-classes.md and in knownCompanionExtensions.

List a companion after this one. Both run at flutter_html's preStyling step in registration order. Listed first, CssBorderRadiusHtmlExtension cannot read the element's border, and a border rounded-lg element gets a square border around a rounded clip. Leave its wrapIfHasAnyClass at the default true, because this extension writes border-radius at that same step.

Html(
  data: '<div class="rounded-lg elevation-2 pa-4 bg-blue">Card</div>',
  extensions: const [
    VuetifyHtmlExtension(),
    CssBorderRadiusHtmlExtension(), // must come after
    CssEffectsHtmlExtension(),      // renders elevation-2
  ],
);

Limitations #

• This is a CSS-only approximation. Vuetify's Material Design components and Vue reactivity are out of scope.
• The typography scale needs flutter_html_css_font_size for its size, resolved against flutter_html's root font size of 14, and flutter_html_css_text_metrics for its letter-spacing. Register both and the scale renders as written.
• text-truncate also resolves to overflow: hidden, which no companion renders. The box is never clipped. text-break needs overflow-wrap and stays unrenderable.
• d-sm-table and its siblings have no renderer in this family. They stay suppressed and stay named.
• A per-side border class emits a width longhand, which flutter_html does not read. Flexbox, gaps, radii, elevation, float, overflow, cursor, opacity and positioning need a companion. Suppression is a bug fix: flutter_html reads any other display keyword as Display.inline, so display: flex would inline a block <div>.
• Only the class attribute is read. <style> blocks and stylesheets are not.

Additional information #

Built on flutter_html_class_to_css.

Issues and merge requests go to the GitLab repository.

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