flutter_html_vuetify_extension 0.1.0

A flutter_html extension that inlines Vuetify utility classes as inline CSS.

example/example.md

Example

Renders HTML written against Vuetify utility classes by inlining them as CSS flutter_html understands.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_border_radius_extension/flutter_html_css_border_radius_extension.dart';
import 'package:flutter_html_vuetify_extension/flutter_html_vuetify_extension.dart';

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div class="bg-red pa-4 ma-2">Red background, padded, spaced</div>
              <div class="text-h4">A heading</div>
              <p class="text-body-1">Body copy at Vuetify's body-1 scale.</p>
              <p class="text-center font-weight-bold">Centered and bold</p>
              <div class="border pa-3 mt-3">A bordered box</div>

              <!-- Needs the companion extension below to actually round. -->
              <div class="rounded-lg bg-blue pa-4 mt-3">Rounded card</div>
            ''',
            extensions: const [
              VuetifyHtmlExtension(),
              // Renders `rounded-*`; without it those classes are suppressed
              // and named in the runtime report.
              CssBorderRadiusHtmlExtension(),
            ],
          ),
        ),
      );
}

void main() => runApp(const ExampleApp());

Checking what will actually render

flutter_html understands 51 CSS properties, so a substantial part of the Vuetify utility surface cannot render: elevation, flex and gap, positioning, overflow and cursor among them. Those declarations are suppressed rather than emitted, and you can check any class up front:

VuetifyHtmlExtension.isSupportedClass('pa-4');       // true
VuetifyHtmlExtension.isSupportedClass('elevation-4'); // false

// Flag anything in your markup that will not render:
final broken = myClassList.where(
  VuetifyHtmlExtension.unsupportedClasses.contains,
);

At runtime, unsupported classes are reported once per document through FlutterError.reportError, so they appear in the debug console and in crash reporters hooked to FlutterError.onError. Nothing is ever thrown. Silence it with:

const VuetifyHtmlExtension(reportUnsupportedClasses: false)

Non-standard Vuetify tags

The extension registers v-card, v-btn, v-icon, v-col, v-row and v-container alongside div, so utility classes on those elements are picked up rather than the elements being discarded:

Html(
  data: '<v-card class="pa-4 bg-grey">Card content</v-card>',
  extensions: const [VuetifyHtmlExtension()],
);