I’m developing an email client app and have run into an issue where HTML emails won’t render, even though plain text emails display correctly. I am using the flutter_html package to make this work.

Here is my full code -

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/parser.dart' as html_parser;
import '../models/email_model.dart';
import '../utils/date_formatter.dart';

class EmailThreadItem extends StatefulWidget {
  final Email email;
  final bool isLatest;

  const EmailThreadItem({
    super.key,
    required this.email,
    required this.isLatest,
  });

  @override
  State createState() => EmailThreadItemState();
}

class EmailThreadItemState extends State {
  bool _isExpanded = false;

  @override
  void initState() {
    super.initState();
    _isExpanded = widget.isLatest;
  }

  String _sanitizeHtml(String htmlContent) {
    try {
      // Parse and validate HTML
      final document = html_parser.parse(htmlContent);
      return document.outerHtml;
    } catch (e) {
      debugPrint('HTML parsing error: $e');
      return htmlContent;
    }
  }

  @override
  Widget build(BuildContext context) {
    final email = widget.email;

    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header row – tap to expand/collapse
          InkWell(
            onTap: () => setState(() => _isExpanded = !_isExpanded),
            child: Padding(
              padding: const EdgeInsets.all(12),
              child: Row(
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          email.senderName,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text(
                          email.senderEmail,
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        formatDate(email.date),
                        style: const TextStyle(fontSize: 12),
                      ),
                      Icon(_isExpanded ? Icons.expand_less : Icons.expand_more),
                    ],
                  ),
                ],
              ),
            ),
          ),

          // Body
          if (_isExpanded)
            Padding(
              padding: const EdgeInsets.all(8),
              child: email.bodyContentType.toLowerCase() == 'html'
                  ? Html(
                      data: _sanitizeHtml(email.bodyContent),
                      style: {
                        'body': Style(
                          margin: Margins.zero,
                          padding: HtmlPaddings.zero,
                        ),
                      },
                    )
                  : SelectableText(
                      email.bodyContent,
                      style: const TextStyle(fontSize: 14),
                    ),
            ),
        ],
      ),
    );
  }
}