repository·main·Indexed 43 days ago
https://github.com/shahxad-akram/flutter_texA self-contained Flutter package for robust, fully offline rendering of mathematical and chemical notations using MathJax. It supports LaTeX, TeX, MathML, and AsciiMath through three distinct widgets: Math2SVG for high-performance pure Flutter rendering, TeXWidget for dedicated LaTeX rendering, and TeXView for complex content including HTML, JavaScript, and Markdown. Requires Flutter SDK 3.27.x.
TeXView is an advanced widget based on webview_flutter_plus designed for rendering complex mathematical equations and rich dynamic content. It supports Inline HTML, JavaScript, and Markdown.
!!! danger "Caution"
Avoid using multiple TeXView instances on a single page as it can lead to performance issues due to its webview foundation. For displaying multiple TeX elements, use TeXWidget or Math2SVG instead.
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/Shahxad-Akram/flutter_tex/main/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,
),
);Flutter TeX provides three distinct widgets depending on your performance needs and content complexity:
Math2SVG: A high-performance, pure Flutter-based widget (no WebView). Best for rendering mathematical formulas using LaTeX, MathML, or AsciiMath.TeXWidget: A specialized widget built on top of Math2SVG specifically dedicated to LaTeX rendering.TeXView: An advanced, WebView-based widget designed for rendering complex content that includes HTML and JavaScript alongside mathematical notation.Because macOS apps run in a sandboxed environment, you must explicitly grant network client capabilities. Add the com.apple.security.network.client key to both macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements.
<key>com.apple.security.network.client</key>
<true/>To use Flutter TeX in your project, you must follow the platform-specific installation and setup instructions. Because the package leverages MathJax for offline rendering, setup requirements may vary depending on the target platform (Android, iOS, Web, etc.).
Refer to the official Installation Guide for detailed steps before attempting to run the package.
For Web support, you must include specific CSS and JavaScript assets in the <head> section of your <project-directory>/web/index.html file.
<head>
...
<link rel="stylesheet" href="assets/assets/flutter_tex.css" type="text/css">
<script src="assets/assets/flutter_tex.js" type="text/javascript"></script>
<script src="assets/packages/flutter_tex/core/flutter_tex.js"></script>
<script src="assets/packages/flutter_tex/core/mathjax_core.js"></script>
</head>To use custom fonts in TeXView, you must define them in a CSS file located in your project's assets and then reference that CSS file in your pubspec.yaml.
flutter_tex.css in your assets/ directory.@font-face rules within that CSS file, pointing to your font files (e.g., fonts/Army.ttf).assets/flutter_tex.css file in your pubspec.yaml under the flutter.assets section.TeXViewStyle and TeXViewFontStyle by specifying the fontFamily name defined in your CSS.flutter:
uses-material-design: true
assets:
- assets/flutter_tex.css@font-face {
font-family: 'army';
src: url("fonts/Army.ttf");
}TeXViewStyle(
fontStyle: TeXViewFontStyle(
fontFamily: 'army'),
)To ensure proper functionality, update your <project-directory>/android/app/src/main/AndroidManifest.xml with the following configurations:
android:usesCleartextTraffic="true" to the <application> tag.android.permission.INTERNET permission.<application
...
android:usesCleartextTraffic="true">
</application>
<!-- Permissions -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Queries -->
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="sms" />
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="tel" />
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="mailto" />
</intent>
<intent>
<action android:name="android.support.customtabs.action.CustomTabsService" />
</intent>
</queries>To change the launch screen image for the iOS version of your Flutter app, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.
Using Xcode:
open ios/Runner.xcworkspace from your terminal.Runner/Assets.xcassets.open ios/Runner.xcworkspaceTo customize how MathJax renders mathematical notation (e.g., changing delimiters for inline or display math), you must provide a JavaScript configuration file named flutter_tex.js located in your project's assets directory.
Follow these steps:
assets/flutter_tex.js in your project root.window.MathJax object.pubspec.yaml under the assets section.flutter:
uses-material-design: true
assets:
- assets/flutter_tex.jsAdd the following keys to your <project-directory>/ios/Runner/Info.plist to enable network transport security, embedded views, and application query schemes.
<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> The TeXWidget is a high-level wrapper designed to render LaTeX strings that contain a mixture of plain text and mathematical notation. It automatically identifies and handles both inline math (e.g., \( ... \)) and display math (e.g., $$ ... $$).
TeXWidget(
math: r"When \(a \ne 0 \), there are two solutions to \(ax^2 + bx + c = 0\) "
r"and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$"
)