example/example.md

Example #

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

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_border_radius/flutter_html_css_border_radius.dart';
import 'package:flutter_html_vuetify/flutter_html_vuetify.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 weight.</p>
              <p class="text-center font-weight-bold">Centered and bold</p>
              <div class="border pa-3 mt-3">A bordered box</div>
              <div class="rounded-lg bg-blue pa-4 mt-3">Rounded card</div>
            ''',
            extensions: const [
              VuetifyHtmlExtension(),
              CssBorderRadiusHtmlExtension(), // renders rounded-lg
            ],
          ),
        ),
      );
}

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

A colour token becomes a CSS colour value as written, so bg-red and bg-blue work and a Sass theme variable renders nothing.

Checking a class before you ship #

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

final dead = myClasses.where(VuetifyHtmlExtension.unsupportedClasses.contains);

Both answers describe bare flutter_html, and count no companion. A companion you register makes some of these classes render at runtime. elevation-4 is one of them.

A typography class is a third case. isSupportedClass('text-h4') is true and unsupportedClasses never holds it, because its weight and its line height render. Its rem font size is still suppressed, and the runtime report names the class as a partial drop.