flutter_html_bootstrap_css_utilities_extension 0.1.0

A flutter_html extension that adds support for Bootstrap CSS utility classes.

example/example.md

Example

Renders HTML written against Bootstrap 5.3 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_bootstrap_css_utilities_extension/flutter_html_bootstrap_css_utilities_extension.dart';
import 'package:flutter_html_css_border_radius_extension/flutter_html_css_border_radius_extension.dart';

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div class="text-bg-primary p-3 mb-3">Primary, padded, spaced</div>
              <div class="text-bg-success p-2">Success</div>
              <div class="border p-2 mt-3">A bordered box</div>
              <p class="text-center fw-bold fs-3">Centered, bold, larger</p>
              <p class="text-muted fst-italic">Muted italic text</p>

              <!-- Needs the companion extension below to actually round. -->
              <div class="rounded-3 text-bg-danger p-3 mt-3">Rounded card</div>
            ''',
            extensions: const [
              BootstrapUtilitiesHtmlExtension(),
              // 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 Bootstrap utility surface cannot render. Those declarations are suppressed rather than emitted, and you can check any class up front:

BootstrapUtilitiesHtmlExtension.isSupportedClass('mt-3');   // true
BootstrapUtilitiesHtmlExtension.isSupportedClass('d-flex'); // false

// Flag anything in your markup that will not render:
final broken = myClassList.where(
  BootstrapUtilitiesHtmlExtension.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 BootstrapUtilitiesHtmlExtension(reportUnsupportedClasses: false)

Responsive variants

Inline CSS cannot express media queries, so breakpoint variants like mt-md-3 are applied unconditionally by default. To ignore them instead:

const BootstrapUtilitiesHtmlExtension(
  applyResponsiveVariantsUnconditionally: false,
)