flutter_tex 3.6.1+1
flutter_tex: ^3.6.1+1 copied to clipboard
A Flutter Package to render Mathematics / Maths, Physics and Chemistry, Statistics / Stats Equations based on LaTeX with full HTML and JavaScript support.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';
main() async {
runApp(FlutterTeXExample());
}
TeXViewContainer _customTeXViewChild(String id, String title, String body) {
return TeXViewContainer(
id: id,
style: TeXViewStyle(
margin: TeXViewMargin.all(10),
borderRadius: TeXViewBorderRadius.all(25),
backgroundColor: Colors.green,
contentColor: Colors.white,
),
children: [
TeXViewTeX(title,
style: TeXViewStyle(
padding: TeXViewPadding.only(top: 5, bottom: 5),
textAlign: TeXViewTextAlign.Center,
backgroundColor: Colors.red,
contentColor: Colors.white,
)),
TeXViewTeX(body,
style: TeXViewStyle.fromCSS(
"color:white;background-color:light-green;padding:10px"))
]);
}
class FlutterTeXExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage(),
);
}
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Flutter TeX (Demo)"),
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20),
child: Image.asset(
"assets/flutter_tex_banner.png",
fit: BoxFit.contain,
height: 200,
),
),
Divider(
height: 30,
color: Colors.transparent,
),
getRenderEngineButton(
context,
"Katex",
'assets/katex.png',
"RenderingEngine for Fast Rendering",
TeXViewRenderingEngine.katex(configurations: r"""
{
displayMode: true,
macros: {
"\\RR": "\\mathbb{R}"
}
}
"""), [
TeXExamples.introduction,
TeXExamples.quadraticEquation,
TeXExamples.relationEnergyPrincipalQuantum,
TeXExamples.bohrRadius,
TeXExamples.chemistryEquations,
TeXExamples.matrix,
]),
getRenderEngineButton(
context,
"MathJax",
'assets/mathjax.png',
"RenderingEngine for Quality Rendering",
TeXViewRenderingEngine.mathjax(), [
TeXExamples.introduction,
TeXExamples.quadraticEquation,
TeXExamples.relationEnergyPrincipalQuantum,
TeXExamples.alignTag,
TeXExamples.bohrRadius,
TeXExamples.chemistryEquations,
TeXExamples.matrix,
TeXExamples.others,
]),
],
),
);
}
getRenderEngineButton(
BuildContext context,
String label,
String asset,
String text,
TeXViewRenderingEngine renderingEngine,
List<TeXViewContainer> teXViewChildren) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: RaisedButton(
elevation: 7.5,
color: Colors.white,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TeXViewPage(
label: label,
teXViewChildren: teXViewChildren,
renderingEngine: renderingEngine,
)));
},
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Ink.image(
image: AssetImage(asset),
height: 75,
fit: BoxFit.contain,
),
Divider(
height: 5,
color: Colors.transparent,
),
Text(
text,
style: TextStyle(fontSize: 15),
),
],
),
),
),
);
}
}
class TestExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
children: [
TeXViewContainer(id: "container_0", children: [
TeXViewTeX(
r"<h3>Quadratic Equation</h3>",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.Center,
backgroundColor: Colors.red,
contentColor: Colors.white,
),
id: "tex_0",
),
TeXViewTeX(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(
"color:white;background-color:green;padding:20px"),
id: "tex_1"),
])
],
style: TeXViewStyle(
margin: TeXViewMargin.all(20),
elevation: 10,
borderRadius: TeXViewBorderRadius.all(20),
border: TeXViewBorder.all(
TeXViewBorderDecoration(
borderColor: Colors.blue,
borderStyle: TeXViewBorderStyle.Solid,
borderWidth: 5),
),
backgroundColor: Colors.white,
),
loadingWidget: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Text("Rendering with ")
],
),
),
onTap: (childID) {
print("TeXView $childID is tapped.");
}),
),
);
}
}
class TeXExamples {
static TeXViewContainer introduction = TeXViewContainer(
style: TeXViewStyle(
margin: TeXViewMargin.all(10),
padding: TeXViewPadding.all(10),
borderRadius: TeXViewBorderRadius.all(10),
border: TeXViewBorder.all(TeXViewBorderDecoration(
borderWidth: 10,
borderStyle: TeXViewBorderStyle.Solid,
borderColor: Colors.green))),
children: [
TeXViewTeX(r"""<h2>Flutter \( \rm\\TeX \)</h2>""",
style: TeXViewStyle(
borderRadius: TeXViewBorderRadius.only(
bottomRight: 20, bottomLeft: 20, topLeft: 10, topRight: 10),
textAlign: TeXViewTextAlign.Center,
width: 200,
margin: TeXViewMargin.zeroAuto(),
backgroundColor: Colors.green),
id: "title_0"),
TeXViewTeX(r"""
<p>Flutter \( \rm\\TeX \) is a Flutter Package to render so many types of equations based on \( \rm\\LaTeX \), It also includes full HTML with JavaScript
support.</p>
""", id: "body_0")
]);
static TeXViewContainer quadraticEquation =
_customTeXViewChild("child_1", r"<h3>Quadratic Equation</h3>", r"""
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}.$$<br>""");
static TeXViewContainer bohrRadius = _customTeXViewChild(
"child_2",
r"<h3>Bohr's Radius</h3>",
r"""\( a_0 = \frac{{\hbar ^2 }}{{m_e ke^2 }} \)""");
static TeXViewContainer relationEnergyPrincipalQuantum = _customTeXViewChild(
"child_3",
r"<h3>Relationship between Energy and Principal Quantum Number</h3>",
r"""\( E_n = - R_H \left( {\frac{1}{{n^2 }}} \right) = \frac{{ - 2.178 \times 10^{ - 18} }}{{n^2 }}joule \)""");
static TeXViewContainer chemistryEquations = _customTeXViewChild(
"child_4", r"<h3>Chemistry Equations</h3>", r"""<p>
\( \ce{CO2 + C -> 2 CO} \) <br>
\( \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} \) <br>
Scroll long formulas in Katex $$ \ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O} $$ <br>
</p>""");
static TeXViewContainer matrix =
_customTeXViewChild("child_5", r"<h3>Matrix</h3>", r""" <p>
$$ \begin{bmatrix}
a & b \\
c & d
\end{bmatrix}$$</p>""");
static TeXViewContainer alignTag =
_customTeXViewChild("child_6", r"<h3>Align Tag</h3>", r"""
$$
\begin{align}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{align}
$$
</p>""");
static TeXViewContainer others =
_customTeXViewChild("child_7", r"<h3> Others </h3>", r"""<p>
$$ \oint_C {E \cdot d\ell = - \frac{d}{{dt}}} \int_S {B_n dA} $$<br>
$$ y = \frac{{n!}}{{k!\left( {n - k} \right)!}}p^k q^{n - k} = \left( {\begin{array}{*{20}c}
n \\
k \\
\end{array}} \right)p^k q^{n - k} $$
</p>""");
}
class TeXViewPage extends StatefulWidget {
final List<TeXViewContainer> teXViewChildren;
final String label;
final TeXViewRenderingEngine renderingEngine;
TeXViewPage({this.label, this.teXViewChildren, this.renderingEngine});
@override
_TeXViewPageState createState() => _TeXViewPageState();
}
class _TeXViewPageState extends State<TeXViewPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Rendering with ${widget.label} Example"),
),
body: ListView(
children: <Widget>[
Text(
"Rendered TeX HTML with ${widget.label}",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
),
TeXView(
showLoadingWidget: false,
renderingEngine: widget.renderingEngine,
children: widget.teXViewChildren,
style: TeXViewStyle(
margin: TeXViewMargin.all(10),
elevation: 10,
borderRadius: TeXViewBorderRadius.all(25),
border: TeXViewBorder.all(TeXViewBorderDecoration(
borderColor: Colors.blue,
borderStyle: TeXViewBorderStyle.Solid,
borderWidth: 5)),
backgroundColor: Colors.white,
),
loadingWidget: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Text("Rendering with ${widget.label}")
],
),
),
onTap: (childID) {
print("TeXView $childID is tapped.");
}),
],
),
);
}
}