Skip to content

New CSSBoxWidget and lots of bug fixes #1135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Sep 17, 2022
Merged

New CSSBoxWidget and lots of bug fixes #1135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c5f396d
Add support for auto horizontal margins
zbarbuto Oct 25, 2021
bb3be56
Merge branch 'master' into feature/auto-margins
zbarbuto Jul 25, 2022
65dbe79
Merge pull request #879 from NextFaze/feature/auto-margins
Sub6Resources Aug 20, 2022
d87ef3a
WIP: Add support for different Units and enhance the Margins class
Sub6Resources Aug 23, 2022
65c434d
WIP: Compute margins and cleanup
Sub6Resources Aug 24, 2022
e427ed8
WIP: margin/width processing
Sub6Resources Aug 25, 2022
edc5df2
WIP: Add CSSBoxWidget to clean up box rendering
Sub6Resources Aug 28, 2022
bb9145e
WIP: New CSSBoxWidget bugfixes
Sub6Resources Sep 2, 2022
bcee9b3
WIP: Fix directionality TODO
Sub6Resources Sep 2, 2022
ed75550
WIP: CSSBoxWidget - Render heights correctly
Sub6Resources Sep 2, 2022
32bf16c
Update FontSize definition and fix bugs with CSSBoxWidget
Sub6Resources Sep 6, 2022
aa800e2
Ran flutter format
Sub6Resources Sep 6, 2022
0f3e3a4
test: Add a few more unit tests
Sub6Resources Sep 6, 2022
a62449a
fix: Change CSSBoxWidget to CssBoxWidget
Sub6Resources Sep 17, 2022
9dc7f08
fix: Use enum instead of const int internally in length.dart
Sub6Resources Sep 17, 2022
7581ea7
fix: Apply margins to <table> properly
Sub6Resources Sep 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,20 @@ const htmlData = r"""
<p>The should be <span style='color: rgba(0, 0, 0, 0.10);'>BLACK with 10% alpha style='color: rgba(0, 0, 0, 0.10);</span></p>
<p>The should be <span style='color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
<p>The should be <span style='background-color: red; color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<p style="text-align: right;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<p style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
<h3>Text Alignment</h3>
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">Center Aligned Text</span></p>
<p style="text-align: right;"><span style="color: rgba(0, 0, 0, 0.95);">Right Aligned Text</span></p>
<p style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.95);">Justified Text</span></p>
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">Center Aligned Text</span></p>
<h3>Auto Margins</h3>
<div style="width: 150px; height: 20px; background-color: #ff9999;">Default Div</div>
<div style="width: 150px; height: 20px; background-color: #99ff99; margin: auto;">margin: auto</div>
<div style="width: 150px; height: 20px; background-color: #ff99ff; margin: 15px auto;">margin: 15px auto</div>
<div style="width: 150px; height: 20px; background-color: #9999ff; margin-left: auto;">margin-left: auto</div>
<p>With an image - non-block (should not center):</p>
<img style="margin: auto;" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
<p>block image (should center):</p>
<img style="display: block; margin: auto;" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
<h3>Table support (with custom styling!):</h3>
<p>
<q>Famous quote...</q>
Expand Down Expand Up @@ -297,7 +307,7 @@ class _MyHomePageState extends State<MyHomePage> {
? FlutterLogoStyle.horizontal
: FlutterLogoStyle.markOnly,
textColor: context.style.color!,
size: context.style.fontSize!.size! * 5,
size: context.style.fontSize!.value * 5,
)),
tagMatcher("table"): CustomRender.widget(widget: (context, buildChildren) => SingleChildScrollView(
scrollDirection: Axis.horizontal,
Expand Down
2 changes: 1 addition & 1 deletion example/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ publish_to: none
version: 1.0.0+1

environment:
sdk: '>=2.12.0 <3.0.0'
sdk: '>=2.17.0 <3.0.0'

dependencies:
flutter_html:
Expand Down
249 changes: 118 additions & 131 deletions lib/custom_render.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'dart:convert';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/src/html_elements.dart';
import 'package:flutter_html/src/utils.dart';

typedef CustomRenderMatcher = bool Function(RenderContext context);
Expand All @@ -15,7 +16,8 @@ CustomRenderMatcher tagMatcher(String tag) => (context) {
};

CustomRenderMatcher blockElementMatcher() => (context) {
return context.tree.style.display == Display.BLOCK &&
return (context.tree.style.display == Display.BLOCK ||
context.tree.style.display == Display.INLINE_BLOCK) &&
(context.tree.children.isNotEmpty ||
context.tree.element?.localName == "hr");
};
Expand Down Expand Up @@ -116,10 +118,6 @@ CustomRender blockElementRender({Style? style, List<InlineSpan>? children}) =>
children: (children as List<TextSpan>?) ??
context.tree.children
.expandIndexed((i, childTree) => [
if (childTree.style.display == Display.BLOCK &&
i > 0 &&
context.tree.children[i - 1] is ReplacedElement)
TextSpan(text: "\n"),
context.parser.parseTree(context, childTree),
if (i != context.tree.children.length - 1 &&
childTree.style.display == Display.BLOCK &&
Expand All @@ -131,117 +129,109 @@ CustomRender blockElementRender({Style? style, List<InlineSpan>? children}) =>
);
}
return WidgetSpan(
child: ContainerSpan(
key: context.key,
newContext: context,
style: style ?? context.tree.style,
shrinkWrap: context.parser.shrinkWrap,
children: children ??
context.tree.children
.expandIndexed((i, childTree) => [
if (context.parser.shrinkWrap &&
childTree.style.display == Display.BLOCK &&
i > 0 &&
context.tree.children[i - 1] is ReplacedElement)
TextSpan(text: "\n"),
context.parser.parseTree(context, childTree),
if (i != context.tree.children.length - 1 &&
childTree.style.display == Display.BLOCK &&
childTree.element?.localName != "html" &&
childTree.element?.localName != "body")
TextSpan(text: "\n"),
])
.toList(),
));
alignment: PlaceholderAlignment.baseline,
baseline: TextBaseline.alphabetic,
child: CssBoxWidget.withInlineSpanChildren(
key: context.key,
style: style ?? context.tree.style,
shrinkWrap: context.parser.shrinkWrap,
childIsReplaced:
REPLACED_EXTERNAL_ELEMENTS.contains(context.tree.name),
children: children ??
context.tree.children
.expandIndexed((i, childTree) => [
context.parser.parseTree(context, childTree),
//TODO can this newline be added in a different step?
if (i != context.tree.children.length - 1 &&
childTree.style.display == Display.BLOCK &&
childTree.element?.localName != "html" &&
childTree.element?.localName != "body")
TextSpan(text: "\n"),
])
.toList(),
),
);
});

CustomRender listElementRender(
{Style? style, Widget? child, List<InlineSpan>? children}) =>
CustomRender.inlineSpan(
inlineSpan: (context, buildChildren) => WidgetSpan(
child: ContainerSpan(
key: context.key,
newContext: context,
style: style ?? context.tree.style,
shrinkWrap: context.parser.shrinkWrap,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
textDirection:
style?.direction ?? context.tree.style.direction,
children: [
(style?.listStylePosition ??
context.tree.style.listStylePosition) ==
ListStylePosition.OUTSIDE
? Padding(
padding: style?.padding?.nonNegative ??
context.tree.style.padding?.nonNegative ??
EdgeInsets.only(
left: (style?.direction ??
context.tree.style.direction) !=
TextDirection.rtl
? 10.0
: 0.0,
right: (style?.direction ??
context.tree.style.direction) ==
TextDirection.rtl
? 10.0
: 0.0),
child: style?.markerContent ??
context.style.markerContent)
: Container(height: 0, width: 0),
Text("\u0020",
textAlign: TextAlign.right,
style: TextStyle(fontWeight: FontWeight.w400)),
Expanded(
child: Padding(
padding: (style?.listStylePosition ??
context.tree.style.listStylePosition) ==
ListStylePosition.INSIDE
? EdgeInsets.only(
left: (style?.direction ??
context.tree.style.direction) !=
TextDirection.rtl
? 10.0
: 0.0,
right: (style?.direction ??
context.tree.style.direction) ==
TextDirection.rtl
? 10.0
: 0.0)
: EdgeInsets.zero,
child: StyledText(
textSpan: TextSpan(
children: _getListElementChildren(
style?.listStylePosition ??
context.tree.style.listStylePosition,
buildChildren)
..insertAll(
0,
context.tree.style.listStylePosition ==
ListStylePosition.INSIDE
? [
WidgetSpan(
alignment:
PlaceholderAlignment
.middle,
child: style?.markerContent ??
context.style
.markerContent ??
Container(
height: 0, width: 0))
]
: []),
style: style?.generateTextStyle() ??
context.style.generateTextStyle(),
),
style: style ?? context.style,
renderContext: context,
)))
],
inlineSpan: (context, buildChildren) => WidgetSpan(
child: CssBoxWidget(
key: context.key,
style: style ?? context.tree.style,
shrinkWrap: context.parser.shrinkWrap,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
textDirection: style?.direction ?? context.tree.style.direction,
children: [
(style?.listStylePosition ??
context.tree.style.listStylePosition) ==
ListStylePosition.OUTSIDE
? Padding(
padding: style?.padding?.nonNegative ??
context.tree.style.padding?.nonNegative ??
EdgeInsets.only(
left: (style?.direction ??
context.tree.style.direction) !=
TextDirection.rtl
? 10.0
: 0.0,
right: (style?.direction ??
context.tree.style.direction) ==
TextDirection.rtl
? 10.0
: 0.0),
child:
style?.markerContent ?? context.style.markerContent)
: Container(height: 0, width: 0),
Text("\u0020",
textAlign: TextAlign.right,
style: TextStyle(fontWeight: FontWeight.w400)),
Expanded(
child: Padding(
padding: (style?.listStylePosition ??
context.tree.style.listStylePosition) ==
ListStylePosition.INSIDE
? EdgeInsets.only(
left: (style?.direction ??
context.tree.style.direction) !=
TextDirection.rtl
? 10.0
: 0.0,
right: (style?.direction ??
context.tree.style.direction) ==
TextDirection.rtl
? 10.0
: 0.0)
: EdgeInsets.zero,
child: CssBoxWidget.withInlineSpanChildren(
children: _getListElementChildren(
style?.listStylePosition ??
context.tree.style.listStylePosition,
buildChildren)
..insertAll(
0,
context.tree.style.listStylePosition ==
ListStylePosition.INSIDE
? [
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: style?.markerContent ??
context.style.markerContent ??
Container(height: 0, width: 0))
]
: []),
style: style ?? context.style,
),
),
),
));
],
),
),
),
);

CustomRender replacedElementRender(
{PlaceholderAlignment? alignment,
Expand Down Expand Up @@ -482,14 +472,9 @@ CustomRender verticalAlignRender(
key: context.key,
offset: Offset(
0, verticalOffset ?? _getVerticalOffset(context.tree)),
child: StyledText(
textSpan: TextSpan(
style: style?.generateTextStyle() ??
context.style.generateTextStyle(),
children: children ?? buildChildren.call(),
),
child: CssBoxWidget.withInlineSpanChildren(
children: children ?? buildChildren.call(),
style: context.style,
renderContext: context,
),
),
));
Expand All @@ -512,19 +497,21 @@ CustomRender fallbackRender({Style? style, List<InlineSpan>? children}) =>
.toList(),
));

final Map<CustomRenderMatcher, CustomRender> defaultRenders = {
blockElementMatcher(): blockElementRender(),
listElementMatcher(): listElementRender(),
textContentElementMatcher(): textContentElementRender(),
dataUriMatcher(): base64ImageRender(),
assetUriMatcher(): assetImageRender(),
networkSourceMatcher(): networkImageRender(),
replacedElementMatcher(): replacedElementRender(),
interactableElementMatcher(): interactableElementRender(),
layoutElementMatcher(): layoutElementRender(),
verticalAlignMatcher(): verticalAlignRender(),
fallbackMatcher(): fallbackRender(),
};
Map<CustomRenderMatcher, CustomRender> generateDefaultRenders() {
return {
blockElementMatcher(): blockElementRender(),
listElementMatcher(): listElementRender(),
textContentElementMatcher(): textContentElementRender(),
dataUriMatcher(): base64ImageRender(),
assetUriMatcher(): assetImageRender(),
networkSourceMatcher(): networkImageRender(),
replacedElementMatcher(): replacedElementRender(),
interactableElementMatcher(): interactableElementRender(),
layoutElementMatcher(): layoutElementRender(),
verticalAlignMatcher(): verticalAlignRender(),
fallbackMatcher(): fallbackRender(),
};
}

List<InlineSpan> _getListElementChildren(
ListStylePosition? position, Function() buildChildren) {
Expand Down Expand Up @@ -585,9 +572,9 @@ final _dataUriFormat = RegExp(
double _getVerticalOffset(StyledElement tree) {
switch (tree.style.verticalAlign) {
case VerticalAlign.SUB:
return tree.style.fontSize!.size! / 2.5;
return tree.style.fontSize!.value / 2.5;
case VerticalAlign.SUPER:
return tree.style.fontSize!.size! / -2.5;
return tree.style.fontSize!.value / -2.5;
default:
return 0;
}
Expand Down
Loading