Question 261569 in Html Question posted in
Some basic documentation can be found here.

How Can I show Html Math in flutter

Here is my Html Text

<p>hello</p>
    <div class="mathjax-equation">
        (x = frac{-b pm sqrt{b^2 - 4ac}}{2a})
    </div>

I want to show this math view on flutter mobile screen without Webview package. How can I?

Tags:

2

Answers


  1. 0

    Check this package flutter_tex
    I also suggest that you use this article in the medium that the creator of the package wrote, it also includes the video article

    and this is another package for doing this flutter_math_fork

    Check it all, I hope it helps

    Login or Signup to reply.
  2. 0

    you can use math_tex_package for displaying the mathematical equations given that you will reformat how you write the formulas

    TeXView(
    child: TeXViewColumn(children: [
      TeXViewInkWell(
        id: "id_0",
        child: TeXViewColumn(children: [
          TeXViewDocument(r"""<h2>Flutter ( rm\TeX )</h2>""",
              style: TeXViewStyle(textAlign: TeXViewTextAlign.Center)),
          TeXViewContainer(
            child: TeXViewImage.network(
                'https://raw.githubusercontent.com/shah-xad/flutter_tex/master/example/assets/flutter_tex_banner.png'),
            style: TeXViewStyle(
              margin: TeXViewMargin.all(10),
              borderRadius: TeXViewBorderRadius.all(20),
            ),
          ),
          TeXViewDocument(r"""<p>                                
                       When (a ne 0 ), there are two solutions to (ax^2 + bx + c = 0) and they are
                       $$x = {-b pm sqrt{b^2-4ac} over 2a}.$$</p>""",
              style: TeXViewStyle.fromCSS(
                  'padding: 15px; color: white; background: green'))
        ]),
      )
    ]),
    style: TeXViewStyle(
      elevation: 10,
      borderRadius: TeXViewBorderRadius.all(25),
      border: TeXViewBorder.all(TeXViewBorderDecoration(
          borderColor: Colors.blue,
          borderStyle: TeXViewBorderStyle.solid,
          borderWidth: 5)),
      backgroundColor: Colors.white,
    ),
   ),
  )

    and i you need html still, you can use flutter_html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search