Skip to content

Commit 246ab58

Browse files
erickokerickok
committed
Update README after small public API change for customRender
1 parent 2117832 commit 246ab58

File tree

2 files changed

+29
-17
lines changed

2 files changed

+29
-17
lines changed

‎README.md

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -238,15 +238,14 @@ Widget html = Html(
238238

239239
### customRender:
240240

241-
A powerful API that allows you to customize everything when rendering a specific HTML tag. This means you can add support for HTML elements that aren't supported natively. You can also make up your own custom tags in your HTML!
241+
A powerful API that allows you to customize everything when rendering a specific HTML tag. This means you can change the default behaviour or add support for HTML elements that aren't supported natively. You can also make up your own custom tags in your HTML!
242242

243-
`customRender` accepts a `Map<String, CustomRender>`. The `CustomRender` type is a function that requires a `Widget` to be returned. It exposes `RenderContext`, the `Widget` that would have been rendered by `Html` without a `customRender` defined, the `attributes` of the HTML element as a `Map<String, String>`, and the HTML element itself as `Element`.
243+
`customRender` accepts a `Map<String, CustomRender>`. The `CustomRender` type is a function that requires a `Widget` or `InlineSpan` to be returned. It exposes `RenderContext` and the `Widget` that would have been rendered by `Html` without a `customRender` defined. The `RenderContext` contains the build context, styling and the HTML element, with attrributes and its subtree,.
244244

245-
To use this API, set the key as the tag of the HTML element you wish to provide a custom implementation for, and create a function with the above parameters that returns a `Widget`.
245+
To use this API, set the key as the tag of the HTML element you wish to provide a custom implementation for, and create a function with the above parameters that returns a `Widget` or `InlineSpan`.
246246

247247
#### Example Usages - customRender:
248248
1. Simple example - rendering custom HTML tags
249-
<details><summary>View code</summary>
250249

251250
```dart
252251
Widget html = Html(
@@ -256,22 +255,21 @@ Widget html = Html(
256255
<flutter horizontal></flutter>
257256
""",
258257
customRender: {
259-
"bird": (RenderContext context, Widget child, Map<String, String> attributes, dom.Element? element) {
258+
"bird": (RenderContext context, Widget child) {
260259
return TextSpan(text: "🐦");
261260
},
262-
"flutter": (RenderContext context, Widget child, Map<String, String> attributes, dom.Element? element) {
261+
"flutter": (RenderContext context, Widget child) {
263262
return FlutterLogo(
264-
style: (attributes['horizontal'] != null)
263+
style: (context.tree.element!.attributes['horizontal'] != null)
265264
? FlutterLogoStyle.horizontal
266265
: FlutterLogoStyle.markOnly,
267266
textColor: context.style.color,
268-
size: context.style.fontSize.size * 5,
267+
size: context.style.fontSize!.size! * 5,
269268
);
270269
},
271270
},
272271
);
273272
```
274-
</details>
275273

276274
2. Complex example - rendering an `iframe` differently based on whether it is an embedded youtube video or some other embedded content
277275

@@ -286,25 +284,26 @@ Widget html = Html(
286284
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
287285
""",
288286
customRender: {
289-
"iframe": (RenderContext context, Widget child, Map<String, String> attributes, dom.Element? element) {
290-
if (attributes != null) {
291-
double width = double.tryParse(attributes['width'] ?? "");
292-
double height = double.tryParse(attributes['height'] ?? "");
287+
"iframe": (RenderContext context, Widget child) {
288+
final attrs = context.tree.element?.attributes;
289+
if (attrs != null) {
290+
double? width = double.tryParse(attrs['width'] ?? "");
291+
double? height = double.tryParse(attrs['height'] ?? "");
293292
return Container(
294293
width: width ?? (height ?? 150) * 2,
295294
height: height ?? (width ?? 300) / 2,
296295
child: WebView(
297-
initialUrl: attributes['src'] ?? "about:blank",
296+
initialUrl: attrs['src'] ?? "about:blank",
298297
javascriptMode: JavascriptMode.unrestricted,
299298
//no need for scrolling gesture recognizers on embedded youtube, so set gestureRecognizers null
300299
//on other iframe content scrolling might be necessary, so use VerticalDragGestureRecognizer
301-
gestureRecognizers: attributes['src'] != null && attributes['src']!.contains("youtube.com/embed") ? null : [
300+
gestureRecognizers: attrs['src'] != null && attrs['src']!.contains("youtube.com/embed") ? null : [
302301
Factory(() => VerticalDragGestureRecognizer())
303302
].toSet(),
304303
navigationDelegate: (NavigationRequest request) async {
305304
//no need to load any url besides the embedded youtube url when displaying embedded youtube, so prevent url loading
306305
//on other iframe content allow all url loading
307-
if (attributes['src'] != null && attributes['src']!.contains("youtube.com/embed")) {
306+
if (attrs['src'] != null && attrs['src']!.contains("youtube.com/embed")) {
308307
if (!request.url.contains("youtube.com/embed")) {
309308
return NavigationDecision.prevent;
310309
} else {

‎example/lib/main.dart

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_html/flutter_html.dart';
3+
import 'package:flutter_html/html_parser.dart';
34
import 'package:flutter_html/image_render.dart';
45
import 'package:flutter_html/src/layout_element.dart';
56
import 'package:flutter_html/style.dart';
@@ -269,7 +270,19 @@ class _MyHomePageState extends State<MyHomePage> {
269270
scrollDirection: Axis.horizontal,
270271
child: (context.tree as TableLayoutElement).toWidget(context),
271272
);
272-
}
273+
},
274+
"bird": (RenderContext context, Widget child) {
275+
return TextSpan(text: "🐦");
276+
},
277+
"flutter": (RenderContext context, Widget child) {
278+
return FlutterLogo(
279+
style: (context.tree.element!.attributes['horizontal'] != null)
280+
? FlutterLogoStyle.horizontal
281+
: FlutterLogoStyle.markOnly,
282+
textColor: context.style.color!,
283+
size: context.style.fontSize!.size! * 5,
284+
);
285+
},
273286
},
274287
customImageRenders: {
275288
networkSourceMatcher(domains: ["flutter.dev"]): (context, attributes, element) {

0 commit comments

Comments
 (0)