Flutter TeXView (webview) not rendering on android emulator

Question

so I am trying to render math formulas in flutter. I am trying to do it with flutter_tex

https://github.com/shah-xad/flutter_tex

I installed the flutter_tex package as explained on the github, but if I want to render a formula (like in the example), I get that error message:

Running Gradle task 'assembleDebug'...
√ Built build\app\outputs\flutter-apk\app-debug.apk.
Debug service listening on ws://127.0.0.1:61522/yKuvN_yRn7E=/ws
Syncing files to device sdk gphone x86 arm...
I/WebViewFactory( 7484): Loading com.google.android.webview version 83.0.4103.106 (code 410410681)
I/e.flut_tex_tes( 7484): The ClassLoaderContext is a special shared library.
D/nativeloader( 7484): classloader namespace configured for unbundled product apk. library_path=/product/app/WebViewGoogle/lib/x86:/product/app/WebViewGoogle/WebViewGoogle.apk!/lib/x86:/product/app/TrichromeLibrary/TrichromeLibrary.apk!/lib/x86:/product/lib:/system/product/lib
W/Gralloc4( 7484): allocator 3.x is not supported
I/e.flut_tex_tes( 7484): The ClassLoaderContext is a special shared library.
D/nativeloader( 7484): classloader namespace configured for unbundled product apk. library_path=/product/app/WebViewGoogle/lib/x86:/product/app/WebViewGoogle/WebViewGoogle.apk!/lib/x86:/product/app/TrichromeLibrary/TrichromeLibrary.apk!/lib/x86:/product/lib:/system/product/lib
I/cr_LibraryLoader( 7484): Loaded native library version number "83.0.4103.106"
I/cr_CachingUmaRecorder( 7484): Flushed 3 samples from 3 histograms.
I/cr_VariationsUtils( 7484): Requesting new seed from IVariationsSeedServer
I/TetheringManager( 7484): registerTetheringEventCallback:com.example.flut_tex_test
W/e.flut_tex_tes( 7484): Accessing hidden method Landroid/media/AudioManager;->getOutputLatency(I)I (greylist, reflection, allowed)
D/HostConnection( 7484): HostConnection::get() New Host Connection established 0xf5d92060, tid 7600
W/cr_media( 7484): Requires BLUETOOTH permission
D/HostConnection( 7484): HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_YUV_Cache ANDROID_EMU_async_unmap_buffer ANDROID_EMU_sync_buffer_data GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_async_frame_commands ANDROID_EMU_gles_max_version_2 
E/chromium( 7484): [ERROR:gl_surface_egl.cc(549)] eglChooseConfig failed with error EGL_SUCCESS
D/EGL_emulation( 7484): eglCreateContext: 0xf5d93090: maj 2 min 0 rcv 2
D/EGL_emulation( 7484): eglMakeCurrent: 0xf5d93090: ver 2 0 (tinfo 0xbaba80d0) (first time)
I/e.flut_tex_tes( 7484): Waiting for a blocking GC ProfileSaver
E/chromium( 7484): [ERROR:gl_surface_egl.cc(549)] eglChooseConfig failed with error EGL_SUCCESS
I/VideoCapabilities( 7484): Unsupported profile 4 for video/mp4v-es
W/cr_MediaCodecUtil( 7484): HW encoder for video/avc is not available on this device.
D/EGL_emulation( 7484): eglCreateContext: 0xf5d9aa30: maj 2 min 0 rcv 2
I/chromium( 7484): [INFO:CONSOLE(1)] "Uncaught ReferenceError: initView is not defined", source: chrome-error://chromewebdata/ (1)

So the App starts, but it's not rendering the math formula. I just see a green line like in the screenshot.

I think, that it's not especially a problem of flutter_tex, but a problem with my emulator and the webview package (which is dependency of flutter_tex). Could it be?

Could someone please help me with that problem? I would be really thankfull for it!

Kind regards

Answer 1

I tried it out and it is working fine, I dont think the problem with emulator.

Please make sure to add the mentioned implementations for Android, iOS, and Web respectively.

Example: Android Make sure to add this line in your /android/app/src/main/AndroidManifest.xml under application.

   android:usesCleartextTraffic="true" 

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

Here is a snippet of the code for the main file

  return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: ListView(
    physics: ScrollPhysics(),
    children: <Widget>[
      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/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,
        ),
      ),

      // Text(
      //   'You have pushed the button this many times:',
      // ),
      // Text(
      //   '$_counter',
      //   style: Theme.of(context).textTheme.headline4,
      // ),
    ],
  ),

flutter dart flutter-tex android