example/example.md

Example #

This package is the plumbing under the class-to-CSS extensions in this family. It carries no utility-class vocabulary of its own. You write a resolver that maps class names to inline CSS, and you expose it as an extension.

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

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

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

class HighlightExtension extends ClassToInlineCssExtension {
  const HighlightExtension();

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <p>Plain text, untouched.</p>
              <p class="highlight">Highlighted.</p>
              <p class="highlight" style="padding: 8px;">Padded and highlighted.</p>
            ''',
            extensions: const [HighlightExtension()],
          ),
        ),
      );
}

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

Two resolvers on one element #

resolvers is a list. Every resolver that matches the element contributes its declarations, in list order. The later resolver wins where two resolvers write the same property.

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

  @override
  String resolve(List<String> orderedClasses) => 'color: #6c757d';
}

class CardExtension extends ClassToInlineCssExtension {
  const CardExtension();

  @override
  List<ClassListCssResolver> get resolvers => [
        HighlightResolver(),
        MutedResolver(), // on class="highlight muted", color: #6c757d wins
      ];
}