netset123
netset123

Reputation: 52

Flutter: Can I put Math equations inside a Text Widget

I'm trying to make a math quiz game and I need to have the non-math text in a custom font while the math equations get displayed normally.

Note: the math equations that i'm trying to display are Extremely Simple

I'm using flutter_math_fork which is a fork of flutter_math, if there is any better alternatives that can do what i want please till me.

So is there a way to do something like that, for example:

Text("${Math.tex("2^{5}")} This is a Normal Text", style: TextStyle(fontFamily:"Custom Font")

Thank you for your time.

Upvotes: 2

Views: 3229

Answers (2)

netset123
netset123

Reputation: 52

I found a Great Package that uses CaTeX its called katex_flutter it does exactly what i want, you just need to surround the math equations with the dollar sign ($) inside a Text Widget and it well automatically separate the normal text from the math equations and render them in CaTeX. this is a simple example:

DefaultTextStyle(
  textAlign: TextAlign.center,
  style: TextStyle(
           fontSize: 20
           ),
 child: KaTeX(
 laTeXCode: Text(
        r"This is a question $x=3^2+3^2$",
   style: TextStyle(
   color: Colors.white,
   fontFamily: "CustomFont-Bold"
            )
         ),
      ),
    )

output:

output

Upvotes: 0

anirudh
anirudh

Reputation: 1466

Take a look at Flutter Tex

It is a Flutter Package to render Mathematics / Maths, Physics and Chemistry, Statistics Equations and expressions based on LaTeX, TeX, and MathML with HTML and JavaScript support.

Here's an example with both Tex & Text together

For following code visit here -

Tex

Upvotes: 4

Related Questions