The Problem and What I've Done So Far
Abstract: I'm getting a reference error, probably from a package I've imported, that I'd like to know if I can fix on my own. I'm building/testing with flutter-web
I'm writing a flutter app that processes some markdown/LaTeX using the flutter_tex
package. Unfortunately when I add a TeXView()
widget to my app and try to reload I get:
ReferenceError: OnPageLoaded is not defined
at http://localhost:40111/assets/packages/flutter_tex/js/katex/index.html:50:5
new-447 old-750
It seems to me that there isn't anything in my code that could have caused this error and that it is something wrong with the way that my code gets compiled for the web. I have added this line:
<script src="assets/packages/flutter_tex/js/flutter_tex.js"></script>
to my project's index.html
as advised in the installation instructions.
The developer of this package has not responded to issues on GitHub for nearly half a year and someone else has come across this problem before but, I need the features that this package offers so it really isn't an option for me to try a different package.
What I want to know is if there is a general way that I can deal with this. I am new to dart and I'm not even sure where to find most of these files or if any changes that I make will persist after reloading. I do know from the question How do you use onPageLoad in Javascript? that onPageLoad
may be replaceable with window.onload
but I'm not sure if this is related to my issue.
The Code
import 'package:flutter_tex/flutter_tex.dart';
// <!--Snip--!>
class CardView extends StatefulWidget {
final String deck;
final TeXViewRenderingEngine renderingEngine;
CardView(
{this.deck, this.renderingEngine = const TeXViewRenderingEngine.katex()});
@override
State<CardView> createState() => _CardViewState(deck: deck);
}
class _CardViewState extends State<CardView> {
final String deck;
var _card = jsonDecode('{}');
var _cardId = 0;
var _testString = r"""
*This should be bold*
# This should be a title.
$x=3$
\(x=3\)
$$x=3$$
Hello $x=3$ \(x=3\)""";
_CardViewState({this.deck});
// <!--Snip--!>
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Decks > Deck')),
body: Center(
// child: RichText(
// text: TextSpan(
// text: _card.toString(),
// style: TextStyle(color: Colors.black, fontSize: 18)))
child: TeXView(child: TeXViewMarkdown(_testString.toString()))));
}
}