example/example.md

Example #

A runnable app. Nesting is the case the README does not show: a percentage resolves against its own parent, so 50% inside 75% is 37.5% of the page.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="width: 50%">Half the width of the page.</div>

              <div style="width: 75%">
                <div style="width: 50%">37.5% of the page.</div>
              </div>

              <img src="https://example.com/photo.jpg" style="width: 50%">

              <div style="padding: 5%; margin: 0 5%">Padding and margin resolve against the width.</div>
            ''',
            extensions: const [CssPercentSizeHtmlExtension()],
          ),
        ),
      );
}

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

The image keeps its aspect ratio. The pixel width goes into Style.width, the built-in image renderer passes that value to Image.width, and an Image with a width and no height sizes the other axis from the source.

The last block takes 5% of the page width on every side, the vertical ones included, which is what CSS does with a percentage padding or margin.

The README carries the registration order against the companion extensions, the resolvePercentages flag an IntrinsicHeight needs, and what this package does not do. The measured order matrix is in doc/composition.md.