flutter_html_class_to_css_converter_extension 0.1.0

A flutter_html extension that converts class attributes to inline CSS styles.

flutter_html_class_to_css_converter_extension

A small framework for flutter_html extensions that translate an element's class="..." attribute into inline CSS, so utility-class-based markup (Bootstrap, Vuetify, Tailwind-style frameworks, ...) renders correctly without flutter_html needing to understand the class names itself.

This package ships no class mappings of its own. It provides the plumbing that other extensions (such as flutter_html_bootstrap_css_utilities_extension and flutter_html_vuetify_extension) build on.

Features

• Runs during flutter_html's preStyling step and merges resolved CSS into the element's style="" attribute, so the result flows through flutter_html's normal style pipeline.
• ClassListCssResolver: a simple interface (matches / resolve) for mapping an ordered list of CSS classes to inline CSS declarations.
• ClassToInlineCssExtension: an HtmlExtension base class that wires one or more resolvers together, merges their output with any pre-existing inline style, and is a no-op for elements with no matching classes.

Getting started

Add the package to your pubspec.yaml alongside flutter_html:

dependencies:
  flutter_html: ^3.0.0
  flutter_html_class_to_css_converter_extension: ^0.1.0

Usage

Implement a resolver for the class names you care about, then extend ClassToInlineCssExtension to expose it as an HtmlExtension:

class MyResolver implements ClassListCssResolver {
  @override
  bool matches(List<String> orderedClasses) => orderedClasses.contains('highlight');

  @override
  String resolve(List<String> orderedClasses) => 'background-color: yellow;';
}

class MyExtension extends ClassToInlineCssExtension {
  const MyExtension();

  @override
  List<ClassListCssResolver> get resolvers => [MyResolver()];
}

Html(
  data: '<div class="highlight">Highlighted</div>',
  extensions: const [MyExtension()],
);

Additional information

File issues and contributions on the package's GitLab repository. This package targets flutter_html 3.x's extension API (preStyling step); pin the flutter_html version if you rely on this behavior across major upgrades.