search

Shahxad-Akram / flutter_tex

A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX
https://pub.dartlang.org/packages/flutter_tex
Other
277 stars 134 forks source link
equations flutter katex latex mathjax tex

readme

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 , TeX and MathML, most commonly used are as followings:

How it works?

Basically it's a flutter dart wrapper around the most powerful JavaScript libraries MathJax and Katex which render the equations in webview_flutter_plus.

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 flutter_tex latest pub package version under dependencies to your package's pubspec.yaml file.

dependencies:
  flutter_tex: ^4.0.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 <project-directory>/android/app/src/main/AndroidManifest.xml under application like this.

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

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

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

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 <project-directory>/ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key> <true/>
  </dict>
<key>io.flutter.embedded_views_preview</key> <true/>

Web

For Web support you need to put <script src="https://github.com/Shahxad-Akram/flutter_tex/raw/master/assets/packages/flutter_tex/js/flutter_tex.js"></script> and <script type="text/javascript">window.flutterWebRenderer = "canvaskit";</script> in <head> tag of your <project-directory>/web/index.html like this.

<head>

    <meta charset="UTF-8">
    <title>Flutter TeX</title>

    <script src="https://github.com/Shahxad-Akram/flutter_tex/raw/master/assets/packages/flutter_tex/js/flutter_tex.js"></script>
    <script type="text/javascript">window.flutterWebRenderer = "canvaskit";</script>
</head>

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"""<h2>Flutter \( \rm\\TeX \)</h2>""",
              style: TeXViewStyle(textAlign: TeXViewTextAlign.Center)),
          TeXViewContainer(
            child: TeXViewImage.network(
                'https://raw.githubusercontent.com/Shahxad-Akram/flutter_tex/master/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,
    ),
   ),
  )

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.

For more please see the Example.

To Do:

Cautions: