example/example.md

Example #

flutter_html 3.0.0 renders nothing for an <img> whose src the built-in image renderer declines, such as an SVG. The element becomes an EmptyContentElement, and WhitespaceProcessing deletes it before the building step. The alt text goes with it. This extension renders that text instead.

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '<p>Revenue '
                '<img src="https://example.com/chart.svg" alt="up 4%">'
                ' so far.</p>',
            extensions: const [ImgAltHtmlExtension()],
          ),
        ),
      );
}

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

That paragraph renders Revenue up 4% so far. Without the extension it renders Revenue so far.

Narrowing what it matches #

Every argument mirrors the ImageBuiltIn field of the same name, and every default is the built-in's own default. Narrow an argument here only where you narrow the same argument on the image renderer you register. The two agree on which sources render as a picture.

Html(
  data: '<img src="https://cdn.example.com/a.png" alt="Sales, 2026">',
  extensions: const [
    ImgAltHtmlExtension(networkDomains: {'example.com'}),
  ],
);

cdn.example.com is outside that list, so this extension accepts the <img> and renders Sales, 2026. flutter_html asks the registered extensions before its own built-ins, so an argument you narrow here alone turns a picture the built-in renderer still renders into text.