example/example.md

Example #

flutter_html 3.0.0 hardcodes BoxFit.fill in all three of its image renderers. No parameter and no Style field reaches it. A photo in a box of another shape therefore renders stretched. This extension renders object-fit and object-position from the <img> element's inline style.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <!-- both a width and a height, or there is no box to fit -->
              <img src="https://example.com/photo.jpg"
                   width="240" height="80"
                   style="object-fit: cover;">

              <img src="https://example.com/photo.jpg"
                   width="240" height="80"
                   style="object-fit: contain;">

              <img src="https://example.com/photo.jpg"
                   width="240" height="80"
                   style="object-fit: cover; object-position: 50% 20%;">
            ''',
            extensions: const [CssObjectFitHtmlExtension()],
          ),
        ),
      );
}

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

The first image crops the photo to a wide strip. The second fits the whole photo inside the strip. The third crops it again, and takes the strip from nearer the top of the photo instead of from its middle.