example/example.md

Example #

flutter_html 3.0.0 maps 51 CSS properties onto a Style and drops the rest. Every border-radius property is in the dropped set, so rounded corners render square. This extension renders them from the element's inline style. The element's border and margin survive the rounded clip.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="border-radius: 12px; background-color: #0d6efd;
                          color: #ffffff; padding: 12px; margin: 8px;">
                A rounded, padded box.
              </div>

              <div style="border-radius: 16px; border: 2px solid #dc3545;
                          padding: 12px; margin: 8px;">
                The border follows the corners, and the margin stays outside.
              </div>

              <div style="border-top-left-radius: 24px;
                          border-bottom-right-radius: 24px;
                          background-color: #198754; color: #ffffff;
                          padding: 12px; margin: 8px;">
                Two corners rounded, two left square.
              </div>

              <div style="border-radius: 50%; background-color: #6f42c1;
                          color: #ffffff; padding: 12px; margin: 8px;">
                A percentage gives the usual pill.
              </div>
            ''',
            extensions: const [CssBorderRadiusHtmlExtension()],
          ),
        ),
      );
}

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