Flutter TeX

一个 Flutter 包，用于渲染多种类型的基于 LaTeX 的公式，最常用的如下：

  • 数学/数学公式 (代数、微积分、几何、几何等...)

  • 物理公式

  • 信号处理公式

  • 化学公式

  • 统计/统计公式

  • 它还支持完整的 HTML 和 JavaScript。

公式渲染取决于 mini-mathjax，它是 MathJax 的一个简化版本，一个 JavaScript 库。

此包主要依赖于 webview_flutter 插件。

仅在 Android 上测试过，未在 iOS 上测试，因为我没有 Mac。

将此包作为库在你的 flutter 应用程序中使用

1：将此添加到你的包的 pubspec.yaml 文件中

dependencies:
  flutter_tex: ^0.0.19

2：你可以从命令行安装包

$ flutter packages get

或者，您的编辑器可能支持 flutter packages get。请查看您编辑器的文档了解更多信息。

3：现在在你的 Dart 代码中，你可以使用

import 'package:flutter_tex/flutter_tex.dart';

4：请确保在你的 <project-directory>/android/app/src/main/AndroidManifest.xml 文件中的 application 标签下添加此行 android:usesCleartextTraffic="true"，如下所示。

<application
       android:usesCleartextTraffic="true">
</application>

对于 iOS，请在你的 <project-directory>/ios/Runner/Info.plist 文件中添加以下代码


<key>NSAppTransportSecurity</key>
  
  <dict>
    <key>NSAllowsArbitraryLoads</key> <true/>
  </dict>

<key>io.flutter.embedded_views_preview</key> <true/>

示例

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

main() async {
runApp(FlutterTeX());
}

class FlutterTeX extends StatefulWidget {
@override
_FlutterTeXState createState() => _FlutterTeXState();
}

class _FlutterTeXState extends State<FlutterTeX> {
  String teX = Uri.encodeComponent(r"""
  <p>
    A simple Example to render \( \rm\\TeX \) in flutter<br>

    <style>
      .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 40%;
      }

      .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      }

      .container {
        padding: 2px 16px;


    </style>
    <div class="card">
      <div class="container">
        <p>
          \begin{align}
          \dot{x} & = \sigma(y-x) \\
          \dot{y} & = \rho x - y - xz \\
          \dot{z} & = -\beta z + xy
          \end{align}
        </p>
      </div>
    </div>

    <br>
    <br>

    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>

    $$ \oint_C {E \cdot d\ell = - \frac{d}{{dt}}} \int_S {B_n dA} $$<br>

    Bohr Radius

    \( a_0 = \frac{{\hbar ^2 }}{{m_e ke^2 }} \)<br>

    Relationship between Energy and Principal Quantum Number

    \( E_n = - R_H \left( {\frac{1}{{n^2 }}} \right) = \frac{{ - 2.178 \times 10^{ - 18} }}{{n^2 }}joule \)<br><br>

    $$\ce{CO2 + C -> 2 CO}$$ <br><br>

    $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$ <br><br>

    $$\ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O}$$ <br><br>

  </p>
  """);

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text("Flutter TeX Example"),
       ),
       body: TeXView(
         teXHTML: teX,
       ),
     ),
   );
 }
}

截图

Screenshot_1

Screenshot_2

GitHub

https://github.com/shahxadakram/flutter_tex