Fix MathViewStatic flashing black before completed render

example/android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,7 @@
          In most cases you can leave this as-is, but you if you want to provide
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
+    <uses-permission android:name="android.permission.WAKE_LOCK" />
     <application
         android:name="io.flutter.app.FlutterApplication"
         android:label="fluttex_example"

example/lib/main.dart

@@ -1,80 +1,18 @@
 import 'package:flutter/material.dart';
-import 'package:fluttex/math_view_static.dart';
+import 'package:fluttex_example/performance.dart';
+import 'package:fluttex_example/start_screen.dart';
 
 void main() => runApp(MyApp());
 
-class MyApp extends StatefulWidget {
-  @override
-  _MyAppState createState() => _MyAppState();
-}
-
-class _MyAppState extends State<MyApp> {
-  final _textController = TextEditingController();
-  MathViewController _mathViewController;
-
-  @override
-  void initState() {
-    super.initState();
-
-    //render the TeX once the input changes
-    _textController.addListener(() {
-      _mathViewController?.render(_textController.text);
-    });
-  }
-
-  @override
-  void dispose() {
-    _textController.dispose();
-    super.dispose();
-  }
-
+class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      home: Scaffold(
-        appBar: AppBar(
-          title: const Text('fluttex Example'),
-          backgroundColor: Colors.black87,
-        ),
-        body: Column(
-          children: <Widget>[
-            Container(
-              height: 150,
-              child: MathViewStatic(
-                displayMode: true,
-                tex: "\\text{Static MathView Example} \\\\"
-                    "\\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\xi \\\\"
-                    "\\ce{\$K = \\frac{[\ce{Hg^2+}][\\ce{Hg}]}{[\\ce{Hg2^2+}]}\$}",
-              ),
-            ),
-            Divider(),
-            Text(
-              "Dynamic MathView Example",
-              textAlign: TextAlign.center,
-              style: Theme.of(context).textTheme.subtitle2,
-            ),
-            Container(
-              height: 200,
-              child: MathViewStatic(
-                key: UniqueKey(),
-                displayMode: true,
-                color: Colors.white,
-                backgroundColor: Colors.black87,
-                onMathViewCreated: (controller) {
-                  _mathViewController = controller;
-                },
-              ),
-            ),
-            Divider(),
-            TextField(
-              controller: _textController,
-              decoration: InputDecoration(
-                hintText: "Starting typing to have the TeX be rendered above..."
-              ),
-            )
-          ],
-        ),
-      ),
+      routes: {
+        "/start": (context) => StartScreen(),
+        "/performance": (context) => PerformanceScreen(),
+      },
+      initialRoute: "/start",
     );
   }
 }

example/lib/performance.dart

@@ -0,0 +1,62 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:fluttex/math_view_static.dart';
+
+class PerformanceScreen extends StatelessWidget {
+  static final List<String> symbols = [
+    "\\sum",
+    "+",
+    "\\frac",
+    "-",
+    "\\times",
+    "\\text{ lol }",
+    "\\int",
+    "\\pi"
+  ];
+
+  static final List<Widget> mathViews =
+      List.generate(50, (index) => generateMathView(index));
+
+  static final Random random = Random();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("flutTeX Performance Example"),
+        backgroundColor: Colors.black87,
+      ),
+      body: ListView(
+        children: mathViews,
+      ),
+    );
+  }
+
+  static Widget generateMathView(int index) {
+    final color = Colors.primaries[random.nextInt(Colors.primaries.length)];
+    return Container(
+      height: 100,
+      padding: const EdgeInsets.all(8),
+      child: MathViewStatic(
+        key: ValueKey(index),
+        tex: randomTex(),
+        displayMode: true,
+        backgroundColor: color,
+      ),
+    );
+  }
+
+  static String randomTex() {
+    String tex = random.nextInt(200).toString();
+    for (int i = 0; i < 5; i++) {
+      tex += randomSymbol();
+      tex += random.nextInt(200).toString();
+    }
+    return tex;
+  }
+
+  static String randomSymbol() {
+    return symbols[random.nextInt(symbols.length)];
+  }
+}

example/lib/start_screen.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:fluttex/math_view_static.dart';
+
+class StartScreen extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _StartScreenState();
+  }
+}
+
+class _StartScreenState extends State<StartScreen> {
+  final _textController = TextEditingController();
+  MathViewController _mathViewController;
+
+  @override
+  void initState() {
+    super.initState();
+
+    //render the TeX once the input changes
+    _textController.addListener(() {
+      _mathViewController?.render(_textController.text);
+    });
+  }
+
+  @override
+  void dispose() {
+    _textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('fluttex Example'),
+        backgroundColor: Colors.black87,
+      ),
+      body: Column(
+        children: <Widget>[
+          Container(
+            height: 150,
+            child: MathViewStatic(
+              displayMode: true,
+              tex: "\\text{Static MathView Example} \\\\"
+                  "\\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\xi \\\\"
+                  "\\ce{\$K = \\frac{[\ce{Hg^2+}][\\ce{Hg}]}{[\\ce{Hg2^2+}]}\$}",
+            ),
+          ),
+          Divider(),
+          Text(
+            "Dynamic MathView Example",
+            textAlign: TextAlign.center,
+            style: Theme.of(context).textTheme.subtitle2,
+          ),
+          Container(
+            height: 200,
+            child: MathViewStatic(
+              key: UniqueKey(),
+              displayMode: true,
+              color: Colors.white,
+              backgroundColor: Colors.black87,
+              onMathViewCreated: (controller) {
+                _mathViewController = controller;
+              },
+            ),
+          ),
+          Divider(),
+          TextField(
+            controller: _textController,
+            decoration: InputDecoration(
+                hintText:
+                    "Starting typing to have the TeX be rendered above..."),
+          ),
+          RaisedButton(
+              child: Text("Performance Example"),
+              onPressed: () => Navigator.of(context).pushNamed("/performance"))
+        ],
+      ),
+    );
+  }
+}

example/pubspec.lock

@@ -7,42 +7,42 @@ packages:
       name: archive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.11"
+    version: "2.0.13"
   args:
     dependency: transitive
     description:
       name: args
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.2"
+    version: "1.6.0"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.4.0"
+    version: "2.4.1"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.5"
+    version: "2.0.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "1.1.3"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.14.11"
+    version: "1.14.12"
   convert:
     dependency: transitive
     description:
@@ -56,7 +56,7 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -87,7 +87,7 @@ packages:
       name: image
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.12"
   matcher:
     dependency: transitive
     description:
@@ -122,7 +122,7 @@ packages:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.1.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -134,7 +134,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.5"
+    version: "1.7.0"
   stack_trace:
     dependency: transitive
     description:
@@ -190,7 +190,7 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.5.0"
+    version: "3.6.1"
 sdks:
-  dart: ">=2.4.0 <3.0.0"
+  dart: ">=2.6.0 <3.0.0"
   flutter: ">=1.12.0 <2.0.0"