flutter_html_vuetify_extension

A flutter_html extension that inlines Vuetify utility classes as CSS, so HTML authored against Vuetify markup renders sensibly in flutter_html.

Features

Renders, as inline CSS flutter_html understands:

  • Spacing (ma-*, pa-*, and the per-side variants)
  • Sizing (w-*, h-*)
  • bg-* / text-* color tokens, passed through as CSS color values
  • Typography (text-h1..text-h6, text-body-*, text-caption, font-weight-*, ...)
  • Text alignment and decoration
  • The border and border-<side> shorthands
  • display: none

Recognized, but deliberately dropped because flutter_html cannot render them (see Classes flutter_html cannot render): flexbox and the rest of d-*, ga-* gaps, rounded-* radii (restored by a companion extension), the border longhands, elevation-*, float, overflow and wrapping, cursor, opacity, and positioning.

Getting started

dependencies:
  flutter_html: ^3.0.0
  flutter_html_vuetify_extension: ^0.1.0

Usage

Html(
  data: '''
    <div class="rounded-lg elevation-2 pa-4 bg-primary">
      Vuetify-styled card
    </div>
  ''',
  extensions: const [VuetifyHtmlExtension()],
);

bg-*/text-* tokens are passed straight through as CSS background-color/color values, so use CSS-parseable tokens (hex, named colors) rather than Vuetify's Sass theme variable names.

For rounded-* corners to actually clip content (not just appear in the generated inline style), also install flutter_html_css_border_radius_extension and list it after this extension.

Classes flutter_html cannot render

flutter_html 3.0.0 consumes only 51 CSS properties. This package can emit 61, so roughly 59% of the Vuetify classes it recognizes (618 of 1050) resolve to CSS nothing can render. Those declarations are not inlined: emitting them ranges from harmless to actively wrong. display: flex is the clearest case, because flutter_html maps every display value it does not know to Display.inline and so would turn a block <div> inline. Dropping them leaves each element at its natural layout.

Unsupported, by category:

Category Classes Why
Flex & layout (d-flex, flex-*, justify-*, align-*, align-content-*, order-*, d-*-table*) 317 flutter_html lays out inline/block only
Gap (ga-*) 85 no gap
Radii (rounded-*) 72 no border-radius; fixed by the companion package
Border longhands (border-thin, border-t-*, border-dashed, border-opacity-*, ...) 44 only the border / border-<side> shorthands are read
Elevation (elevation-0..elevation-24) 25 no box-shadow
Float (float-*) 25 no float
Overflow & wrapping (overflow-*, text-truncate, text-no-wrap, text-pre-wrap, text-break) 18 no overflow, text-overflow, white-space
Cursor (cursor-*) 12 no cursor
Opacity (opacity-*) 11 no opacity
Positioning (position-*, top-0, right-0, bottom-0, left-0) 9 no out-of-flow layout

Spacing, sizing, colors, typography, text alignment, text decoration and display: none render normally.

Introspecting it

VuetifyHtmlExtension.isSupportedClass('pa-4');       // true
VuetifyHtmlExtension.isSupportedClass('elevation-2'); // false
VuetifyHtmlExtension.unsupportedClasses;             // the full set, derived from the class table

// Audit your own markup:
final dead = myClasses.where(VuetifyHtmlExtension.unsupportedClasses.contains);

Both answer for bare flutter_html. Companion extensions extend coverage at runtime: register CssBorderRadiusHtmlExtension and every rounded-* class renders, stops being dropped, and stops being reported. Known companions and the properties they contribute are listed in VuetifyHtmlExtension.knownCompanionExtensions; a future adapter is one more entry there.

Reporting

Once per parsed document that uses such classes, the extension hands an UnsupportedVuetifyClassesException to FlutterError.reportError. It lists every offending class and dropped property, plus the companion package to install where one exists. It is reported, never thrown: it appears in the debug console and in whatever hooks FlutterError.onError (Sentry, Crashlytics), and the document keeps rendering. One aggregated report per document, not one per class.

Html(
  data: html,
  // Suppression still happens; only the diagnostics go quiet.
  extensions: const [VuetifyHtmlExtension(reportUnsupportedClasses: false)],
);

Additional information

This is a CSS-only approximation of Vuetify's utility classes; it does not replicate Vuetify's Material Design components or Vue reactivity. File issues and contributions on the package's GitLab repository.

Libraries

flutter_html_vuetify_extension