add support math formulas

Author: avdosev

lib/pages/user.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:habr_app/utils/message_notifier.dart';
+import 'package:habr_app/widgets/link.dart';
 import 'package:provider/provider.dart';
 import 'package:habr_app/stores/habr_storage.dart';
 
@@ -177,7 +178,7 @@ class AuthorInfoView extends StatelessWidget {
               AvatarColorStore().getColor(info.alias, theme.brightness),
           borderWidth: 2,
         ),
-        Text('@' + info.alias, style: TextStyle(color: theme.primaryColor)),
+        Text('@' + info.alias, style: TextStyle(color: linkColorFrom(context))),
         if (info.fullName != null && info.fullName!.isNotEmpty)
           Text("a.k.a. ${info.fullName}"),
         Text(info.speciality == null || info.speciality!.isEmpty

lib/utils/html_to_json/element_builders.dart

@@ -157,3 +157,12 @@ class Table implements Node {
   @override
   String get type => "table";
 }
+
+class MathFormula implements Node {
+  final String formula;
+
+  MathFormula(this.formula);
+
+  @override
+  String get type => "formula";
+}

lib/utils/html_to_json/transformer.dart

@@ -218,6 +218,10 @@ Node prepareHtmlBlocElement(dom.Element element) {
         findLanguageFromClass(element.classes.toList()),
       );
     case 'img':
+      if (element.classes.contains('formula')) {
+        final alt = element.attributes['alt'] ?? '';
+        return MathFormula(alt);
+      }
       final url = element.attributes['data-src'] ?? element.attributes['src'];
       return Image(url!);
     case 'blockquote':

lib/widgets/html_elements/html_elements.dart

@@ -3,4 +3,5 @@ export 'spoiler_block.dart';
 export 'headline.dart';
 export 'unordered_list.dart';
 export 'highlight_code.dart';
-export 'iframe.dart';
+export 'iframe.dart';
+export 'math_formula.dart';

lib/widgets/html_elements/math_formula.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_math_fork/flutter_math.dart';
+
+class MathFormula extends StatelessWidget {
+  final String formula;
+
+  const MathFormula(this.formula, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Math.tex(
+      formula,
+      mathStyle: MathStyle.text,
+      textStyle: Theme.of(context).textTheme.bodyText2,
+    );
+  }
+}

lib/widgets/html_elements/spoiler_block.dart

@@ -1,5 +1,6 @@
 import 'dart:math';
 import 'package:flutter/material.dart';
+import 'package:habr_app/widgets/link.dart';
 
 class Spoiler extends StatefulWidget {
   final String? title;
@@ -15,7 +16,7 @@ class _SpoilerState extends State<Spoiler> with TickerProviderStateMixin {
   late bool visible;
   late Animation _arrowAnimation;
   late AnimationController _arrowAnimationController;
-  static const duration = Duration(milliseconds: 300);
+  static const duration = Duration(milliseconds: 100);
 
   @override
   initState() {
@@ -27,6 +28,12 @@ class _SpoilerState extends State<Spoiler> with TickerProviderStateMixin {
         Tween(begin: 0.0, end: pi / 2).animate(_arrowAnimationController);
   }
 
+  @override
+  void dispose() {
+    _arrowAnimationController.dispose();
+    super.dispose();
+  }
+
   onTap() {
     setState(() {
       visible
@@ -50,14 +57,14 @@ class _SpoilerState extends State<Spoiler> with TickerProviderStateMixin {
                 animation: _arrowAnimationController,
                 builder: (context, child) => Transform.rotate(
                     angle: _arrowAnimation.value, child: child),
-                child: Icon(Icons.arrow_right, color: themeData.primaryColor),
+                child: Icon(Icons.arrow_right, color: linkColorFrom(context)),
               ),
               Expanded(
                   child: Text(
                 widget.title!,
                 style: TextStyle(
-                  color: themeData.primaryColor,
-                  decorationColor: themeData.primaryColor,
+                  color: linkColorFrom(context),
+                  decorationColor: linkColorFrom(context),
                   decoration: TextDecoration.underline,
                   decorationStyle: TextDecorationStyle.dashed,
                 ),
@@ -66,12 +73,15 @@ class _SpoilerState extends State<Spoiler> with TickerProviderStateMixin {
           ),
           onTap: onTap,
         ),
-        if (visible) ...[
-          const SizedBox(
-            height: 10,
-          ),
-          widget.child!,
-        ],
+        SizeTransition(
+          sizeFactor: Tween<double>(begin: 0, end: 1)
+              .animate(_arrowAnimationController),
+          axisAlignment: -1.0,
+          child: Column(children: [
+            const SizedBox(height: 10),
+            widget.child!,
+          ]),
+        )
       ],
     ));
   }

lib/widgets/html_view.dart

@@ -71,7 +71,12 @@ Widget wrapPadding(Widget child, BuildParams params) => params.padding != null
     : child;
 
 // may be null
-Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
+Widget? buildTree(
+  view.Node element,
+  BuildContext context,
+  BuildParams params, {
+  bool isInline = false,
+}) {
   final type = element.type;
   if (element is view.HeadLine) {
     logInfo('$type ${element.text}');
@@ -115,7 +120,11 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
       widget = WrappedContainer(
         children: [
           widget,
-          Text(element.caption!, style: Theme.of(context).textTheme.subtitle2)
+          wrapPadding(
+            Text(element.caption!,
+                style: Theme.of(context).textTheme.subtitle2),
+            params,
+          ),
         ],
         distance: 5,
       );
@@ -126,6 +135,15 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
         child: widget,
       );
     }
+  } else if (element is view.MathFormula) {
+    widget = Padding(
+      child: MathFormula(element.formula),
+      padding: const EdgeInsets.only(top: 10),
+    );
+    if (!isInline) {
+      widget = Center(child: widget);
+      widget = wrapPadding(widget, params);
+    }
   } else if (element is view.Code) {
     final appSettings = Provider.of<AppSettings>(context, listen: false);
     widget = HighlightCode(
@@ -213,7 +231,8 @@ InlineSpan buildInline(
     span = InlineTextLink(
         title: element.text, url: element.link, context: context);
   } else if (element is view.BlockSpan) {
-    span = WidgetSpan(child: buildTree(element.child, context, params)!);
+    span = WidgetSpan(
+        child: buildTree(element.child, context, params, isInline: true)!);
   }
 
   return span;

lib/widgets/medium_author_preview.dart

@@ -5,6 +5,7 @@ import 'package:habr_app/models/author.dart';
 import 'package:habr_app/stores/avatar_color_store.dart';
 
 import 'author_avatar_icon.dart';
+import 'package:habr_app/widgets/link.dart';
 
 class MediumAuthorPreview extends StatelessWidget {
   final Author author;
@@ -44,7 +45,7 @@ class MediumAuthorPreview extends StatelessWidget {
                       TextSpan(text: '@'),
                       TextSpan(text: author.alias),
                     ],
-                    style: TextStyle(color: theme.primaryColor),
+                    style: TextStyle(color: linkColorFrom(context)),
                   ),
                 ]),
                 maxLines: 2,

lib/widgets/picture.dart

@@ -30,7 +30,7 @@ class Picture extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final textTheme = Theme.of(context).textTheme.bodyText2;
+    final textTheme = Theme.of(context).textTheme.bodyText2!;
     final habrStorage = context.watch<HabrStorage>();
     return Container(
       height: height,
@@ -46,7 +46,7 @@ class Picture extends StatelessWidget {
                 child: Transform.scale(
               scale: 2,
               alignment: Alignment.center,
-              child: SvgPicture.file(file, color: textTheme!.color),
+              child: SvgPicture.file(file, color: textTheme.color),
             ));
           }
           Widget widget = Image.file(
@@ -68,7 +68,7 @@ class Picture extends StatelessWidget {
                 child: Transform.scale(
               scale: 2,
               alignment: Alignment.center,
-              child: SvgPicture.network(url!, color: textTheme!.color),
+              child: SvgPicture.network(url!, color: textTheme.color),
             ));
           }
           Widget widget = Image.network(

pubspec.yaml

@@ -22,15 +22,16 @@ dependencies:
   share: ^2.0.1
   flutter_highlight: "^0.7.0"
   either_dart: ^0.1.3
-  flutter_svg: "^0.22.0"
+  flutter_svg: ^1.0.3
+  flutter_math_fork: ^0.6.2
   url_launcher: "^6.0.9"
   hive: ^2.0.4
   hive_flutter: ^1.1.0
   flutter_slidable: 0.6.0
   photo_view: ^0.13.0
   path_provider: "^2.0.9"
   crypto: ">=2.1.5"
-  provider: ^5.0.0
+  provider: ^6.0.0
   itertools: ">=0.1.0"
 
 dependency_overrides: