example/example.md

Example #

flutter_html 3.0.0 drops the background shorthand and renders only the background-color longhand. <div style="background: #eef"> has no background. This extension rewrites the shorthand into the longhand at the preStyling step, before flutter_html parses the inline style, and keeps the colour token as the author wrote it.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_background/flutter_html_css_background.dart';

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="background: #eef; padding: 8px">
                A card with a hex background
              </div>

              <div style="background: rgba(255, 200, 0, 0.4); padding: 8px">
                A translucent card
              </div>

              <p style="background: url(paper.png) #fffbe6 no-repeat center / cover">
                The colour renders. The image, position and size are dropped.
              </p>

              <p style="background-color: red; background: none">
                No background: the later shorthand resets the earlier colour.
              </p>
            ''',
            extensions: const [CssBackgroundHtmlExtension()],
          ),
        ),
      );
}

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

What it corrects #

• background: <colour> with a hex, a named colour, rgb(), rgba(), hsl() or hsla(), in any letter case, with or without !important.
• The colour of a shorthand that also states an image, a position, a size, a repeat, an attachment, an origin or a clip. Those components are dropped, because flutter_html renders none of them.
• The colour of the last layer of a multi-layer background.
• background: none, which resets an earlier inline background-color.

Pairing with other extensions #

Order matters twice. The stylesheet package must come before this one, the colour package after it:

Html(
  data: '''
    <style>.card { background: hsl(210 40% 96%) }</style>
    <div class="card">A card from a stylesheet, in a syntax flutter_html reads as black</div>
  ''',
  extensions: const [
    CssStylesheetHtmlExtension(), // must come first
    CssBackgroundHtmlExtension(),
    CssColorHtmlExtension(), // must come last
  ],
);

The stylesheet package writes the rule into the inline style at the same preStyling step; listed after this extension, the background it writes is never rewritten. The colour package rewrites the token in background-color and has no case for background; listed before this extension, it never sees the token. Both are measured against the released packages, and the measurement table records the numbers.