example/example.md

Example #

flutter_html 3.0.0 parses five border properties: border, border-top, border-right, border-bottom and border-left. It drops the other 39 property names while it parses the inline style, and there is no error and no warning. This extension resolves the longhands and writes the result back as those five shorthands.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="border-width: 2px; border-style: solid;
                          border-color: #0d6efd; padding: 12px; margin: 8px;">
                Two pixels of blue, all round.
              </div>

              <div style="border: 1px solid #adb5bd; border-left-width: 6px;
                          border-left-color: #dc3545; padding: 12px; margin: 8px;">
                A thin grey box with a thick red left side.
              </div>

              <div style="border-block: 2px solid #198754;
                          padding: 12px; margin: 8px;">
                A line above and below, and nothing at the sides.
              </div>
            ''',
            extensions: const [CssBorderHtmlExtension()],
          ),
        ),
      );
}

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

The property reference lists all 39 names and the border-style keyword table.

A border on an inline element #

flutter_html renders a border for a block, inline-block or list-item element only. A <span> becomes a TextSpan, and a TextSpan carries no border. The declarations render nothing, with this extension and without it. There is no error and no warning. Declare display: inline-block on the element:

Html(
  data: '<span style="display: inline-block; border-width: 2px; '
      'border-style: solid; border-color: #6c757d; padding: 4px;">Tag</span>',
  extensions: const [CssBorderHtmlExtension()],
);

An empty <div> renders no border either. The element must have children.