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

flutter_tex

GitHub stars pub package

Contents

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 [pub package](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

 in 
 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 Document Example

TeXView Markdown Example

TeXView Markdown Example

TeXView Quiz Example

TeXView Quiz Example

TeXView Custom Fonts Example

TeXView Custom Fonts Example

TeXView Image and Video Example

TeXView Image and Video Example

TeXView InkWell Example

TeXView InkWell Example

Complete Example

Complete Example Code

Application Demo.

Get it on Google Play

Demo Source

Web Demo.

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

Api Changes.

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.