Custom render refactor suggestion

Author: erickok

README.md

@@ -272,7 +272,7 @@ A powerful API that allows you to customize everything when rendering a specific
 
 `CustomRenderMatcher` is a function that requires a `bool` to be returned. It exposes the `RenderContext` which provides `BuildContext` and access to the HTML tree.
 
-The `CustomRender` class has two constructors: `CustomRender.fromWidget()` and `CustomRender.fromInlineSpan()`. Both require a `<Widget/InlineSpan> Function(RenderContext, Function())`. The `Function()` argument is a function that will provide you with the element's children when needed.
+The `CustomRender` class has two constructors: `CustomRender.widget()` and `CustomRender.inlineSpan()`. Both require a `<Widget/InlineSpan> Function(RenderContext, Function())`. The `Function()` argument is a function that will provide you with the element's children when needed.
 
 To use this API, create a matching function and an instance of `CustomRender`. 
 
@@ -289,8 +289,8 @@ Widget html = Html(
   <flutter horizontal></flutter>
   """,
   customRender: {
-      birdMatcher(): CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => TextSpan(text: "🐦")),
-      flutterMatcher(): CustomRender.fromWidget(widget: (context, buildChildren) => FlutterLogo(
+      birdMatcher(): CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(text: "🐦")),
+      flutterMatcher(): CustomRender.widget(widget: (context, buildChildren) => FlutterLogo(
         style: (context.tree.element!.attributes['horizontal'] != null)
             ? FlutterLogoStyle.horizontal
             : FlutterLogoStyle.markOnly,
@@ -321,7 +321,7 @@ Widget html = Html(
   </table>
   """,
   customRender: {
-    tableMatcher(): CustomRender.fromWidget(widget: (context, child) {
+    tableMatcher(): CustomRender.widget(widget: (context, child) {
       return SingleChildScrollView(
         scrollDirection: Axis.horizontal,
         child: (context.tree as TableLayoutElement).toWidget(context),
@@ -348,7 +348,7 @@ Widget html = Html(
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
    """,
    customRender: {
-      iframeYT(): CustomRender.fromWidget(widget: (context, buildChildren) {
+      iframeYT(): CustomRender.widget(widget: (context, buildChildren) {
         double? width = double.tryParse(context.tree.attributes['width'] ?? "");
         double? height = double.tryParse(context.tree.attributes['height'] ?? "");
         return Container(
@@ -368,7 +368,7 @@ Widget html = Html(
           ),
         );
       }),
-      iframeOther(): CustomRender.fromWidget(widget: (context, buildChildren) {
+      iframeOther(): CustomRender.widget(widget: (context, buildChildren) {
         double? width = double.tryParse(context.tree.attributes['width'] ?? "");
         double? height = double.tryParse(context.tree.attributes['height'] ?? "");
         return Container(
@@ -384,7 +384,7 @@ Widget html = Html(
           ),
         );
       }),
-      iframeNull(): CustomRender.fromWidget(widget: (context, buildChildren) => Container(height: 0, width: 0)),
+      iframeNull(): CustomRender.widget(widget: (context, buildChildren) => Container(height: 0, width: 0)),
    }
  );
 
@@ -818,7 +818,7 @@ Then, use the `customRender` parameter to add the widget to render Tex. It could
 Widget htmlWidget = Html(
   data: r"""<tex>i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)</tex>""",
   customRender: {
-    texMatcher(): CustomRender.fromWidget(widget: (context, buildChildren) => Math.tex(
+    texMatcher(): CustomRender.widget(widget: (context, buildChildren) => Math.tex(
       context.tree.element?.innerHtml ?? '',
       mathStyle: MathStyle.display,
       textStyle: context.style.generateTextStyle(),

example/lib/main.dart

@@ -270,7 +270,7 @@ class _MyHomePageState extends State<MyHomePage> {
           },
           tagsList: Html.tags..addAll(["tex", "bird", "flutter"]),
           customRenders: {
-            texMatcher(): CustomRender.fromWidget(widget: (context, buildChildren) => Math.tex(
+            tagMatcher("tex"): CustomRender.widget(widget: (context, buildChildren) => Math.tex(
               context.tree.element?.innerHtml ?? '',
               mathStyle: MathStyle.display,
               textStyle: context.style.generateTextStyle(),
@@ -282,15 +282,15 @@ class _MyHomePageState extends State<MyHomePage> {
                 }
               },
             )),
-            birdMatcher(): CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => TextSpan(text: "🐦")),
-            flutterMatcher(): CustomRender.fromWidget(widget: (context, buildChildren) => FlutterLogo(
+            tagMatcher("bird"): CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(text: "🐦")),
+            tagMatcher("flutter"): CustomRender.widget(widget: (context, buildChildren) => FlutterLogo(
               style: (context.tree.element!.attributes['horizontal'] != null)
                   ? FlutterLogoStyle.horizontal
                   : FlutterLogoStyle.markOnly,
               textColor: context.style.color!,
               size: context.style.fontSize!.size! * 5,
             )),
-            tableMatcher(): CustomRender.fromWidget(widget: (context, buildChildren) => SingleChildScrollView(
+            tagMatcher("table"): CustomRender.widget(widget: (context, buildChildren) => SingleChildScrollView(
               scrollDirection: Axis.horizontal,
               child: (context.tree as TableLayoutElement).toWidget(context),
             )),
@@ -336,11 +336,3 @@ class _MyHomePageState extends State<MyHomePage> {
     );
   }
 }
-
-CustomRenderMatcher tableMatcher() => (context) => context.tree.element?.localName == 'table';
-
-CustomRenderMatcher texMatcher() => (context) => context.tree.element?.localName == 'tex';
-
-CustomRenderMatcher birdMatcher() => (context) => context.tree.element?.localName == 'bird';
-
-CustomRenderMatcher flutterMatcher() => (context) => context.tree.element?.localName == 'flutter';

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: flutter_html example app.
-
+publish_to: none
 version: 1.0.0+1
 
 environment:

lib/custom_render.dart

@@ -7,11 +7,15 @@ import 'package:flutter_html/src/utils.dart';
 
 typedef CustomRenderMatcher = bool Function(RenderContext context);
 
-CustomRenderMatcher blockElementMatcher() => (context) {
-  return context.tree.style.display == Display.BLOCK
-      && context.tree.children.isNotEmpty;
+CustomRenderMatcher tagMatcher(String tag) => (context) {
+  return context.tree.element?.localName == tag;
 };
 
+CustomRenderMatcher blockElementMatcher() => (context) {
+      return context.tree.style.display == Display.BLOCK &&
+          (context.tree.children.isNotEmpty || context.tree.element?.localName == "hr");
+    };
+
 CustomRenderMatcher listElementMatcher() => (context) {
   return context.tree.style.display == Display.LIST_ITEM;
 };
@@ -45,11 +49,11 @@ class CustomRender {
   final InlineSpan Function(RenderContext, List<InlineSpan> Function())? inlineSpan;
   final Widget Function(RenderContext, List<InlineSpan> Function())? widget;
 
-  CustomRender.fromInlineSpan({
+  CustomRender.inlineSpan({
     required this.inlineSpan,
   }) : widget = null;
 
-  CustomRender.fromWidget({
+  CustomRender.widget({
     required this.widget,
   }) : inlineSpan = null;
 }
@@ -59,14 +63,14 @@ class SelectableCustomRender extends CustomRender {
 
   SelectableCustomRender.fromTextSpan({
     required this.textSpan,
-  }) : super.fromInlineSpan(inlineSpan: null);
+  }) : super.inlineSpan(inlineSpan: null);
 }
 
 CustomRender blockElementRender({
   Style? style,
   Widget? child,
-  List<InlineSpan>? children}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) {
+  List<InlineSpan>? children,}) =>
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) {
         if (context.parser.selectable) {
           return TextSpan(
             style: context.style.generateTextStyle(),
@@ -115,7 +119,7 @@ CustomRender listElementRender({
   Style? style,
   Widget? child,
   List<InlineSpan>? children}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) =>
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) =>
         WidgetSpan(
           child: ContainerSpan(
             key: context.key,
@@ -164,18 +168,18 @@ CustomRender listElementRender({
 ));
 
 CustomRender replacedElementRender({PlaceholderAlignment? alignment, TextBaseline? baseline, Widget? child}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
   alignment: alignment ?? (context.tree as ReplacedElement).alignment,
   baseline: baseline ?? TextBaseline.alphabetic,
   child: child ?? (context.tree as ReplacedElement).toWidget(context)!,
 ));
 
 CustomRender textContentElementRender({String? text}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) =>
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) =>
       TextSpan(text: text ?? (context.tree as TextContentElement).text));
 
 CustomRender interactableElementRender({List<InlineSpan>? children}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => TextSpan(
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(
   children: children ?? (context.tree as InteractableElement).children
       .map((tree) => context.parser.parseTree(context, tree))
       .map((childSpan) {
@@ -185,15 +189,15 @@ CustomRender interactableElementRender({List<InlineSpan>? children}) =>
 ));
 
 CustomRender layoutElementRender({Widget? child}) =>
-  CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
+  CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
     child: child ?? (context.tree as LayoutElement).toWidget(context)!,
 ));
 
 CustomRender verticalAlignRender({
   double? verticalOffset,
   Style? style,
   List<InlineSpan>? children}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => WidgetSpan(
   child: Transform.translate(
     key: context.key,
     offset: Offset(0, verticalOffset ?? _getVerticalOffset(context.tree)),
@@ -209,7 +213,7 @@ CustomRender verticalAlignRender({
 ));
 
 CustomRender fallbackRender({Style? style, List<InlineSpan>? children}) =>
-    CustomRender.fromInlineSpan(inlineSpan: (context, buildChildren) => TextSpan(
+    CustomRender.inlineSpan(inlineSpan: (context, buildChildren) => TextSpan(
       style: style?.generateTextStyle() ?? context.style.generateTextStyle(),
       children: context.tree.children
           .expand((tree) => [

lib/image_render.dart

@@ -4,7 +4,6 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/html_parser.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:flutter_svg/parser.dart';
 import 'package:html/dom.dart' as dom;
 
 typedef ImageSourceMatcher = bool Function(

lib/src/utils.dart

@@ -1,7 +1,6 @@
 import 'dart:convert';
 import 'dart:math';
 
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 
 Map<String, String> namedColors = {