Flutter TeXView (webview) 无法在 android 模拟器上呈现

Question

所以我正在尝试在 flutter 中呈现数学公式。我正在尝试使用 flutter_tex

我按照 github 中的说明安装了 flutter_tex 包，但是如果我想呈现一个公式（如示例中所示），我会收到该错误消息：

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)

所以应用程序启动了，但它没有呈现数学公式。我只是在屏幕截图中看到一条绿线。

我认为，这不是 flutter_tex 的特别问题，而是我的模拟器和 webview 包（它是 flutter_tex 的依赖项）的问题。可以吗？

有人可以帮我解决这个问题吗？我真的很感激！

亲切的问候

Answer 1

我试过了，没问题，我觉得不是模拟器的问题。

请确保分别为 Android、iOS 和 Web 添加上述实现。

示例：Android 确保将此行添加到您的 /android/app/src/main/AndroidManifest.xml under application.

   android:usesCleartextTraffic="true"

它完全离线工作，无需互联网连接，但这些是正常工作所需的权限：

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

这是主文件的代码片段

  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

Flutter TeXView (webview) 无法在 android 模拟器上呈现

Flutter TeXView (webview) not rendering on android emulator

android

flutter

flutter-tex