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, ), ) ], ), ],

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.

Hi @shah-xad, I'm facing a problem when I want to display only one TeXViewContainer in children. when I make the children are two TeXViewContainer, the widget appears smooth.

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

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.

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.

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

@shah-xad First of all Thank you very much for developing this amazing Flutter package. Also, sorry for asking this as an issue,

I've implemented a quiz view using flutter_tex and all the things are working very well as I expected. But, unfortunately, I'm a little bit stuck on my one of a task. What I want to do actually When the user clicks a TeXViewInkwell, automatically check a Radio Button which is in TeXViewDocument as the child of above mentioned TeXViewInkWell.

The onTap function of parent TeXtView working fine. But how can I check a RadioButton? definitely there must be a bunch of JavaScript code. So could you give me a little help? Please refer my following code.

  Widget getQuestionView(){
    String _imageUrl="";

    return Container(
      decoration: new BoxDecoration(
        image: DecorationImage(
          image: new ExactAssetImage('assets/images/main_background.png'),
          fit: BoxFit.cover,
        ),
      ),
      child: Column(
        children: <Widget>[
          getAppBarUI(),
          Expanded(
            flex: 8,
            child: SingleChildScrollView(
              child: FutureBuilder(
                future: questionList,
                builder:
                    (BuildContext context, AsyncSnapshot<List<Question>> snapshot) {
                  switch (snapshot.connectionState) {
                    case ConnectionState.waiting:
                      return Center(
                          child: Lottie.asset('assets/animations/dotloading.json'));
                    case ConnectionState.done:
                      if (snapshot.hasData && snapshot.data.length != 0) {
                        question = snapshot.data;
                        if(question[_currentIndex].imageUrl != null){
                          _imageUrl  = question[_currentIndex].imageUrl;
                        }
                        return Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Column(
                            children: <Widget>[
                              TeXView(
                                  showLoadingWidget: false,
                                  renderingEngine: TeXViewRenderingEngine.katex(),
                                  children: [
                                    TeXViewDocument(question[_currentIndex].question,
                                        style: TeXViewStyle.fromCSS("color:black;background-color:white;padding:20px"),
                                    ),
                                  ],
                                  style: TeXViewStyle(
                                    margin: TeXViewMargin.all(0),
                                    elevation: 0,
                                    textAlign: TeXViewTextAlign.Left,
                                    padding: TeXViewPadding.all(0),
                                    borderRadius: TeXViewBorderRadius.all(0),
                                    backgroundColor: Colors.transparent,
                                  ),
                                  onTap: (childID) {
                                  }),
                              question[_currentIndex].imageStatus == 1 ? Image.network(question[_currentIndex].imageUrl,width: 300) : Container(),
                              TeXView(
                                  showLoadingWidget: false,
                                  renderingEngine: TeXViewRenderingEngine.katex(),
                                  children: [
                                    TeXViewInkWell(
                                      id: "1",
                                      child: TeXViewDocument(
                                        "<input type='radio' id='answerA' name='answersRadio' value='1' style='margin-right:15px'>" + question[_currentIndex].answerA,
                                        style: TeXViewStyle.fromCSS(
                                            "color:black;background-color:white;padding:20px"),
                                      ),
                                    ),
                                    TeXViewInkWell(
                                      id: "2",
                                      child: TeXViewDocument(
                                        "<input type='radio' id='answerB' name='answersRadio' value='2' style='margin-right:15px'>" + question[_currentIndex].answerB,
                                        style: TeXViewStyle.fromCSS(
                                            "color:black;background-color:white;padding:20px"),
                                      ),
                                    ),
                                    TeXViewInkWell(
                                      id: "3",
                                      child: TeXViewDocument(
                                        "<input type='radio' id='answerC' name='answersRadio' value='3' style='margin-right:15px'>" + question[_currentIndex].answerC,
                                        style: TeXViewStyle.fromCSS(
                                            "color:black;background-color:white;padding:20px"),
                                      ),
                                    ),
                                    TeXViewInkWell(
                                      id: "4",
                                      child: TeXViewDocument(
                                        "<input type='radio' id='answerD' name='answersRadio' value='4' style='margin-right:15px'>" + question[_currentIndex].answerD,
                                        style: TeXViewStyle.fromCSS(
                                            "color:black;background-color:white;padding:20px"),
                                      ),
                                    ),
                                    TeXViewInkWell(
                                      id: "5",
                                      child: TeXViewDocument(
                                        "<input type='radio' id='answerE' name='answersRadio' value='5' style='margin-right:15px'>" + question[_currentIndex].answerE,
                                        style: TeXViewStyle.fromCSS(
                                            "color:black;background-color:white;padding:20px"),
                                      ),
                                    ),
                                  ],
                                  style: TeXViewStyle(
                                    margin: TeXViewMargin.all(0),
                                    elevation: 0,
                                    textAlign: TeXViewTextAlign.Left,
                                    padding: TeXViewPadding.all(0),
                                    borderRadius: TeXViewBorderRadius.all(0),
                                    backgroundColor: Colors.transparent,
                                  ),
                                  onTap: (childID) {
                                    setState(() {
                                      print("TeXView $childID is tapped.");
                                    });
                                  }),
                            ],
                          ),
                        );
                      } else {
                        return Container();
                      }
                      break;
                    default:
                      return Container(); // also check your listWidget(snapshot) as it may return null.
                  }
                },
              )
              ,
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(bottom: 10),
              child: Container(
                alignment: Alignment.bottomCenter,
                child: RaisedButton(
                  child: Text(
                      question != null ? _currentIndex == (question.length - 1)
                          ? "Submit"
                          : "Next" : "Next"),
                  onPressed: (){
                    _nextSubmit();
                  },
                ),
              ),
            ),
          )

        ],
      ),
    );
  }

Current Implemented Screen

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

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>
   """;

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?

Question: Are you using the latest version of flutter_tex package? Answer:Yes

Question: If you are looking for a feature, have you watched the Demo Video and gone through the examples folder? Answer:Yes In TeXViewGroup how can I deselect the question, there is an option to deselect the option in TeXViewGroup.multipleSelection but in single mode how can the user deselect the selected option. Further if the user revisits the attempted question, the marked option is deselected again. Is there a function present which enables us to initialise and select the option when loading a previously attempted questions and apply the selectedItemStyle on that particular option.

I have tried setting `selectedOptionId = "" ; but it doesn't refresh the style accordingly. If the user revisits a question, we can store the responses in the list and when a previously attempted question is opened there should be an option to take the selected items from the list. How can we achieve this functionality?

Hi, Upon installing the new version on Flutter using flutter pub add flutter_tex I get the following notice: The plugin flutter_tex uses a deprecated version of the Android embedding. To avoid unexpected runtime failures, or future build failures, try to see if this plugin supports the Android V2 embedding. Otherwise, consider
removing it since a future release of Flutter will remove these deprecated APIs. If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.

Is it possible to migrate the plugin to the V2 embedding? Thanks, Oren

TeX's input only takes const String, but my string comes from an API call on my backend, and it does not render the raw string, it just display it raw.

Question: Are you using the latest version of flutter_tex package? Answer: yes

Question: If you are looking for a feature, have you watched the Demo Video and gone through the examples folder? Answer: yes

Question: Are you using the latest version of flutter_tex package? yes:

Question: If you are looking for a feature, have you watched the Demo Video and gone through the examples folder? Yes:

I have downloaded image to device, how to show it using flutter_tex.TeXViewImage Currently, it supports only two options TeXViewImage.asset TeXViewImage.network