From bcb2feb69498ad9ab75bb86089bc4b593e7d0c3f Mon Sep 17 00:00:00 2001 From: LeonStaufer Date: Mon, 11 May 2020 14:17:12 +0200 Subject: [PATCH 1/7] refactored example to use routes --- example/lib/main.dart | 78 ++++----------------------------- example/lib/performance.dart | 22 ++++++++++ example/lib/start_screen.dart | 81 +++++++++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+), 70 deletions(-) create mode 100644 example/lib/performance.dart create mode 100644 example/lib/start_screen.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index a16d365..2484caf 100644 --- a/example/lib/main.dart +++ b/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 { - 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: [ - 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", ); } } diff --git a/example/lib/performance.dart b/example/lib/performance.dart new file mode 100644 index 0000000..9a92a26 --- /dev/null +++ b/example/lib/performance.dart @@ -0,0 +1,22 @@ +import 'package:flutter/material.dart'; + +class PerformanceScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("flutTeX Performance Example"), + backgroundColor: Colors.black87, + ), + body: ListView( + children: mathViews(), + ), + ); + } + + List mathViews() { + List widgets = []; + + return widgets; + } +} diff --git a/example/lib/start_screen.dart b/example/lib/start_screen.dart new file mode 100644 index 0000000..8860f84 --- /dev/null +++ b/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 createState() { + return _StartScreenState(); + } +} + +class _StartScreenState extends State { + 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: [ + 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")) + ], + ), + ); + } +} From 72cee41499bfe00501827adcc7fd204ae3ab0135 Mon Sep 17 00:00:00 2001 From: LeonStaufer Date: Mon, 11 May 2020 14:30:27 +0200 Subject: [PATCH 2/7] added performance example --- example/lib/performance.dart | 40 ++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/example/lib/performance.dart b/example/lib/performance.dart index 9a92a26..a5e93c6 100644 --- a/example/lib/performance.dart +++ b/example/lib/performance.dart @@ -1,6 +1,20 @@ +import 'dart:math'; + import 'package:flutter/material.dart'; +import 'package:fluttex/math_view_static.dart'; class PerformanceScreen extends StatelessWidget { + static final List symbols = [ + "\\sum", + "+", + "\\frac", + "-", + "\\times", + "\\text{ lol }", + "\\int", + "\\pi" + ]; + @override Widget build(BuildContext context) { return Scaffold( @@ -9,14 +23,32 @@ class PerformanceScreen extends StatelessWidget { backgroundColor: Colors.black87, ), body: ListView( - children: mathViews(), + children: List.generate(50, (index) => generateMathView()), ), ); } - List mathViews() { - List widgets = []; + Widget generateMathView() { + return Container( + height: 50, + child: MathViewStatic( + tex: randomTex(), + backgroundColor: + Colors.primaries[Random().nextInt(Colors.primaries.length)], + ), + ); + } + + String randomTex() { + String tex = Random().nextInt(200).toString(); + for (int i = 0; i < 5; i++) { + tex += randomSymbol(); + tex += Random().nextInt(200).toString(); + } + return tex; + } - return widgets; + String randomSymbol() { + return symbols[Random().nextInt(symbols.length)]; } } From f5fefceec3418784eb1338d17a65892512b199ed Mon Sep 17 00:00:00 2001 From: LeonStaufer Date: Mon, 11 May 2020 14:53:44 +0200 Subject: [PATCH 3/7] used stack to hide the black flash when the AndroidView is loading --- lib/math_view_static.dart | 64 +++++++++++++++++++++++++++++++++++---- 1 file changed, 58 insertions(+), 6 deletions(-) diff --git a/lib/math_view_static.dart b/lib/math_view_static.dart index 00e977b..ef7e1cd 100644 --- a/lib/math_view_static.dart +++ b/lib/math_view_static.dart @@ -76,12 +76,8 @@ class MathViewStatic extends StatelessWidget { switch (Theme.of(context).platform) { case TargetPlatform.android: { - child = AndroidView( - viewType: 'mathview', - onPlatformViewCreated: _onPlatformViewCreated, - creationParams: _parameters, - creationParamsCodec: StandardMessageCodec(), - ); + child = _AndroidViewStack(_onPlatformViewCreated, _parameters, + color: backgroundColor); break; } @@ -133,3 +129,59 @@ class MathViewController { return _channel.invokeMethod("render", tex); } } + +/// Widget that wraps the AndroidView for creating the MathView +/// allowing more control over what do display when the +/// widget is loading. +class _AndroidViewStack extends StatefulWidget { + /// callback when the AndroidView has successfully loaded + final Function platformViewCreatedCallback; + + /// parameters for loading the MathView + final Map parameters; + + /// background color while the MathView is loading + final Color color; + + const _AndroidViewStack(this.platformViewCreatedCallback, this.parameters, + {this.color = Colors.white}); + + @override + State createState() { + return _AndroidViewStackState(); + } +} + +class _AndroidViewStackState extends State<_AndroidViewStack> { + bool _isLoaded = false; + + @override + Widget build(BuildContext context) { + // render a container with the specified color while the + // AndroidView is still loading + return Stack( + children: [ + AndroidView( + viewType: 'mathview', + onPlatformViewCreated: _onPlatformViewCreated, + creationParams: widget.parameters, + creationParamsCodec: StandardMessageCodec(), + ), + !_isLoaded + ? Container( + decoration: BoxDecoration( + color: widget.color, + )) + : Container() + ], + ); + } + + void _onPlatformViewCreated(int id) { + setState(() { + _isLoaded = true; + }); + + widget.platformViewCreatedCallback(id); + } +} From f85d812b25c30d45a748f940a6ce25d1146aff4c Mon Sep 17 00:00:00 2001 From: LeonStaufer Date: Tue, 12 May 2020 11:18:56 +0200 Subject: [PATCH 4/7] improved performance example --- example/lib/performance.dart | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/example/lib/performance.dart b/example/lib/performance.dart index a5e93c6..c5e38d1 100644 --- a/example/lib/performance.dart +++ b/example/lib/performance.dart @@ -15,6 +15,11 @@ class PerformanceScreen extends StatelessWidget { "\\pi" ]; + static final List mathViews = + List.generate(50, (index) => generateMathView(index)); + + static final Random random = Random(); + @override Widget build(BuildContext context) { return Scaffold( @@ -23,32 +28,35 @@ class PerformanceScreen extends StatelessWidget { backgroundColor: Colors.black87, ), body: ListView( - children: List.generate(50, (index) => generateMathView()), + children: mathViews, ), ); } - Widget generateMathView() { + static Widget generateMathView(int index) { + final color = Colors.primaries[random.nextInt(Colors.primaries.length)]; return Container( - height: 50, + height: 100, + padding: const EdgeInsets.all(8), child: MathViewStatic( + key: ValueKey(index), tex: randomTex(), - backgroundColor: - Colors.primaries[Random().nextInt(Colors.primaries.length)], + displayMode: true, + backgroundColor: color, ), ); } - String randomTex() { - String tex = Random().nextInt(200).toString(); + static String randomTex() { + String tex = random.nextInt(200).toString(); for (int i = 0; i < 5; i++) { tex += randomSymbol(); - tex += Random().nextInt(200).toString(); + tex += random.nextInt(200).toString(); } return tex; } - String randomSymbol() { - return symbols[Random().nextInt(symbols.length)]; + static String randomSymbol() { + return symbols[random.nextInt(symbols.length)]; } } From af18cc38cea6bc3556325da195c02f6b30447632 Mon Sep 17 00:00:00 2001 From: LeonStaufer Date: Tue, 12 May 2020 11:19:49 +0200 Subject: [PATCH 5/7] changed variable names for clarity --- lib/math_view_static.dart | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/lib/math_view_static.dart b/lib/math_view_static.dart index ef7e1cd..73df9aa 100644 --- a/lib/math_view_static.dart +++ b/lib/math_view_static.dart @@ -7,7 +7,7 @@ typedef MathViewCreatedCallback = void Function(MathViewController controller); /// A static MathView that renders TeX using KaTeX. class MathViewStatic extends StatelessWidget { - MathViewStatic( + const MathViewStatic( {Key key, this.onMathViewCreated, this.color = Colors.black87, @@ -153,7 +153,7 @@ class _AndroidViewStack extends StatefulWidget { } class _AndroidViewStackState extends State<_AndroidViewStack> { - bool _isLoaded = false; + bool _isLoading = true; @override Widget build(BuildContext context) { @@ -165,13 +165,15 @@ class _AndroidViewStackState extends State<_AndroidViewStack> { viewType: 'mathview', onPlatformViewCreated: _onPlatformViewCreated, creationParams: widget.parameters, - creationParamsCodec: StandardMessageCodec(), + creationParamsCodec: const StandardMessageCodec(), ), - !_isLoaded + _isLoading ? Container( + child: Icon(Icons.face), decoration: BoxDecoration( - color: widget.color, - )) + color: widget.color, + ), + ) : Container() ], ); @@ -179,7 +181,7 @@ class _AndroidViewStackState extends State<_AndroidViewStack> { void _onPlatformViewCreated(int id) { setState(() { - _isLoaded = true; + _isLoading = false; }); widget.platformViewCreatedCallback(id); From 23a4ff4b38e9c8e5fad03aa94508a71e916f0de8 Mon Sep 17 00:00:00 2001 From: LeonStaufer Date: Tue, 12 May 2020 11:20:15 +0200 Subject: [PATCH 6/7] added wake lock permission to "fix" webview bug --- example/android/app/src/main/AndroidManifest.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml index a194b6a..a6c24ee 100644 --- a/example/android/app/src/main/AndroidManifest.xml +++ b/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. --> + Date: Tue, 12 May 2020 11:20:29 +0200 Subject: [PATCH 7/7] updated dependencies --- example/pubspec.lock | 24 ++++++++++++------------ pubspec.lock | 24 ++++++++++++------------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/example/pubspec.lock b/example/pubspec.lock index 5bef339..311dc63 100644 --- a/example/pubspec.lock +++ b/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" diff --git a/pubspec.lock b/pubspec.lock index 43b4594..8e3975e 100644 --- a/pubspec.lock +++ b/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" flutter: dependency: "direct main" description: flutter @@ -73,7 +73,7 @@ packages: name: image url: "https://pub.dartlang.org" source: hosted - version: "2.1.4" + version: "2.1.12" matcher: dependency: transitive description: @@ -115,7 +115,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 @@ -127,7 +127,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: @@ -183,7 +183,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"