Search code examples
fluttermathlatexrenderflutter-html

Flutter : Unable to Render Math Equations Using Flutter_Html and flutter_math_fork Packages

I am trying to build a widget in Flutter that renders HTML content, including math equations. I am using the flutter_html and flutter_math_fork packages for this purpose. While regular HTML content renders correctly, I am unable to render math equations using the <tex> tag extension provided by the flutter_math_fork package.

Issue: I have created a reusable widget called HtmlContent that takes an input text containing HTML content. Within this widget, I am using the HTML widget from the flutter_html package along with a custom tag extension for rendering math equations using the tag. Despite following the documentation and examples, the math equations are not being rendered as expected.

Code Snippet:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_math_fork/flutter_math.dart';

class HtmlContent extends StatelessWidget {
  final String text;
  const HtmlContent({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Html(
      data: text,
      shrinkWrap: true,
      extensions: [
        TagExtension(
            tagsToExtend: {"tex"},
            builder: (extensionContext) {
              return Math.tex(
                extensionContext.innerHtml,
                mathStyle: MathStyle.display,
                textStyle:
                    extensionContext.styledElement?.style.generateTextStyle(),
                onErrorFallback: (FlutterMathException e) {
                  return Text(e.message);
                },
              );
            }),
      ],
    );
  }
}

Expected Behavior: I expect the <tex> tags within the HTML content to be processed by the flutter_math_fork package and render the math equations correctly.

Current Outcome: The HTML content renders properly, but math equations enclosed within <tex> tags are not being rendered, and no error messages are displayed. I passed

HtmlContent(
                      text: r'''<!DOCTYPE html>
<html>
<head>
  <title>Math Equation, Image, and Text</title>
</head>
<body>

<h1>Math Equation, Image, and Text Example</h1>

<!-- Math Equation using LaTeX notation -->
<p>Math Equation: \(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\)</p>

<!-- Image -->
<img src="https://example.com/sample-image.jpg" alt="Sample Image" width="300" height="200">

<!-- Text -->
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat justo at sem venenatis, nec facilisis odio ultricies. 
  Integer vel quam eu ligula posuere scelerisque. Curabitur varius odio non augue ultrices, sit amet vestibulum lectus tincidunt. 
  Suspendisse potenti.
</p>

</body>
</html>
''',
                    ),

Output Image:

enter image description here

Additional Information:

  • I have ensured that I have imported all the necessary packages and dependencies.
  • I have verified that the text variable passed to the HtmlContent widget contains valid HTML with properly formatted <tex> tags. I would greatly appreciate any assistance in resolving this issue and getting the math equations to render correctly within the Flutter app. Thank you in advance for your help!
Solution

  • In your HTML content, you have to use the actual <tex> tag and close it with </tex> instead of \( and \). So the equation part should look like this:

    <p>Math Equation: <tex>x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</tex></p>

    Result Screenshot