shah-xad/ flutter_tex

Flutter

mathjax

katex

JavaScript

Dart

CSS

HTML

Objective-C

Kotlin

Swift

Java

TeX

LaTeX

View on GitHub

Need help with flutter_tex?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

shah-xad

159 Stars

49 Forks

Other

113 Commits

24 Opened issues

Description

A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX

Services available

Need anything else?

Contributors list

Readme

flutter_tex

Name: flutter_tex
Brand: flutter_tex
SKU: //shah-xad/flutter_tex
Rating: 2.1475 (159 reviews)

About

A Flutter Package to render fully offline so many types of equations and expressions based on LaTeX and TeX, most commonly used are as followings:

Mathematics / Maths Equations and expressions (Algebra, Calculus, Geometry, Geometry etc...)
Physics Equations and expressions
Signal Processing Equations and expressions
Chemistry Equations and expressions
Statistics / Stats Equations and expressions
It also includes full HTML with JavaScript support.

Rendering of equations depends on mini-mathjax a simplified version of MathJax and Katex JavaScript libraries.

This package mainly depends on webviewflutterplus.

Demo Video

Click to Watch Demo on Youtube

Screenshots

Fonts Sample	Quiz Sample	TeX Document

TeX Document	Image & Video	InkWell

How to use?

1: Add fluttertex latest [](https://pub.dev/packages/fluttertex) version under dependencies to your package's pubspec.yaml file.

dependencies:
  flutter_tex: ^3.6.7+9

2: You can install packages from the command line:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3: Now you need to put the following implementations in

Android

iOS

, and

Web

respectively.

Android

Make sure to add this line

android:usesCleartextTraffic="true"

in your

/android/app/src/main/AndroidManifest.xml

under

application

like this.

xml

It completely works offline, without internet connection, but these are required permissions to work properly:

It'll still work in debug mode without permissions, but it won't work in release application without mentioned permissions.

iOS

Add following code in your

/ios/Runner/Info.plist

plist
NSAppTransportSecurity
  
    NSAllowsArbitraryLoads 
  
io.flutter.embedded_views_preview

Web

For Web support you need to put

tag of your

/web/index.html

like this.

html

<meta charset="UTF-8">
<title>Flutter TeX</title>
<script src="assets/packages/flutter_tex/js/flutter_tex.js"></script>

4: Now in your Dart code, you can use:

import 'package:flutter_tex/flutter_tex.dart';

5: Now you can use TeXView as a widget:

Examples

Quick Example

TeXView(
    child: TeXViewColumn(children: [
      TeXViewInkWell(
        id: "id_0",
        child: TeXViewColumn(children: [
          TeXViewDocument(r"""Flutter \( \rm\\TeX \)""",
              style: TeXViewStyle(textAlign: TeXViewTextAlign.Center)),
          TeXViewContainer(
            child: TeXViewImage.network(
                'https://raw.githubusercontent.com/shah-xad/flutter_tex/master/example/assets/flutter_tex_banner.png'),
            style: TeXViewStyle(
              margin: TeXViewMargin.all(10),
              borderRadius: TeXViewBorderRadius.all(20),
            ),
          ),
          TeXViewDocument(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}.$$""",
              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,
    ),
   ),
  )

TeXView Document Example

TeXView Markdown Example

TeXView Quiz Example

TeXView Custom Fonts Example

TeXView Image and Video Example

TeXView InkWell Example

Complete Example

Complete Example Code

Application Demo.

Demo Source

Web Demo.

You can find web demo at https://flutter-tex.web.app

Api Changes.

Please see CHANGELOG.md.

Api Usage.

```
children:
```
A list of
```
TeXViewWidget
```
```
TeXViewWidget
```
- ```
TeXViewDocument
```
  Holds TeX data by using a raw string e.g.
```
r"""$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
 """
```
  You can also put HTML and Javascript code in it.
- ```
TeXViewMarkdown
```
  Holds markdown data.
- ```
TeXViewContainer
```
  Holds a single
```
TeXViewWidget
```
  with styling.
- ```
TeXViewImage
```
  renders image from assets or network.
- ```
TeXViewColumn
```
  holds a list of
```
TeXViewWidget
```
  vertically.
- ```
TeXViewInkWell
```
  for listening tap events. Its child and id is mandatory.
- ```
TeXViewGroup
```
  a group of
```
TeXViewGroupItem
```
  usually used to create quiz layout.
```
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.
```
renderingEngine:
```
Render Engine to render TeX (Default is Katex Rendering Engine). Use Katex RenderingEngine for fast render and MathJax RenderingEngine for quality render.
```
loadingWidgetBuilder:
```
Show a loading widget before rendering completes.
```
onRenderFinished:
```
Callback with the rendered page height, when TEX rendering finishes.
```
onTeXViewCreated:
```
Callback when TeXView loading finishes.

For more please see the Example.

To Do:

~~Speed Optimizations as it's a bit slow rendering speed. It takes 1-2 seconds to render after application loaded.~~ (Solved by adding Katex Support)
```
Bug in Web Support
```
on
```
setState
```
everything disappears.

Cautions:

Please avoid using too many
```
TeXView
```
in a single page, because this is based on webviewflutterplus a complete web browser. Which may cause slowing down your app. I am trying to add all necessary widgets within
```
TeXView
```
, So please prefer to use
```
TeXViewWidget
```
. You can check example folder for details. If you find any problem you can report an issue.