flutter_tex 3.6.5 copy "flutter_tex: ^3.6.5" to clipboard
flutter_tex: ^3.6.5 copied to clipboard

Published 3 years ago • verified publishershahxad.comDart 3 incompatible• Latest: 4.0.6
outdated
→

Metadata

A Flutter Package to render fully offline Mathematics / Maths, Physics and Chemistry, Statistics / Stats Equations based on LaTeX with full HTML and JavaScript support.

More...

flutter_tex #

GitHub stars pub package

Contents #

About #

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

  • Mathematics / Maths Equations (Algebra, Calculus, Geometry, Geometry etc...)

  • Physics Equations

  • Signal Processing Equations

  • Chemistry Equations

  • Statistics / Stats Equations

  • 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 webview_flutter_plus a very powerful extension of webview_flutter.

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 this to your package's pubspec.yaml file:

dependencies:
  flutter_tex: ^3.6.5

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>

Required Permissions are:

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

iOS #

Add following code in your <project-directory>/ios/Runner/Info.plist

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

Web #

For Web support you need to put <script src="assets/packages/flutter_tex/src/flutter_tex_libs/flutter_tex.js"></script> in <head> tag of your <project-directory>/web/index.html like this.

<head>
    <meta charset="UTF-8">
    <title>Flutter TeX</title>
    <script src="assets/packages/flutter_tex/src/flutter_tex_libs/flutter_tex.js"></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 #

General Example #

TeXView(
    showLoadingWidget: false,
    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/shah-xad/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,
    ),
    loadingWidget: Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CircularProgressIndicator(),
          Text("Rendering...")
        ],
      ),
    ))

TeXView Document Example #

TeXView Document 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

Do check the Complete Example for the true understanding of the package.

Application Demo. #

Get it on Google Play Example 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}.$$<br> """ You can also put HTML and Javascript code in it.
    • 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.

  • height: Fixed Height for TeXView. (Avoid using fixed height for TeXView, let it to adopt the height by itself)

  • loadingWidget: Show a loading widget before rendering completes.

  • showLoadingWidget: Show or hide loadingWidget.

  • onRenderFinished: Callback with the rendered page height, when TEX rendering finishes.

  • onPageFinished: Callback when TeXView loading finishes.

  • keepAlive: Keep widget Alive. (True by default).

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.

Caution: #

  • Please avoid using too many TeXView in a single page, because this is based on webview_flutter_plus 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.

← Metadata

276
likes
0
pub points
96%
popularity

Publisher

verified publishershahxad.com

Metadata

A Flutter Package to render fully offline Mathematics / Maths, Physics and Chemistry, Statistics / Stats Equations based on LaTeX with full HTML and JavaScript support.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, webview_flutter_plus

More

Packages that depend on flutter_tex

Back