example/example.md

Example #

flutter_html 3.0.0 parses none of pointer-events, user-select and cursor. It drops all three from an inline style, and there is no error and no warning. This extension wraps the built element in an IgnorePointer, a MouseRegion or a SelectionContainer.disabled.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SelectionArea(
            child: Html(
              data: '''
                <div style="cursor: pointer; padding: 12px;">
                  Hovering this renders the hand cursor.
                </div>

                <div style="user-select: none; padding: 12px;">
                  Dragging across this selects nothing.
                </div>

                <div style="pointer-events: none; padding: 12px;">
                  <a href="https://example.com">This link cannot be tapped.</a>
                </div>
              ''',
              extensions: const [CssInteractionHtmlExtension()],
            ),
          ),
        ),
      );
}

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

user-select needs a SelectionArea or a SelectableRegion above the Html widget, which is why the example has one.

A cursor keyword of your own #

extraCursors merges over the 35 keywords the extension maps. It adds a keyword, or it replaces one that is already there. Legacy markup often carries the non-standard cursor: hand:

Html(
  data: '<div style="cursor: hand;">Old markup</div>',
  extensions: const [
    CssInteractionHtmlExtension(
      extraCursors: {'hand': SystemMouseCursors.click},
    ),
  ],
);

Without that entry the keyword renders nothing, and there is no error and no warning.