example/example.md

Example #

flutter_html 3.0.0 maps 51 CSS properties onto a Style and drops the rest. transform and transform-origin are two of the dropped ones. A tilted card therefore renders square, and a scaled badge renders at its normal size. This extension renders both from the element's inline style.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="transform: rotate(-4deg); background-color: #ffe08a;
                          padding: 12px; margin: 8px;">
                A note pinned at an angle.
              </div>

              <div style="transform: scale(1.2); transform-origin: left center;
                          background-color: #cfe2ff; padding: 12px; margin: 8px;">
                Grown from its left edge.
              </div>

              <div style="transform: translate(-50%, -50%) rotate(45deg);
                          background-color: #d1e7dd; padding: 12px; margin: 8px;">
                Pulled back by half its own size, then turned.
              </div>
            ''',
            extensions: const [CssTransformHtmlExtension()],
          ),
        ),
      );
}

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

Without an Html widget #

CssTransformBox takes a whole CSS transform and applies it to any widget. parseCssTransform reads the declaration out of an inline style string. The box resolves a percentage against its own laid-out size during paint, so the functions may come in any order. Layout is untouched, and the child keeps its untransformed box.

import 'package:flutter/widgets.dart';
import 'package:flutter_html_css_transform/flutter_html_css_transform.dart';

Widget pinAtAnAngle(Widget child) => CssTransformBox(
      transform: parseCssTransform(
        'transform: translate(-50%, -50%) rotate(45deg);',
      ),
      child: child,
    );