Rendering Error in list

[dhirajnikam]

It work fine the very first time app is installed then it's start showing errors in Android only

[amake]

Thanks for the report.

Could you give me more information about the Android device where you see this problem? What brand? OS version? Does the issue happen on other devices? On the Android emulator?

The easiest way for me to figure this out is if you can provide a minimum code snippet that reproduces the problem. For instance the main.dart from a new Flutter app template where you have replaced the app content with just enough to trigger the problem.

[dhirajnikam]

This issue is only face on physical Android devices run across multiple devices with different configuration same issue
In emulator it works fine

[dhirajnikam]

import 'package:flutter_tex_js/flutter_tex_js.dart'; 
  
 class KatLatex extends StatefulWidget { 
   const KatLatex({ 
     Key? key, 
     required this.laTeXCode, 
     this.textStyle, 
     this.delimiter = r'$', 
     this.displayDelimiter = r'$$', 
   }) : super(key: key); 
   // a Text used for the rendered code as well as for the style 
   final Text laTeXCode; 
  
   final TextStyle? textStyle; 
  
   // The delimiter to be used for inline LaTeX 
   final String delimiter; 
  
   // The delimiter to be used for Display (centered, "important") LaTeX 
   final String displayDelimiter; 
  
   @override 
   State<KatLatex> createState() => _KatLatexState(); 
 } 
  
 class _KatLatexState extends State<KatLatex> { 
   @override 
   Widget build(BuildContext context) { 
     // Fetching the Widget's LaTeX code as well as it's [TextStyle] 
     final String? laTeXCode = widget.laTeXCode.data; 
     TextStyle? defaultTextStyle = widget.laTeXCode.style; 
  
     // Building [RegExp] to find any Math part of the LaTeX code by looking for the specified delimiters 
     final String delimiter = widget.delimiter.replaceAll(r'$', r'\$'); 
     final String displayDelimiter = 
         widget.displayDelimiter.replaceAll(r'$', r'\$'); 
  
     final String rawRegExp = 
         '(($delimiter)([^$delimiter]*[^\\\\\\$delimiter])($delimiter)|($displayDelimiter)([^$displayDelimiter]*[^\\\\\\$displayDelimiter])($displayDelimiter))'; 
     List<RegExpMatch> matches = 
         RegExp(rawRegExp, dotAll: true).allMatches(laTeXCode!).toList(); 
  
     // If no single Math part found, returning the raw [Text] from widget.laTeXCode 
     if (matches.isEmpty) return widget.laTeXCode; 
  
     // Otherwise looping threw all matches and building a [RichText] from [TextSpan] and [WidgetSpan] widgets 
     List<InlineSpan> textBlocks = []; 
     int lastTextEnd = 0; 
  
     for (var laTeXMatch in matches) { 
       // If there is an offset between the lat match (beginning of the [String] in first case), first adding the found [Text] 
  
       if (laTeXMatch.start > lastTextEnd) { 
         textBlocks.add( 
             TextSpan(text: laTeXCode.substring(lastTextEnd, laTeXMatch.start))); 
       } 
       // Adding the [CaTeX] widget to the children 
       if (laTeXMatch.group(3) != null) { 
         textBlocks.add(WidgetSpan( 
             alignment: PlaceholderAlignment.middle, 
             child: TexImage( 
               laTeXMatch.group(3)!.trim(), 
               // textStyle: widget.textStyle == null 
               //     ? TextStyle( 
               //         // color: Colors.black, 
               //         fontSize: laTeXMatch.group(3)!.length > 90 ? 12 : 20) 
               //     : widget.textStyle, 
             ))); 
       } else { 
         textBlocks.addAll([ 
           const TextSpan(text: '\n'), 
           WidgetSpan( 
               alignment: PlaceholderAlignment.middle, 
               child: DefaultTextStyle.merge( 
                 child: Padding( 
                   padding: const EdgeInsets.all(1.0), 
                   child: TexImage(laTeXMatch.group(6)!.trim()), 
                 ), 
               )), 
           const TextSpan(text: '\n') 
         ]); 
       } 
       lastTextEnd = laTeXMatch.end; 
     } 
  
     // If there is any text left after the end of the last match, adding it to children 
     if (lastTextEnd < laTeXCode.length) { 
       textBlocks.add(TextSpan(text: laTeXCode.substring(lastTextEnd))); 
     } 
  
     // Returning a RichText containing all the [TextSpan] and [WidgetSpan] created previously while 
     // obeying the specified style in widget.laTeXCode 
     return Text.rich(TextSpan( 
         children: textBlocks, 
         style: (defaultTextStyle == null) 
             ? Theme.of(context).textTheme.bodyText1 
             : defaultTextStyle)); 
   } 
 }

[amake]

I have managed to reproduce this even with the flutter_tex_js example app.

I'm not yet sure what the cause is or how to fix it.

[amake]

It seems that on Android after executing katex.render it takes a certain amount of time for the captured bitmap to reflect the new content. Thus in some cases subsequent render requests can return the same content as the previous render.

I noticed that it seems to happen most when the dimensions of the content are unchanged between requests, so content with math of varying sizes is less likely to see this problem.

I couldn't find any way to determine programmatically whether the WebView has completed updating the rendering. The only solution I could think of was to retain the previous rendered bytes, and then retry the capture if the bytes are unchanged on the next request. This reduces performance (increases time required to render) but I figure that's better than producing incorrect results.

I've published v1.0.9 of flutter_tex_js_android with a fix. Please try it and see if the problem is resolved.

Also note that iOS does not seem to have this problem.