example/example.md

Example #

flutter_html 3.0.0 maps 51 CSS properties onto a Style and drops the rest. opacity, box-shadow and visibility are three of the dropped ones. A faded element therefore renders solid, and a hidden one renders in plain sight. This extension renders all three from the element's inline style.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="opacity: 0.5; background-color: #0d6efd;
                          color: #ffffff; padding: 12px; margin: 8px;">
                Half transparent.
              </div>

              <div style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                          background-color: #ffffff; padding: 12px; margin: 8px;">
                A raised card.
              </div>

              <div style="visibility: hidden; padding: 12px; margin: 8px;">
                Invisible, and still taking up its space.
              </div>
            ''',
            extensions: const [CssEffectsHtmlExtension()],
          ),
        ),
      );
}

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

Rounded corners under the shadow #

flutter_html_css_border_radius rounds and clips the element. This extension reads the same border-radius, and shapes the shadow to those corners. Register both, in either order. The shadow renders outside the clip, so it stays visible.

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

Html(
  data: '''
    <div style="border-radius: 12px; padding: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">
      A rounded, raised card.
    </div>
  ''',
  extensions: const [
    CssEffectsHtmlExtension(),
    CssBorderRadiusHtmlExtension(),
  ],
);