flutter_html_bootstrap #

A flutter_html extension that inlines Bootstrap 5.3 utility classes as CSS. flutter_html 3.0.0 carries no utility-class vocabulary, and it parses only 51 CSS properties. About 40% of the Bootstrap utility surface resolves to something it cannot render. This package suppresses those declarations and names them at runtime.

Contents #

• Features
• Getting started
• Usage
• Before you register it
• Limitations
• Additional information

Features #

• Spacing (m-*, p-*), sizing (w-*, h-*) and vertical alignment.
• Background and text colours, the theme, subtle and gray tokens, and text-bg-*.
• Text alignment, transform and decoration, and the link utilities.
• Typography: fw-*, fst-*, lh-* and font-monospace. fs-1 to fs-6 emit a rem font size, which flutter_html drops, so they are suppressed.
• d-none, d-block and d-inline*, and the border and border-<side> shorthands.
• A responsive variant such as mt-md-3 applies unconditionally, because inline CSS cannot express a media query. Pass applyResponsiveVariantsUnconditionally: false to ignore those classes.
• A declaration flutter_html cannot render is suppressed, and the class is named once per parsed document.
• A tag flutter_html cannot render is named the same way.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_bootstrap: ^0.2.0

Usage #

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_bootstrap/flutter_html_bootstrap.dart';

Html(
  data: '''
    <div class="text-bg-primary p-3">Primary</div>
    <div class="text-bg-success p-3 mt-3">Success</div>
  ''',
  extensions: const [BootstrapUtilitiesHtmlExtension()],
);

Both reports go to FlutterError.reportError, once per parsed document. They are reported, never thrown, so the document keeps rendering. The class report fires on ordinary markup. The tag report fires only when an element vanished.

const BootstrapUtilitiesHtmlExtension(
  reportUnsupportedClasses: false, // the suppressed-declaration report
  reportUnrenderableTags: false,   // the dropped-element report
)

isSupportedClass answers for one class. unsupportedClasses holds the 653 classes that render nothing. Both answer for bare flutter_html.

Before you register it #

Nine companion extensions are recognised. Register one on the same Html widget and this package stops suppressing the CSS it renders: rounded-*, the opacity, shadow and visibility utilities, mw-100 and mh-100, pe-* and user-select-*, the wrapping utilities, the flex and grid family, fs-1 to fs-6, object-fit-*, and translate-middle*. Detection is by class name, so a companion named in pubspec.yaml but absent from extensions changes nothing. Which package covers which is in doc/unsupported-classes.md and in kKnownCssCompanions.

List a companion after this one. Both run at flutter_html's preStyling step in registration order. Listed first, CssBorderRadiusHtmlExtension cannot read the element's border and margin, and a border rounded-3 element gets a square border around a rounded clip. Leave its wrapIfHasAnyClass at the default true, because this extension writes border-radius at that same step.

Html(
  data: '<div class="rounded-3 border text-bg-primary">Card</div>',
  extensions: const [
    BootstrapUtilitiesHtmlExtension(),
    CssBorderRadiusHtmlExtension(), // must come after
  ],
);

A tag outside flutter_html's 70 built-in tags needs a TagExtension, listed after this extension. Without one the element and its whole subtree render nothing, whatever its classes resolve to. There is no error and no warning.

Html(
  data: '<v-card class="p-3">Card</v-card>',
  extensions: [
    const BootstrapUtilitiesHtmlExtension(),
    TagExtension.inline(
      tagsToExtend: const {'v-card'}, // without this, nothing renders
      builder: (context) => TextSpan(children: context.inlineSpanChildren),
    ),
  ],
);

Limitations #

• This is a light-mode approximation of Bootstrap 5.3's default theme.
• :hover and :focus states have no inline-CSS equivalent. They are never emitted.
• bg-opacity-50 and its friends modulate a colour a preceding class set. Each is listed as unsupported alone, and renders after bg-primary.
• text-truncate also needs overflow: hidden, which no companion renders. It stays named in the report for that one declaration.
• d-table, d-table-row and d-table-cell have no renderer in this family. They stay suppressed and stay named.
• position-*, top-*/bottom-*/start-*/end-* and z-* have no renderer in this family. translate-middle* does, so position-absolute translate-middle is still named for its position alone.
• Flexbox and grid, overflow, float, object-fit, shadows, opacity, visibility and the border longhands need a companion. Suppression is a bug fix: flutter_html reads a display keyword outside its five as Display.inline, so display: flex would inline a block <div>. The full category table is in doc/unsupported-classes.md.

Additional information #

Built on flutter_html_class_to_css.

Issues and merge requests go to the GitLab repository.

CI, publishing and Renovate are described in CONTRIBUTING.md.