flutter_html_css_border_radius #

A flutter_html extension that renders the CSS border-radius properties. flutter_html 3.0.0 parses none of them. It drops them from an inline style, and there is no error and no warning. List it last: it reads border and margin at the preStyling step, after every extension that writes style="".

Features #

• Reads border-radius, the four physical corner properties and the logical corner properties, such as border-top-left-radius and border-start-start-radius. A logical corner is treated as left-to-right.
• Takes the elliptical horizontal / vertical shorthand, such as border-radius: 8px 8px 0 0 / 4px 4px 0 0.
• A % value becomes a radius of 9999 px, so border-radius: 50% gives the usual pill or circle.
• Wraps a matching element in a clipped, rounded container. Re-applies border, border-width and border-color from the same element around the clip, so the border survives.
• Moves margin* outside the clip, so spacing still renders.
• An element with no class and no border-radius* in its final inline style gets no widget.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_border_radius: ^0.2.0

Usage #

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

Html(
  data: '''
    <div style="border-radius: 12px; border: 2px solid #0d6efd; padding: 8px;">
      Rounded box
    </div>
  ''',
  extensions: const [CssBorderRadiusHtmlExtension()],
);

Before you register it #

List this extension after a utility-class extension such as flutter_html_bootstrap or flutter_html_vuetify. Both extract at the preStyling step, which visits extensions in registration order. Listed first, this extension reads a style="" the utility extension has not written to yet. The corners still clip. The border then renders square around the clip, and the margin stays inside it.

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

Leave wrapIfHasAnyClass at its default true. flutter_html prepares the element tree before any extension expands a class into style="". This extension therefore wraps every classed element up front and reads the radius at the building step. Set it to false and a rounded-* class renders no rounding, in either order. There is no error and no warning.

List this extension before every TagExtension. flutter_html prepares an element with the first extension that matches it. A TagExtension matches on the tag name at every step, the preparing step included. List the TagExtension first and it prepares the element itself. This extension never wraps it, and the corners stay square. There is no error and no warning.

Released flutter_html_bootstrap 0.1.1 and flutter_html_vuetify 0.1.0 recognise CssBorderRadiusHtmlExtension. Both stop suppressing border-radius once it is registered.

Limitations #

• Only the inline style is read. <style> blocks and stylesheets are not.
• A rounded element still needs a renderer for its tag. flutter_html 3.0.0 renders nothing for a tag no extension claims, such as <v-card>. Give it a TagExtension. There is no error and no warning.
• px is exact and pt multiplies by 4/3. em resolves against the element's own font size; rem against rootFontSize, whose null default is flutter_html's root font size of 14, not the browser's 16. So border-radius: 0.5rem is 7 px here, while flutter_html_css_border renders border: 0.5rem as 0.5 px.
• thin, medium and thick are 1, 3 and 5 here, the browser values. flutter_html paints 2, 4 and 6.
• flutter_html 3.0.0 drops a font-size written in rem at parse time, so em on that element follows the inherited size. flutter_html_css_font_size will close this gap.
• calc() and var() make a length invalid. This package carries no CSS engine.

Additional information #

Issues and merge requests go to the GitLab repository.

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