web-dev-qa-db-ja.com

Flutterで数式（TeX）を適切に実装する方法

Flutter TeXパッケージを使用して、フラッターアプリケーションに数式を実装しようとしました。方程式のレンダリングには時間がかかります。思ったほど美しくありません。設計を損なうことなく数学の化学やその他の複雑な形式の方程式を効果的に使用するための実装は他にありますか？.

これが私のコードです：

import 'package:flutter/material.Dart';
import 'package:flutter_tex/flutter_tex.Dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body:TeXView(
          teXHTML: r"""
  <style>#myDiv 
   {color:   "#CC0000",}</style>

  <div id='myDiv'>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</div>
  """ ,
          renderingEngine: RenderingEngine.Katex,  // Katex for fast render and MathJax for quality render.
          onRenderFinished: (height) {
                print("Widget Height is : $height");
                },   
          onPageFinished: (string) {
                print("Page Loading finished");
              },
        )
    );
  }}

これが出力です：[screenshot] [1]

flutterflutter-layoutmathjaxtex
4
Bala Ganesh

flutter_tex：^ 3.5.0 + 2 の最新バージョンを確認するだけで、スタイリング機能が追加され、それぞれすべてを非常に簡単にスタイル設定できるようになりました。このバージョンではいくつかのAPIの変更があるため、アップグレードする前に注意して、続行する前に例を確認してください。

レンダリング速度については、レンダリングエンジンをMathjaxからMathjaxよりはるかに速いKatexに変更する必要があります。例えばrenderingEngine:RenderingEngine.Katex

1
Shahzad Akram