{"id":29360035,"url":"https://github.com/shahxad-akram/flutter_tex","last_synced_at":"2025-07-09T07:09:56.793Z","repository":{"id":37549830,"uuid":"170740334","full_name":"Shahxad-Akram/flutter_tex","owner":"Shahxad-Akram","description":"A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX","archived":false,"fork":false,"pushed_at":"2025-06-05T22:24:31.000Z","size":11964,"stargazers_count":293,"open_issues_count":72,"forks_count":142,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-05T23:26:33.110Z","etag":null,"topics":["equations","flutter","katex","latex","mathjax","tex"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/flutter_tex","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Shahxad-Akram.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-02-14T18:42:03.000Z","updated_at":"2025-06-05T22:24:33.000Z","dependencies_parsed_at":"2024-08-06T00:27:41.887Z","dependency_job_id":"0e0f83b6-f9bc-443d-ada1-2f3133189ad1","html_url":"https://github.com/Shahxad-Akram/flutter_tex","commit_stats":null,"previous_names":["shahxad-akram/flutter_tex","shah-xad/flutter_tex"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Shahxad-Akram/flutter_tex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shahxad-Akram%2Fflutter_tex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shahxad-Akram%2Fflutter_tex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shahxad-Akram%2Fflutter_tex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shahxad-Akram%2Fflutter_tex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shahxad-Akram","download_url":"https://codeload.github.com/Shahxad-Akram/flutter_tex/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shahxad-Akram%2Fflutter_tex/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264411163,"owners_count":23603804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["equations","flutter","katex","latex","mathjax","tex"],"created_at":"2025-07-09T07:09:20.212Z","updated_at":"2025-07-09T07:09:56.786Z","avatar_url":"https://github.com/Shahxad-Akram.png","language":"C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flutter_tex\n[![GitHub stars](https://img.shields.io/github/stars/Shahxad-Akram/flutter_tex?style=social)](https://github.com/Shahxad-Akram/flutter_tex/stargazers) [![pub package](https://img.shields.io/pub/v/flutter_tex.svg)](https://pub.dev/packages/flutter_tex)\n\n\u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/example/assets/flutter_tex_banner.png\" alt=\"\"/\u003e\n\n# Contents\n- [flutter\\_tex](#flutter_tex)\n- [Contents](#contents)\n- [About](#about)\n- [How it works?](#how-it-works)\n- [Web Demo](#web-demo)\n- [Application Demo](#application-demo)\n- [Demo Video](#demo-video)\n- [Screenshots](#screenshots)\n- [How to setup?](#how-to-setup)\n    - [Android](#android)\n    - [iOS](#ios)\n    - [Web](#web)\n    - [MacOS](#macos)\n- [How to use?](#how-to-use)\n    - [TeXWidget](#texwidget)\n    - [TeXView](#texview)\n    - [TeX2SVG](#tex2svg)\n- [More Examples](#more-examples)\n- [MathJax Configurations - `TeXView`](#mathjax-configurations---texview)\n- [Custom Fonts - `TeXView`](#custom-fonts---texview)\n- [API Usage - `TeXView`](#api-usage---texview)\n- [API Changes](#api-changes)\n\n# About\nA self-contained Flutter package leveraging [MathJax](https://github.com/mathjax/MathJax) to deliver robust, fully offline rendering of mathematical and chemical notation. It parses multiple formats, including **LaTeX**, **TeX**, and **MathML**, making it a universal solution for in-app scientific and mathematical visualization.\n\n**Primary use cases include, but are not limited to:**\n\n- General Mathematics and Statistics\n- Physics and Chemistry Equations\n- Signal Processing Expressions\n- In addition to its mathematical capabilities, the package is a powerful tool for displaying rich content, offering complete HTML and JavaScript support.\n\n\n# How it works?\nFlutter TeX brings the power of the [MathJax](https://github.com/mathjax/MathJax) rendering engine to Flutter applications. As a direct port of this essential JavaScript library, it enables the display of a wide range of equations and expressions from formats like LaTeX, TeX, and MathML.\n\nThe rendering itself is handled within a [webview_flutter_plus](https://pub.dartlang.org/packages/webview_flutter_plus) widget, allowing for a robust and faithful presentation of the original MathJax output.\n\nWe extend our sincere credit to the original [MathJax](https://github.com/mathjax/MathJax) developers, whose work is the foundation of this package.\n\n\n# Web Demo\n- ## [https://flutter-tex.web.app](https://flutter-tex.web.app)\n\n\n# Application Demo\n\u003ca href='https://play.google.com/store/apps/details?id=com.shahxad.flutter_tex_example\u0026pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'\u003e\u003cimg alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/\u003e\u003c/a\u003e\n\n# Demo Video\n- ## [Click to Watch Demo on Youtube](https://www.youtube.com/watch?v=YiNbVEXV_NM)\n\n# Screenshots\n |                                                 TeXWidget                                                  |                                                  Quiz Sample                                                  |                                               TeX Document                                               |\n | :--------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------: |\n | \u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/screenshots/tex_widget.png\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/screenshots/tex_view_quiz.png\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/screenshots/tex_view.png\"/\u003e |\n\n |                                                  Custom Fonts                                                  |                                                    Image \u0026 Video                                                     |                                                     Markdown                                                      |\n | :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------: |\n | \u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/screenshots/tex_view_fonts.png\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/screenshots/tex_view_image_video.png\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/screenshots/tex_view_markdown.png\"/\u003e |\n\n\n# How to setup?\n\n**Minmum flutter SDK requirement is 3.27.x**\n\n\n**1:** Add flutter_tex latest  [![pub package](https://img.shields.io/pub/v/flutter_tex.svg)](https://pub.dev/packages/flutter_tex) version under dependencies to your package's pubspec.yaml file.\n\n```yaml\ndependencies:\n  flutter_tex: ^5.1.8\n``` \n\n**2:** You can install packages from the command line:\n\n```bash\n$ flutter packages get\n```\n\nAlternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.\n\n\n**3:** Now you need to put the following implementations in `Android`, `iOS`, `MacOS` and `Web` respectively.\n\n### Android\nMake sure to add this line `android:usesCleartextTraffic=\"true\"` in your `\u003cproject-directory\u003e/android/app/src/main/AndroidManifest.xml` under `application` like this.\n\n```xml\n\u003capplication\n       ...\n       ...\n       android:usesCleartextTraffic=\"true\"\u003e\n\u003c/application\u003e\n```\n\nIt completely works offline, without internet connection, but these are required permissions to work properly:\n\n\n```xml\n    \u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n```\nand intents in queries block: \n\n```xml\n\u003cqueries\u003e\n  ...\n  ...\n    \u003cintent\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003cdata android:scheme=\"https\" /\u003e\n    \u003c/intent\u003e\n\n    \u003cintent\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003cdata android:scheme=\"sms\" /\u003e\n    \u003c/intent\u003e\n    \u003cintent\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003cdata android:scheme=\"tel\" /\u003e\n    \u003c/intent\u003e\n    \u003cintent\u003e\n        \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n        \u003cdata android:scheme=\"mailto\" /\u003e\n    \u003c/intent\u003e\n    \u003cintent\u003e\n        \u003caction android:name=\"android.support.customtabs.action.CustomTabsService\" /\u003e\n    \u003c/intent\u003e\n\u003c/queries\u003e\n```\n\n\n### iOS\nAdd following lines in `\u003cproject-directory\u003e/ios/Runner/Info.plist`\n\n```xml\n\u003ckey\u003eNSAppTransportSecurity\u003c/key\u003e\n  \u003cdict\u003e\n    \u003ckey\u003eNSAllowsArbitraryLoads\u003c/key\u003e \u003ctrue/\u003e\n  \u003c/dict\u003e\n\u003ckey\u003eio.flutter.embedded_views_preview\u003c/key\u003e \u003ctrue/\u003e \n\u003ckey\u003eLSApplicationQueriesSchemes\u003c/key\u003e\n\u003carray\u003e\n    \u003cstring\u003ehttps\u003c/string\u003e\n    \u003cstring\u003ehttp\u003c/string\u003e\n    \u003cstring\u003etel\u003c/string\u003e\n    \u003cstring\u003emailto\u003c/string\u003e\n\u003c/array\u003e \n```\n\n### Web\nFor Web support modify `\u003cproject-directory\u003e/web/index.html` like this.\n\n```html\n\u003chead\u003e\n    ...\n    ...\n  \u003cscript src=\"assets/packages/flutter_tex/core/flutter_tex.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"assets/packages/flutter_tex/core/mathjax_core.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### MacOS\nBy default, macOS apps running in a sandboxed environment (which is the standard for Flutter apps) are not allowed to make network requests. You need to explicitly grant your application the capability to access the internet. In your Flutter project, navigate to the `macos/Runner/` directory and add the following key-value pair to `DebugProfile.entitlements` and `Release.entitlements`.\n\n```xml\n\u003ckey\u003ecom.apple.security.network.client\u003c/key\u003e\n  \u003ctrue/\u003e\n```\n\n# How to use?\n\nIn your Dart code, you can use like:\n\n```dart\nimport 'package:flutter_tex/flutter_tex.dart'; \n```\n\nMake sure to setup `TeXRederingServer` before rendering TeX:\n\n```dart\nmain() async {\n  await TeXRenderingServer.start();\n  runApp(...);\n}\n```\n\nNow you can use `TeXView`,`TeXWidget` or `TeX2SVG` as a widgets:\n\n### TeXWidget\nA simple but a powerful pure Flutter widget based on `TeX2SVG`. See [TeXWidget Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_widget_example.dart) for more details:\n\n```dart\nTeXWidget(math: 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}$$\")\n```\n\n\n### TeXView\nThis is an advanced widget, based on [webview_flutter_plus](https://pub.dartlang.org/packages/webview_flutter_plus), engineered for a rich user experience. It excels at rendering complex mathematical equations and offers a flexible environment for dynamic content through its support for:\n\n- **Inline HTML:** Directly embed and render HTML content.\n- **JavaScript:** Execute custom scripts for interactive elements.\n- **Markdown:** Display text with Markdown formatting.\n\n\u003e [!CAUTION]\nAvoid using multiple `TeXView` instances on a single page, It's based on a `webview` and it can lead to performance issues. Instead, use `TeXWidget` or `TeX2SVG` for multiple TeX elements.\n\n\n```dart\nTeXView(\n    child: TeXViewColumn(children: [\n      TeXViewInkWell(\n        id: \"id_0\",\n        child: TeXViewColumn(children: [\n          TeXViewDocument(r\"\"\"\u003ch2\u003eFlutter \\( \\rm\\\\TeX \\)\u003c/h2\u003e\"\"\",\n              style: TeXViewStyle(textAlign: TeXViewTextAlign.center)),\n          TeXViewContainer(\n            child: TeXViewImage.network(\n                'https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/example/assets/flutter_tex_banner.png'),\n            style: TeXViewStyle(\n              margin: TeXViewMargin.all(10),\n              borderRadius: TeXViewBorderRadius.all(20),\n            ),\n          ),\n          TeXViewDocument(r\"\"\"\u003cp\u003e                                \n                       When \\(a \\ne 0 \\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are\n                       $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$\u003c/p\u003e\"\"\",\n              style: TeXViewStyle.fromCSS(\n                  'padding: 15px; color: white; background: green'))\n        ]),\n      )\n    ]),\n    style: TeXViewStyle(\n      elevation: 10,\n      borderRadius: TeXViewBorderRadius.all(25),\n      border: TeXViewBorder.all(TeXViewBorderDecoration(\n          borderColor: Colors.blue,\n          borderStyle: TeXViewBorderStyle.solid,\n          borderWidth: 5)),\n      backgroundColor: Colors.white,\n    ),\n   );\n```\n\n### TeX2SVG\nA high-performance, pure Flutter solution for displaying mathematical notations. It accurately parses TeX expressions and renders them as resolution-independent SVGs via the [flutter_svg](https://pub.dev/packages/flutter_svg) library.\n\n- **Pure Flutter**: Ensures seamless integration and optimal performance within your Flutter project.\n- **High-Quality Output**: Renders TeX as SVG for sharp, scalable graphics on any screen size.\n- **Full Render Control**: Provides a comprehensive API for fine-tuning the appearance and behavior of rendered equations.\n\n\n```dart\nimport 'package:flutter/foundation.dart';\nimport 'package:flutter/material.dart';\nimport 'package:flutter_tex/flutter_tex.dart';\n\nmain() async {\n  await TeXRenderingServer.start();\n  runApp(const MaterialApp(\n    debugShowCheckedModeBanner: false,\n    home: TeX2SVGExample(),\n  ));\n}\n\nclass TeX2SVGExample extends StatefulWidget {\n  const TeX2SVGExample({super.key});\n\n  @override\n  State\u003cTeX2SVGExample\u003e createState() =\u003e _TeX2SVGExampleState();\n}\n\nclass _TeX2SVGExampleState extends State\u003cTeX2SVGExample\u003e {\n  double fontSize = 18.0;\n  TextStyle baseStyle = TextStyle(fontSize: 18.0, color: Colors.black);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.white,\n      appBar: AppBar(\n        title: const Text(\"TeX2SVG Example\"),\n      ),\n      body: ListView(\n        shrinkWrap: true,\n        padding: const EdgeInsets.all(16.0),\n        children: [\n          Container(\n            padding: const EdgeInsets.all(8.0),\n            decoration: BoxDecoration(\n              border: Border.all(color: Colors.red, width: 4),\n              borderRadius: BorderRadius.circular(8.0),\n            ),\n            child: Column(\n              mainAxisSize: MainAxisSize.min,\n              children: [\n                Text(\"Quadratic Formula\",\n                    style: baseStyle.copyWith(\n                      fontSize: fontSize * 1.5,\n                      color: Colors.black,\n                    )),\n                RichText(\n                  text: TextSpan(\n                    style: baseStyle,\n                    children: \u003cInlineSpan\u003e[\n                      const TextSpan(text: 'When '),\n                      WidgetSpan(\n                        alignment: PlaceholderAlignment.middle,\n                        child: TeX2SVG(\n                          teXInputType: TeXInputType.teX,\n                          math: r\"a \\ne 0\",\n                        ),\n                      ),\n                      const TextSpan(text: ', there are two solutions to'),\n                      WidgetSpan(\n                        alignment: PlaceholderAlignment.middle,\n                        child: TeX2SVG(\n                          math: r\"ax^2 + bx + c = 0\",\n                        ),\n                      ),\n                      const TextSpan(text: ' and they are:'),\n                    ],\n                  ),\n                ),\n                Divider(\n                  height: 20,\n                  color: Colors.transparent,\n                ),\n                TeX2SVG(\n                  math: r\"\"\"x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\"\"\",\n                  formulaWidgetBuilder: (context, svg) {\n                    double displayFontSize = fontSize * 3;\n                    return SvgPicture.string(\n                      svg,\n                      height: displayFontSize,\n                      width: displayFontSize,\n                      fit: BoxFit.contain,\n                      alignment: Alignment.center,\n                    );\n                  },\n                )\n              ],\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n\n# More Examples\n\n- ### [TeXWidget Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_widget_example.dart)\n\n- ### [TeX2SVG Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex2svg_example.dart)\n\n- ### [TeXView Document Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_view_document_example.dart)\n\n- ### [TeXView Markdown Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_view_markdown_example.dart)\n\n- ### [TeXView Quiz Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_view_quiz_example.dart)\n\n- ### [TeXView Custom Fonts Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_view_fonts_example.dart)\n\n- ### [TeXView Image and Video Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_view_image_video_example.dart)\n\n- ### [TeXView InkWell Example](https://github.com/Shahxad-Akram/flutter_tex/blob/master/example/lib/tex_view_ink_well_example.dart)\n\n\n# MathJax Configurations - `TeXView`\nTo apply a custom MathJax configuration, create a file named `flutter_tex.js` in the root of your project's `assets` directory, your project structure should look like this:\n\n```text\nyour_flutter_app/\n├── assets/\n│   └── flutter_tex.js\n├── lib/\n...\n```\nand make sure to add this into `pubspec.yaml` like:\n\n```yaml\nflutter:\n  uses-material-design: true\n  assets:\n    - assets/flutter_tex.js\n```\n\nAn example `flutter_tex.js` file:\n\n```js\nwindow.MathJax = {\n    tex: {\n        inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],\n        displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']],\n    },\n    svg: {\n        fontCache: 'global'\n    }\n};\n```\n\nFor more info please refer to the [MathJax Docs](https://docs.mathjax.org/en/latest/basic/mathjax.html)\n\n# Custom Fonts - `TeXView`\nTo use custom fonts for `TeXView`, create a create a file named `flutter_tex.css` in the root of your project's `assets` directory, this style file should define your custom fonts. Your project structure should look like this:\n\n```textyour_flutter_app/\n├── assets/\n│   ├── fonts/\n│   └── flutter_tex.css\n├── lib/\n...\n```\nand make sure to add this into `pubspec.yaml` like:\n```yaml\nflutter:\n  uses-material-design: true\n  assets:\n    - assets/flutter_tex.css\n```\n\nAn example `flutter_tex.css` file defining a custom font:\n\n```css\n@font-face {\n    font-family: 'army';\n    src: url(\"fonts/Army.ttf\");\n}\n```\nThen you can use this custom font in your `TeXViewStyle` like this:\n\n```dart\nTeXViewStyle(\n  fontStyle: TeXViewFontStyle(\n      fontFamily: 'army'),\n)\n```\n\n\n# API Usage - `TeXView`\n- `children` A list of `TeXViewWidget`\n- `heightOffset` Height offset to be added to the rendered height.\n\n- **`TeXViewWidget`s**\n    - `TeXViewDocument` Holds TeX data by using a raw string e.g. `r\"\"\"$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$\u003cbr\u003e \"\"\"` You can also put HTML and Javascript code in it.\n    - `TeXViewMarkdown` Holds markdown data.\n    - `TeXViewContainer` Holds a single `TeXViewWidget` with styling.\n    - `TeXViewImage` renders image from assets or network.\n    - `TeXViewColumn` holds a list of `TeXViewWidget` vertically.\n    - `TeXViewInkWell` for listening tap events..\n    - `TeXViewDetails` like html `\u003cdetails\u003e`.\n\n\n- `TeXViewStyle()` You can style each and everything using `TeXViewStyle()` or by using custom `CSS` code by `TeXViewStyle.fromCSS()` where you can pass hard coded String containing CSS code. For more information please check the example.\n    \n\n- `loadingWidgetBuilder` Shows a loading widget before rendering completes.\n\n- `onRenderFinished` Callback with the rendered page height, when TEX rendering finishes.\n\nFor more please see the [Example](https://github.com/Shahxad-Akram/flutter_tex/tree/master/example).\n\n# API Changes\n* Please see [CHANGELOG.md](https://github.com/Shahxad-Akram/flutter_tex/blob/master/CHANGELOG.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahxad-akram%2Fflutter_tex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahxad-akram%2Fflutter_tex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahxad-akram%2Fflutter_tex/lists"}