example/example.md

Example #

Renders HTML written against Bootstrap 5.3 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_bootstrap/flutter_html_bootstrap.dart';
import 'package:flutter_html_css_border_radius/flutter_html_css_border_radius.dart';
import 'package:flutter_html_css_effects/flutter_html_css_effects.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="border p-2">A bordered box</div>
              <p class="text-center fw-bold">Centered and bold</p>
              <!-- fs-3 states a rem font size, which flutter_html drops. The
                   class is suppressed and named in the report. -->
              <p class="fs-3">Reported, and rendered at the inherited size</p>
              <div class="rounded-3 shadow text-bg-danger p-3">Card</div>
            ''',
            extensions: const [
              BootstrapUtilitiesHtmlExtension(),
              CssBorderRadiusHtmlExtension(), // renders rounded-3
              CssEffectsHtmlExtension(), // renders shadow
            ],
          ),
        ),
      );
}

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

Seven companion extensions are recognised. This example registers two of them. The other five are flutter_html_css_size_constraints, flutter_html_css_interaction, flutter_html_css_text_overflow, flutter_html_css_flex and flutter_html_css_font_size.

Checking a class before you ship #

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

final dead = myClasses.where(
  BootstrapUtilitiesHtmlExtension.unsupportedClasses.contains,
);

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