IchordeDionysos/main.dart

## main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(TestApp());

class TestApp extends StatelessWidget {
  TestApp({Key key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (context) => Container(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: KaTeXView(),
            ),
      },
    );
  }
}

class KaTeXView extends StatefulWidget {
  @override
  _KaTeXViewState createState() => _KaTeXViewState();
}

class _KaTeXViewState extends State<KaTeXView> {
  WebViewController controller;
  double latexWidth, latexHeight;

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return SizedBox(
      width:
          132.89999389648438, //latexWidth != null ? latexWidth : mediaQuery.size.width,
      height: 27.600000381469727, //latexHeight != null ? latexHeight : 100,
      child: WebView(
        initialUrl: 'assets/katex/index.html',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) async {
          print("Created");
          controller = webViewController;
        },
        onPageFinished: (str) async {
          print("loaded");
//          loadLatex();
        },
      ),
    );
  }
}

/* assets/katex/index.html
<!-- For KaTeX to work properly you would have to include all KaTeX files from here: https://github.com/KaTeX/KaTeX/releases into the assets/katex folder -->
<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./katex.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #elem {
            display: inline-block;
            transform-origin: top left;
            transform: scale(1.2);
            position: static;
            top: 0;
            left: 0;
        }
    </style>
    <script src="./katex.js"></script>
</head>
<body>
<div id="elem"></div>
<script>
    const loadLatex = function (latex) {
        const elem = document.getElementById("elem");
        katex.render("x = \\pm\\sqrt{a^2 + b^2}", elem, {
            throwOnError: false,
            maxExpand: Infinity
        });
        const {width, height} = elem.getBoundingClientRect();
        return JSON.stringify({
            width, height
        });
    };
    loadLatex();
</script>
</body>
</html>
 */

	import 'package:flutter/material.dart';
	import 'package:webview_flutter/webview_flutter.dart';

	void main() => runApp(TestApp());

	class TestApp extends StatelessWidget {
	TestApp({Key key}) : super(key: key);

	// This widget is the root of your application.
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	routes: {
	"/": (context) => Container(
	decoration: BoxDecoration(
	color: Colors.blue,
	),
	child: KaTeXView(),
	),
	},
	);
	}
	}

	class KaTeXView extends StatefulWidget {
	@override
	_KaTeXViewState createState() => _KaTeXViewState();
	}

	class _KaTeXViewState extends State<KaTeXView> {
	WebViewController controller;
	double latexWidth, latexHeight;

	@override
	Widget build(BuildContext context) {
	final mediaQuery = MediaQuery.of(context);
	return SizedBox(
	width:
	132.89999389648438, //latexWidth != null ? latexWidth : mediaQuery.size.width,
	height: 27.600000381469727, //latexHeight != null ? latexHeight : 100,
	child: WebView(
	initialUrl: 'assets/katex/index.html',
	javascriptMode: JavascriptMode.unrestricted,
	onWebViewCreated: (WebViewController webViewController) async {
	print("Created");
	controller = webViewController;
	},
	onPageFinished: (str) async {
	print("loaded");
	// loadLatex();
	},
	),
	);
	}
	}

	/* assets/katex/index.html
	<!-- For KaTeX to work properly you would have to include all KaTeX files from here: https://github.com/KaTeX/KaTeX/releases into the assets/katex folder -->
	<!DOCTYPE html>
	<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
	<html>
	<head>
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="./katex.css">
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#elem {
	display: inline-block;
	transform-origin: top left;
	transform: scale(1.2);
	position: static;
	top: 0;
	left: 0;
	}
	</style>
	<script src="./katex.js"></script>
	</head>
	<body>
	<div id="elem"></div>
	<script>
	const loadLatex = function (latex) {
	const elem = document.getElementById("elem");
	katex.render("x = \\pm\\sqrt{a^2 + b^2}", elem, {
	throwOnError: false,
	maxExpand: Infinity
	});
	const {width, height} = elem.getBoundingClientRect();
	return JSON.stringify({
	width, height
	});
	};
	loadLatex();
	</script>
	</body>
	</html>
	*/