Flutter_tex 使用教程

2025-04-17 19:51:40作者：冯梦姬Eddie

1. 项目介绍

flutter_tex 是一个基于 LaTeX 的 Flutter 包，用于在 Flutter 应用中渲染数学、物理和化学方程。它支持 LaTeX、TeX 和 MathML 格式的方程，并且可以完全离线工作，不需要互联网连接。此包基于强大的 JavaScript 库 MathJax，能够在 webview_flutter_plus 中渲染方程。

2. 项目快速启动

添加依赖

首先，你需要在你的 Flutter 项目的 pubspec.yaml 文件中添加 flutter_tex 的最新版本依赖：

dependencies:
  flutter_tex:
    ^4.1.3

然后，从命令行安装依赖：

flutter packages get

或者，如果你的编辑器支持，你也可以直接在编辑器中执行此操作。

配置 Android、iOS 和 Web

Android：在 <project-directory>/android/app/src/main/AndroidManifest.xml 文件中的 <application> 标签下添加以下内容：

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

并确保添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />

iOS：在 <project-directory>/ios/Runner/Info.plist 文件中添加以下内容：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>https</string>
    <string>http</string>
    <string>tel</string>
    <string>mailto</string>
</array>

Web：在 <project-directory>/web/index.html 文件的 <head> 标签中添加以下脚本：

<script src="assets/packages/flutter_tex/js/flutter_tex.js"></script>
<script type="text/javascript">window.flutterWebRenderer = "canvaskit";</script>

初始化 TeX Rendering Server

在你的 Dart 代码中，确保在渲染 TeX 之前启动 TeXRenderingServer：

main() async {
  if (!kIsWeb) {
    await TeXRenderingServer.start();
  }
  runApp(...);
}

使用 TeXView

现在，你可以使用 TeXView 作为小部件来渲染 LaTeX：

import 'package:flutter_tex/flutter_tex.dart';

// 在你的 Widget 树中使用 TeXView
TeXView(
  child: TeXViewColumn(
    children: [
      TeXViewDocument(r"""<h2>Flutter \(\rm\\TeX\)</h2>"""),
      // ... 其他 TeXViewWidget
    ],
  ),
)