shah-xad / flutter_tex Goto Github PK

Is there a way to make it render the content faster. like reduce the time taken to render the content in the TexView. Any help is highly appreciated.

Do you think you may support Flutter Web?

Hi @shah-xad , i have a new issue. right now it's hard to create onTap / onPressed. i have wrapped in GestureDetector / Button Widget but if I click the TeXView there's nothing happen. I guess it's because the TeXView is based on WebView. so any idea?

I love the new styling features, However, I have encountered a white bar at the bottom of the view that I can't seem to get rid of. In your example code, if you remove all the padding and the border-radius, you are left with the same issue. The blue border is added to show where the actual content is, but that white bar is not part of my code. I really appreciate your update with the css styling, but this is an eyesore for the dark them :( . Thanks so much - Joseph

`
return TeXView(
renderingEngine:
RenderingEngine.Katex,
children: [

                                                          TeXViewChild(
                                                            body: snapshot.data[index],
                                                            decoration: TeXViewDecoration(
                                                              style: TeXViewStyle(
                                                                border: TeXViewBorder(
                                                                    all: TeXViewBorderDecoration(
                                                                        borderColor:
                                                                            Colors.blue,
                                                                        borderStyle:
                                                                            TeXViewBorderStyle
                                                                                .Solid,
                                                                        borderWidth: 5)),
                                                                padding: TeXViewPadding(
                                                                    top: 0, bottom: 0),
                                                                backgroundColor: dark
                                                                    ? Color(0xff2f3136)
                                                                    : Colors.white,
                                                                contentColor: dark
                                                                    ? Colors.white
                                                                    : Colors.black,
                                                              ),
                                                            ),
                                                          )
                                                        ],
                                                        //loadingWidget: Center(
                                                        //    child:
                                                        //        CircularProgressIndicator()),
                                                      );`

While trying to display long forumulas with multiple webviews using this package, the text are truncated.
I think, the container takes the plain text height before the forumula is rendered, so the new rendered value is truncated.

Thank you for great work.

Is there any way to render mathml format.

Any kind of help will be appreciated .

Hello,
is it possible to display a local image file from my android studio assets folder?
The raw html code of my TeXViewTeX looks like this:

const String _texText = r'''  
<img src="assets\app_icon.png"> <br>
 $$ a^2 = b^2 + c^2 - 2 \, b \, c \cos \alpha $$
<!-- more code -->
''';

I've tried
<img src="http://localhost:8080/assets/app_icon.png"> <br>
and
<img src="file:///android_asset/flutter_assets/assets/app_icon.png"> <br>

Thanks

Following Error was thrown.

throw_ (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart:196:49)
_bind (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/io_patch.dart:455:5)
bind (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/io/socket.dart:336:27)
bind (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_http/http_impl.dart:2694:10)
bind (package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_http/http.dart:229:19)

Thanks for your great work!
When I use the Katex Rendering Engine I cant format text with the aligned function.
e.g.:

\begin{aligned}
   a&=b+c \\
   d+e&=f
\end{aligned}

Is there a fix?

Hi, please when I bundle my demo application for release, inside the container containing the equation, I only get a "webpage" not available message

Hey, I'd like to know, whether it is possible to render mathml format?
Something like this:
<p><math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><msub><mn>4</mn><mn>3</mn></msub></msqrt></math></p>
I've tried to change render engine to 'mathjax', but no luck...
Thanks.

I receive an error when trying to hot restart:

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: PlatformException(error, java.lang.IllegalStateException: Trying to create an already created platform view, view id: 0

So currently I just stop and restart the application in situations where I would hot restart.

Is this how things were intended to be or am I missing something?

Hi, I ran the example code with the most recent version of flutter_tex and the rendering with both mathjax and katex taking forever, and i mean forever to load on the simulator. I've used this in the past and it never takes this long, it's frankly unusable. I just get the blue spinner and if I wasn't patient, I wouldn't say it would spin infinitely. I did, however, install your android demo app and it worked great and quickly, so im not sure what happened on the ios side of things.

UPDATE
After running the demo app on my physical device it works great, so im wondering if its just an issue with the simulator
cheers

I have problem with polis language.
I this case

                    child: TeXView(
                      teXHTML: r"$$Pole\ trójkąta = \frac{1}{2}ah$$",
                      loadingWidget: Center(
                         child: Text("Kalkulacja"),
                      ),

the polish letter between k and t looks after rendering little different.
Is this correct use ?

Can the display show only after render finishes? Otherwise, the display is "flashing".

Chans-iMac:ilearning_hk chanraymond$ flutter doctor -v
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale en-HK)
    • Flutter version 1.9.1+hotfix.4 at /Users/chanraymond/development/flutter
    • Framework revision cc949a8e8b (5 weeks ago), 2019-09-27 15:04:59 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/chanraymond/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.2, Build version 11B52
    • CocoaPods version 1.8.3

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 40.1.2
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.38.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.6.0

[✓] Connected device (2 available)
    • Pixel 3 XL • 8A9Y0G17J                 • android-arm64 • Android 9 (API 28)
    • iPad (2)   • 00008027-0001504C2E85002E • ios           • iOS 13.2

It worked on localhost with debug mode.
But when build release and deploy to firebase hosting I just see this error.

Uncaught (in promise) SecurityError: Failed to register a ServiceWorker for scope ('https://mywebsite/packages/flutter_tex/src/tex_libs/mathjax/') with script ('https://mywebsite/packages/flutter_tex/src/tex_libs/mathjax/flutter_service_worker.js'): The script has an unsupported MIME type ('text/html').

So,
I am trying to render the math tag, which I am getting from API as a string.
So, I have multiple TabBarView which renders the TeXView.
The problem occurs as soon as it renders the content or when I switch the tabs.

My Sample(one of it) string: <p><math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn></msqrt></math>&nbsp;This is the content for a question</p>
and
TeXView( teXHTML: choice.data['content'], ),

TeXView can't show any text. It shows ImeThread is not enabled.

my code:

TeXView(
                renderingEngine: RenderingEngine.Katex,
                children: [
                  TeXViewChild(
                      id: "child_1",
                      title: r"<h3>Quadratic Equation</h3>",
                      body: 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>""",
                      decoration: TeXViewDecoration(
                          style: TeXViewStyle(
                            backgroundColor: Colors.green,
                            contentColor: Colors.white,
                          ),
                          titleStyle: TeXViewStyle(
                            textAlign: TeXViewTextAlign.Center,
                            backgroundColor: Colors.red,
                            contentColor: Colors.white,
                          ),
                          bodyStyle: TeXViewStyle.fromCSS(
                              "color:white;background-color:light-green")))
                ],
                style: TeXViewStyle(
                  elevation: 10,
                  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 with ")
                    ],
                  ),
                ),
                onTap: (childID) {
                  print("TeXView $childID is tapped.");
                }),

Console shows:

D/Surface ( 5430): Surface::setBufferCount(this=0x8ae13f00,bufferCount=4)
D/WebView ( 5430): loadUrl(extra headers)=http://localhost:5353/packages/flutter_tex/src/tex_libs/katex/index.html?teXViewServerPort=5353
I/cr_Ime  ( 5430): ImeThread is not enabled.

flutter doctor shows:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 1.18.0-12.0.pre, on Microsoft Windows
    [Version 10.0.18362.720], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[√] Android Studio (version 3.6)
[√] Connected device (1 available)

• No issues found!

Please help how to over come this issue.

When including images in the HTML string they don't always render correctly. I think it depends on the size of the image. For large images it seems to happen more often. Maybe if the MathJax is finished before the image downloads is the cause of the problem. Below is an example with a large image

import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

main() async {
  runApp(FlutterTeXExample());
}

class FlutterTeXExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Flutter TeX Example"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              TeXView(
                  keepAlive: true,
                  key: UniqueKey(),
                  renderingEngine: RenderingEngine.Katex,
                  loadingWidget: Center(child: CircularProgressIndicator()),
                  teXHTML: katexTeXHTML,
                onRenderFinished: (_) {
                    print('render finished');
                },
                onPageFinished: (_) {
                  print('page finished');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

String katexTeXHTML = r"""
   <p>
     A simple Example to render \( \rm\\TeX \) in flutter with full <B>HTML</B> support<br><br>
 
     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}.$$<br>
 
 
     Bohr Radius
 
     \( a_0 = \frac{{\hbar ^2 }}{{m_e ke^2 }} \)<br>
 
     Relationship between Energy and Principal Quantum Number
 
     \( E_n = - R_H \left( {\frac{1}{{n^2 }}} \right) = \frac{{ - 2.178 \times 10^{ - 18} }}{{n^2 }}joule \)<br><br>
  
     <br><br>
   </p>

    Inline Chemistry Equations <br>
         <p>    
     \( \ce{CO2 + C -> 2 CO} \) <br>
  
     \( \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} \) <br><br><br>

     Scroll long formulas $$ \ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O} $$ <br>
     
    </p>
    <img src="https://img.wallpapersafari.com/desktop/1920/1080/84/27/nMWzIB.jpg" />
    <br>
   """;

Hi,
I have noticed that if you have multiple tex views, initially both views render what's given to them, however after you alter one of them using "setstate" and then alter another, it doesn't render what was given to it, but instead what the previous texview displayed. To show you this, I made a video, there is a text view to display the input to the tex view directly over the tex view. both are given the same variable input, but after a bit, you will see things don't match up. I made a clear video explaining this so I hope you can better understand. Thanks

https://drive.google.com/file/d/10W3EDsEjFtSjgaAOnEfliBBV6xXJTHFP/view?usp=sharing

Text(f), TeXView( showLoadingWidget: true, renderingEngine: TeXViewRenderingEngine .katex(), children: [ TeXViewContainer( children: [ TeXViewTeX( f, style: TeXViewStyle( backgroundColor: dark ? Color( 0xff2f3136) : Colors .white, contentColor: dark ? Colors .white : Colors .black, ), ) ], ), ],

It takes much time for rendering in app. I am fetching webview from server . Content is containing
html and latex code. And another issue is while we using animation on page in which i am using
texview , it is rerender while using animation.

Hi,
It would be really great if you could add a custom background parameter the TeXView class. Although a background can be specified by wrapping your HTML in a div with css, it doesn't change the color of the entire TeXView. That way dark themes or transparent backgrounds could be possible.

Chnages into unicode

I storing latex code in firebase and getting to a pageview, but when i scroll through pages i am having rendering lags.

When I changed some code in this demo, I found extra space at the bottom;

main.dart core code:

 return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter TeX Example"),
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.refresh),
                onPressed: () {
                  setState(() {});
                })
          ],
        ),
        body: Column(
          children: <Widget>[
            TeXView(
              // any random unique index (0-9) is mandatory if you are using multiple TeXView in a List view on same page.
              index: 0,
              teXHTML: teXHTML,
              onRenderFinished: (height) {
                print("Height is : $height");
              },
              onPageFinished: (string) {
                print("Page Loading finished");
              },
            ),
            Container(color: Colors.pink, height: 10.0, width: double.infinity,)
          ],
        ),
      ),
    );

teXHTML.dart

String teXHTML = r"""
     
     <style>
       .card {
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         transition: 0.3s;
         width: 200;
         font-size:4.2vw;
          color:red;
          background-color:yellow;
       }
     </style>

    <div class="card">1</div>
   """;

And it comes to this :

Also I found that there was another space appear when I added a new line ;

String teXHTML = r"""
     
     <style>
       .card {
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         transition: 0.3s;
         width: 200;
         font-size:4.2vw;
          color:red;
          background-color:yellow;
       }
     </style>

    <div class="card">1</div>
    <div class="card">2</div>
   """;

How can i hide this space?

config:

environment:
  sdk: ">=2.2.0 <3.0.0"

dependencies:
  json_annotation: ^2.0.0
  toast: ^0.1.3
  dio: ^2.1.0
  flutter_tex: ^1.0.3
  flutter:
    sdk: flutter

I experienced this issue when running my working app (for mobile phones) on a pixel C tablet simulator.

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: PlatformException(error, Unable to add window android.view.ViewRootImpl$W@bfe683a -- the specified display can not be found, null)
E/flutter (26142): #0 (:569)
E/flutter (26142): #1 MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:156)
E/flutter (26142):
E/flutter (26142): #2 AndroidViewController.setSize (package:flutter/src/services/platform_views.dart:552)
E/flutter (26142):
E/flutter (26142): #3 RenderAndroidView._sizePlatformView (package:flutter/src/rendering/platform_view.dart:175)
E/flutter (26142):

Hi, nice work with this package. I wanted to know though - why are internet and network access permissions needed? I have created an app that works fine without these permissions.

When trying to compile the example, I got a "page not found error because net:: ERR_CLEARTEXT_NOT_PERMITTED"
I am using latest version of flutter to the date of writing this text on a android 9 device.

URL: https://pub.dev/packages/flutter_tex

Hi,
I am not able to make text(latex) clickable for my quiz to submit the correct answer.
Thanks in Advance!!!

Dear @shah-xad , i look into the new update. that's very great. you provide so many new properties. but I wondering, If i give the margin for my TexView, how to create the outside margin transparent, or like I rounded my TexView corner like a cardview bur the outside corner still with white color. how to fix it, any idea?

After upgrading the package, all the equations are not getting rendered in the release version of the app. They were rendering before the upgrade. Most equations render, while for others, the progress indicator is shown and rendering does not take place, whether there are few or many equations. I was also wondering what is the maximum number of equations you recommend that should be in a given screen. Thanks.

Following is my code which isn't rending and neither is throwing any error

             TeXView(
                        renderingEngine: TeXViewRenderingEngine.katex(),
                        children: [
                          TeXViewContainer(id: "container_0", children: [
                            TeXViewTeX(
                              '<span>There are 150 objective multiple choice questions in this paper. This Question Booklet is made up of the following five sections : Section-I, 11, 111, IV &amp; V of 30-30 questions each. The candidate has to attempt all sections. Each question is of one mark. There is no negative marking for wrong answer</span>',
                              style: TeXViewStyle(
                                textAlign: TeXViewTextAlign.Center,
                                // backgroundColor: Colors.red,
                                contentColor: Colors.black,
                              ),
                              id: "tex_0",
                            )
                          ])
                        ],
                      ),

Just tried simple <p>hello there</p>. it worked and rendered but not the above string
Please help.
Thanks

I'm adding interactivity to some parts of the webview that adds a border and background color to a TeXViewChild. However, changing the style of a TeXViewChild also causes the entire webview to refresh.

Is there a way around this?

I'm getting the following error:

[INFO:CONSOLE(49)] "Uncaught TypeError: Cannot read property 'get' of undefined", source: http://localhost:8080/packages/flutter_tex/MathJax/index.html?data=%0A%20%20%3Cp%3E%0A%0A%20%20%20%20A%20simple%20Example%20to%20render%20%5C(%20%5Crm%5C%5CTeX%20%5C)%20in%20flutter%3Cbr%3E%0A%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.card%20%7B%0A%20%20%20%20%20%20%20%20

If I run on physical device I don't receive that error.

I also receive the following message after the main error:

W/art ( 1753): Attempt to remove non-JNI local reference, dumping thread

Flutter 1.2.0
Genymotion Google Nexus 5 - Android API 6.0

Hi, @shah-xad. I use your package to render MathJax syntax. it's so useful, but it's possible to make the background transparent or change the color background (currently only white)?
actually I just need the text only without white background like Text Widget.

Hey @shah-xad , i don't know why my syntax mathjax can be loaded again in this new package version (^3.6.1+2).

i guess this because my syntax contains a link, for example:

"""<p>Hvilke af følgende hører til de naturlige tal (betegnet&nbsp;<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mi mathvariant="normal">ℕ</mi><annotation encoding="application/vnd.wiris.mtweb-params+json">{"autoformat":true}</annotation></semantics></math>)?</p>"""

but my other syntax that does not contain link is working fine.

and all my syntax in version ^3.6.1+3 is not working anymore. this is I get in the console:

path: satisfied (Path is satisfied), interface: en0
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: PlatformException(loadUrl_failed, Failed parsing the URL, Request was: '{
    headers = "<null>";
    url = "http://localhost:5353/packages/flutter_tex/src/flutter_tex_libs/katex/index.html?teXViewServerPort=5353&viewInstanceCount=6&configurations=\"{}\"&urlRawTeXHTML=%7B%22children%22%3A%5B%7B%22id%22%3Anull%2C%22children%22%3A%5B%7B%22id%22%3Anull%2C%22data%22%3A%22%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EHvilke%20af%20f%C3%B8lgende%20h%C3%B8rer%20til%20de%20naturlige%20tal%20(betegnet%26nbsp%3B%3Cmath%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F1998%2FMath%2FMathML%5C%22%3E%3Csemantics%3E%3Cmi%20mathvariant%3D%5C%22normal%5C%22%3E%E2%84%95%3C%2Fmi%3E%3Cannotation%20encoding%3D%5C%22application%2Fvnd.wiris.mtweb-params%2Bjson%5C%22%3E%7B%5C%22autoformat%5C%22%3Atrue%7D%3C%2Fannotation%3E%3C%2Fsemantics%3E%3C%2Fmath%3E)%3F%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%2C%22style%22%3A%22font-size%3A%202<…>
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: PlatformException(loadUrl_failed, Failed parsing the URL, Request was: '{
    headers = "<null>";
    url = "http://localhost:5354/packages/flutter_tex/src/flutter_tex_libs/katex/index.html?teXViewServerPort=5354&viewInstanceCount=6&configurations=\"{}\"&urlRawTeXHTML=%7B%22children%22%3A%5B%7B%22id%22%3A%22container_0%22%2C%22children%22%3A%5B%7B%22id%22%3Anull%2C%22data%22%3A%22%3Cp%3E%3Cmath%3E%3Cmrow%3E%3Cmo%3E-%3C%2Fmo%3E%3Cmn%3E692%3C%2Fmn%3E%3C%2Fmrow%3E%3C%2Fmath%3E%3C%2Fp%3E%22%2C%22style%22%3A%22color%3A%20rgba(0%2C%200%2C%200%2C%20255)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3Btext-align%3A%20center%3B%22%7D%5D%2C%22style%22%3Anull%7D%5D%2C%22style%22%3A%22padding%3A%2010px%3Bheight%3A%20100px%3Bbox-shadow%3A%200%2010px%2010px%200%20rgba(0%2C0%2C0%2C0.2)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3B%22%7D";
}')
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs<…>
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: PlatformException(loadUrl_failed, Failed parsing the URL, Request was: '{
    headers = "<null>";
    url = "http://localhost:5355/packages/flutter_tex/src/flutter_tex_libs/katex/index.html?teXViewServerPort=5355&viewInstanceCount=6&configurations=\"{}\"&urlRawTeXHTML=%7B%22children%22%3A%5B%7B%22id%22%3A%22container_0%22%2C%22children%22%3A%5B%7B%22id%22%3Anull%2C%22data%22%3A%22%3Cp%3E%3Cmath%3E%3Cmrow%3E%3Cmfrac%3E%3Cmn%3E135%3C%2Fmn%3E%3Cmn%3E88%3C%2Fmn%3E%3C%2Fmfrac%3E%3C%2Fmrow%3E%3C%2Fmath%3E%3C%2Fp%3E%22%2C%22style%22%3A%22color%3A%20rgba(0%2C%200%2C%200%2C%20255)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3Btext-align%3A%20center%3B%22%7D%5D%2C%22style%22%3Anull%7D%5D%2C%22style%22%3A%22padding%3A%2010px%3Bheight%3A%20100px%3Bbox-shadow%3A%200%2010px%2010px%200%20rgba(0%2C0%2C0%2C0.2)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3B%22%7D";
}')
#0      StandardMethodCodec.decodeEnvelope (package:flutter/s<…>
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: PlatformException(loadUrl_failed, Failed parsing the URL, Request was: '{
    headers = "<null>";
    url = "http://localhost:5356/packages/flutter_tex/src/flutter_tex_libs/katex/index.html?teXViewServerPort=5356&viewInstanceCount=6&configurations=\"{}\"&urlRawTeXHTML=%7B%22children%22%3A%5B%7B%22id%22%3A%22container_0%22%2C%22children%22%3A%5B%7B%22id%22%3Anull%2C%22data%22%3A%22%3Cp%3E%3Cmath%3E%3Cmrow%3E%3Cmn%3E263%3C%2Fmn%3E%3C%2Fmrow%3E%3C%2Fmath%3E%3C%2Fp%3E%22%2C%22style%22%3A%22color%3A%20rgba(0%2C%200%2C%200%2C%20255)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3Btext-align%3A%20center%3B%22%7D%5D%2C%22style%22%3Anull%7D%5D%2C%22style%22%3A%22padding%3A%2010px%3Bheight%3A%20100px%3Bbox-shadow%3A%200%2010px%2010px%200%20rgba(0%2C0%2C0%2C0.2)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3B%22%7D";
}')
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:569:7)
#1     <…>
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: PlatformException(loadUrl_failed, Failed parsing the URL, Request was: '{
    headers = "<null>";
    url = "http://localhost:5357/packages/flutter_tex/src/flutter_tex_libs/katex/index.html?teXViewServerPort=5357&viewInstanceCount=6&configurations=\"{}\"&urlRawTeXHTML=%7B%22children%22%3A%5B%7B%22id%22%3A%22container_0%22%2C%22children%22%3A%5B%7B%22id%22%3Anull%2C%22data%22%3A%22%3Cp%3EIngen%3C%2Fp%3E%22%2C%22style%22%3A%22color%3A%20rgba(0%2C%200%2C%200%2C%20255)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3Btext-align%3A%20center%3B%22%7D%5D%2C%22style%22%3Anull%7D%5D%2C%22style%22%3A%22padding%3A%2010px%3Bheight%3A%20100px%3Bbox-shadow%3A%200%2010px%2010px%200%20rgba(0%2C0%2C0%2C0.2)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3B%22%7D";
}')
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:569:7)
#1      MethodChannel.invokeMethod (package:flutter/src/services/platf<…>
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: PlatformException(loadUrl_failed, Failed parsing the URL, Request was: '{
    headers = "<null>";
    url = "http://localhost:5358/packages/flutter_tex/src/flutter_tex_libs/katex/index.html?teXViewServerPort=5358&viewInstanceCount=6&configurations=\"{}\"&urlRawTeXHTML=%7B%22children%22%3A%5B%7B%22id%22%3A%22container_0%22%2C%22children%22%3A%5B%7B%22id%22%3Anull%2C%22data%22%3A%22%3Cp%3E%3Cmath%3E%3Cmrow%3E%3Cmi%20mathvariant%3D%5C%22normal%5C%22%3E%26%23960%3B%3C%2Fmi%3E%3C%2Fmrow%3E%3C%2Fmath%3E%3C%2Fp%3E%22%2C%22style%22%3A%22color%3A%20rgba(0%2C%200%2C%200%2C%20255)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3Btext-align%3A%20center%3B%22%7D%5D%2C%22style%22%3Anull%7D%5D%2C%22style%22%3A%22padding%3A%2010px%3Bheight%3A%20100px%3Bbox-shadow%3A%200%2010px%2010px%200%20rgba(0%2C0%2C0%2C0.2)%3Bbackground-color%3A%20rgba(255%2C%20255%2C%20255%2C%20255)%3B%22%7D";
}')
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src<…>

When the app starts, first the raw text is displayed for a fraction of a second and then it renders the equations, this looks really bad, how can I prevent this? also, it takes 1.5-2 seconds after the app has already loaded, making this unusable for a menu based application where the user will have to wait this time many times throughout their session.

`Launching lib/main.dart on Android SDK built for x86 in debug mode...
Built build/app/outputs/apk/debug/app-debug.apk.
I/flutter ( 5185): Server running on http://localhost:8080
D/ ( 5185): HostConnection::get() New Host Connection established 0xd10ff280, tid 5400
D/ ( 5185): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_dma_v1 GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_3_0
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf102a0: ver 3 0 (tinfo 0xe1151f70)
Flutter is taking longer than expected to report its views. Still trying...
D/ ( 5185): HostConnection::get() New Host Connection established 0xe5b159c0, tid 5511
D/ ( 5185): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_dma_v1 GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_3_0
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf11140: ver 3 0 (tinfo 0xe5b00570)
I/Choreographer( 5185): Skipped 1210 frames! The application may be doing too much work on its main thread.
I/le.mathjax_dem( 5185): NativeAlloc concurrent copying GC freed 2518(228KB) AllocSpace objects, 3(60KB) LOS objects, 57% free, 1146KB/2682KB, paused 823us total 353.286ms
D/EGL_emulation( 5185): eglCreateContext: 0xecf11800: maj 3 min 0 rcv 3
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf11800: ver 3 0 (tinfo 0xecfda6b0)
I/Choreographer( 5185): Skipped 50 frames! The application may be doing too much work on its main thread.
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf10000: ver 3 0 (tinfo 0xd11c12c0)
I/OpenGLRenderer( 5185): Davey! duration=911ms; Flags=1, IntendedVsync=352978199753, Vsync=353811533053, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=353813616000, AnimationStart=353813686000, PerformTraversalsStart=353813753000, DrawStart=353831606000, SyncQueued=353832993000, SyncStart=353834079000, IssueDrawCommandsStart=353834299000, SwapBuffers=353868569000, FrameCompleted=353891249000, DequeueBufferDuration=8728000, QueueBufferDuration=272000,
I/flutter ( 5185): Server running on http://localhost:8080
W/Gralloc3( 5185): allocator 3.x is not supported
D/ ( 5185): HostConnection::get() New Host Connection established 0xe11b9dc0, tid 5202
D/ ( 5185): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_dma_v1 GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_3_0
D/ ( 5185): HostConnection::get() New Host Connection established 0xe5b152c0, tid 5203
D/ ( 5185): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_dma_v1 GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_3_0
I/WebViewFactory( 5185): Loading com.google.android.webview version 73.0.3683.20 (code 368302018)
I/le.mathjax_dem( 5185): The ClassLoaderContext is a special shared library.
I/le.mathjax_dem( 5185): The ClassLoaderContext is a special shared library.
I/cr_LibraryLoader( 5185): Time to load native libraries: 2 ms (timestamps 8155-8157)
I/chromium( 5185): [INFO:library_loader_hooks.cc(50)] Chromium logging enabled: level = 0, default verbosity = 0
I/cr_LibraryLoader( 5185): Expected native library version number "73.0.3683.20", actual native library version number "73.0.3683.20"
W/cr_ChildProcLH( 5185): Create a new ChildConnectionAllocator with package name = com.google.android.webview, sandboxed = true
I/cr_BrowserStartup( 5185): Initializing chromium process, singleProcess=false
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/content/Context;->bindServiceAsUser(Landroid/content/Intent;Landroid/content/ServiceConnection;ILandroid/os/Handler;Landroid/os/UserHandle;)Z (greylist, reflection)
E/chromium( 5185): [ERROR:filesystem_posix.cc(89)] stat /data/user/0/com.example.mathjax_demo/cache/WebView/Crashpad: No such file or directory (2)
E/chromium( 5185): [ERROR:filesystem_posix.cc(62)] mkdir /data/user/0/com.example.mathjax_demo/cache/WebView/Crashpad: No such file or directory (2)
D/ ( 5185): HostConnection::get() New Host Connection established 0xce0773c0, tid 5510
D/ ( 5185): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_dma_v1 GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_3_0
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf11800: ver 3 0 (tinfo 0xd11c1890)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker;->(Landroid/content/Context;I)V (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker;->logEvent(Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;)V (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionStarted(I)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(II)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextClassification;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionModified(IILandroid/view/textclassifier/TextSelection;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(III)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (greylist, reflection)
W/le.mathjax_dem( 5185): Accessing hidden method Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent;->selectionAction(IIILandroid/view/textclassifier/TextClassification;)Landroid/view/textclassifier/logging/SmartSelectionEventTracker$SelectionEvent; (greylist, reflection)
W/cr_media( 5185): Requires BLUETOOTH permission
D/EGL_emulation( 5185): eglCreateContext: 0xc852db00: maj 3 min 0 rcv 3
D/EGL_emulation( 5185): eglMakeCurrent: 0xc852db00: ver 3 0 (tinfo 0xecfda6b0)
D/ ( 5185): HostConnection::get() New Host Connection established 0xe5b19480, tid 5586
D/ ( 5185): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_dma_v1 GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_gles_max_version_3_0
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf10000: ver 3 0 (tinfo 0xd11c12c0)
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf10000: ver 3 0 (tinfo 0xd11c12c0)
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf10000: ver 3 0 (tinfo 0xd11c12c0)
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf10000: ver 3 0 (tinfo 0xd11c12c0)
D/NetworkSecurityConfig( 5185): No Network Security Config specified, using platform default
I/VideoCapabilities( 5185): Unsupported profile 4 for video/mp4v-es
W/cr_MediaCodecUtil( 5185): HW encoder for video/avc is not available on this device.
D/EGL_emulation( 5185): eglMakeCurrent: 0xecf10000: ver 3 0 (tinfo 0xd11c12c0)
D/EGL_emulation( 5185): eglCreateContext: 0xe5b01240: maj 3 min 0 rcv 3
D/EGL_emulation( 5185): eglMakeCurrent: 0xe5b01240: ver 3 0 (tinfo 0xe5b00a70)
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef
E/eglCodecCommon( 5185): glUtilsParamSize: unknow param 0x000088ef

`

in ios
`Launching lib/main.dart on iPhone X in debug mode...
Xcode build done. 9.5s
flutter: Server running on http://localhost:8080
[VERBOSE-2:platform_view_layer.cc(19)] Trying to embed a platform view but the PrerollContext does not support embedding
[VERBOSE-2:platform_view_layer.cc(28)] Trying to embed a platform view but the PaintContext does not support embedding
[VERBOSE-2:platform_view_layer.cc(19)] Trying to embed a platform view but the PrerollContext does not support embedding
[VERBOSE-2:platform_view_layer.cc(28)] Trying to embed a platform view but the PaintContext does not support embedding

`

I attempted to place a TexView inside a StreamBuilder that passes some text to be displayed.
The TexView stays unchanged.

Is there a correct way to re-render it?

Is there any possibility to save formulas as an image, because I would like to use them in a PDF file. I want to output formulas rendered with your flutter_tex plugin in a PDF file using flutters pdf plugin.

Hi @shah-xad , is there a way I can remove the onTap touch effect if I'm not using the onTap property? Thanks!

Inside web_tex_view.dart in the _getTeXViewUrl in the return statement when you are forming the URL,
query parameter rawTeXHTML should named urlRawTeXHTML.

It is being accessed as urlRawTeXHTML inside flutter_tex.js

Hi,
first thank you for this but unfortunately the example doesn't work.

Virtual Device:
3.7"
480x854
API 21 Android 5.0

Issue:
The screen below the Appbar is empty.

Logs:

W/PlatformViewsController( 3279): Creating a virtual display of size: [480, 1172] may result in problems(https://github.com/flutter/flutter/issues/2897).It is larger than the device screen size: [480, 854].

 Hi,
My app works perfectly fine on the simulator, and on-device, it builds in xcode, and archives properly too. Once the build is successfully uploaded to app store connect, I received an email that contains this issue, and the build was blocked after being uploaded and processed by apples servers. I cannot gaurentee this is an issue with this package specifically, because I have no output from them, but I suspect it might be, any usage of "UIWebView" after April 30, 2020 are being blocked -Thanks.
"Dear Developer,
We identified one or more issues with a recent delivery for your app, "Please correct the following issues, then upload again. ITMS-90809: Deprecated API Usage - New apps that use UIWebView are no longer accepted. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview)."

The library currently doesnt' render the inline equation:

$a+b=c$

This probably because of older version of MathJax. Related to mathjax/MathJax#2256

Poor performance inside list.builder.