Merge remote-tracking branch 'upstream/master' into feature/data-uri-svg

# Conflicts:
#	example/lib/main.dart
#	lib/image_render.dart

Author: erickok

CHANGELOG.md

@@ -1,3 +1,16 @@
+## [2.0.0-nullsafety.0] - March 5, 2021:
+* Nullsafety support
+* Official Flutter Web support
+* New features & fixes for lists:
+   * Support start attribute (e.g. `start="5";`)
+   * Support RTL direction
+   * Support setting padding - you can remove the starting padding if you choose
+   * Fixed unknown character box on iOS when font-weight is below w400
+* Upgraded link functions to provide more granular control
+* Fixed errors in text-decoration parsing
+* Fixed `<audio>` on iOS ("_duration called on null" exception)
+* Updated dependencies
+
 ## [1.3.0] - February 16, 2021:
 * New image loading API
 * Image loading with request headers, from relative paths and custom loading widget

README.md

@@ -27,6 +27,8 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
 
 - [Currently Supported CSS Attributes](#currently-supported-css-attributes)
 
+- [Currently Supported Inline CSS Attributes](#currently-supported-inline-css-attributes)
+
 - [Why flutter_html?](#why-this-package)
 
 - [API Reference](#api-reference)
@@ -106,6 +108,13 @@ Add the following to your `pubspec.yaml` file:
 |`padding`         | `margin`| `text-align`| `text-decoration`| `text-decoration-color`| `text-decoration-style`| `text-decoration-thickness`|
 |`text-shadow`     | `vertical-align`| `white-space`| `width`  | `word-spacing`|                        |            |
 
+## Currently Supported Inline CSS Attributes:
+|                  |        |            |          |              |                        |            |
+|------------------|--------|------------|----------|--------------|------------------------|------------|
+|`background-color`| `border` | `color`| `direction`| `display`| `font-family`| `font-feature-settings` |
+| `font-size`|`font-style`      | `font-weight`| `line-height` | `list-style-type`  | `list-style-position`|`padding`     |
+| `margin`| `text-align`| `text-decoration`| `text-decoration-color`| `text-decoration-style`| `text-shadow` | |
+
 Don't see a tag or attribute you need? File a feature request or contribute to the project!
 
 ## Why this package?
@@ -171,7 +180,7 @@ Widget html = Html(
   data: """<p>
    Linking to <a href='https://github.com'>websites</a> has never been easier.
   </p>""",
-  onLinkTap: (String url) {
+  onLinkTap: (String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
     //open URL in webview, or launch URL in browser, or any other logic here
   }
 );
@@ -197,10 +206,10 @@ Widget html = Html(
   <flutter horizontal></flutter>
   """,
   customRender: {
-      "bird": (RenderContext context, Widget child, Map<String, String> attributes, _) {
+      "bird": (RenderContext context, Widget child, Map<String, String> attributes, dom.Element? element) {
         return TextSpan(text: "🐦");
       },
-      "flutter": (RenderContext context, Widget child, Map<String, String> attributes, _) {
+      "flutter": (RenderContext context, Widget child, Map<String, String> attributes, dom.Element? element) {
         return FlutterLogo(
           style: (attributes['horizontal'] != null)
               ? FlutterLogoStyle.horizontal
@@ -227,26 +236,25 @@ Widget html = Html(
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
    """,
    customRender: {
-      "iframe": (RenderContext context, Widget child, Map<String, String> attributes, _) {
+      "iframe": (RenderContext context, Widget child, Map<String, String> attributes, dom.Element? element) {
          if (attributes != null) {
            double width = double.tryParse(attributes['width'] ?? "");
            double height = double.tryParse(attributes['height'] ?? "");
-           print(attributes['src']);
            return Container(
              width: width ?? (height ?? 150) * 2,
              height: height ?? (width ?? 300) / 2,
              child: WebView(
-                initialUrl: attributes['src'],
+                initialUrl: attributes['src'] ?? "about:blank",
                 javascriptMode: JavascriptMode.unrestricted,
                 //no need for scrolling gesture recognizers on embedded youtube, so set gestureRecognizers null
                 //on other iframe content scrolling might be necessary, so use VerticalDragGestureRecognizer
-                gestureRecognizers: attributes['src'].contains("youtube.com/embed") ? null : [
+                gestureRecognizers: attributes['src'] != null && attributes['src']!.contains("youtube.com/embed") ? null : [
                   Factory(() => VerticalDragGestureRecognizer())
                 ].toSet(),
                 navigationDelegate: (NavigationRequest request) async {
                 //no need to load any url besides the embedded youtube url when displaying embedded youtube, so prevent url loading
                 //on other iframe content allow all url loading
-                  if (attributes['src'].contains("youtube.com/embed")) {
+                  if (attributes['src'] != null && attributes['src']!.contains("youtube.com/embed")) {
                     if (!request.url.contains("youtube.com/embed")) {
                       return NavigationDecision.prevent;
                     } else {
@@ -293,7 +301,7 @@ A function that defines what the widget should do when an image is tapped.
 ```dart
 Widget html = Html(
   data: """<img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />""",
-  onImageTap: (String url) {
+  onImageTap: (String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
     //open image in webview, or launch image in browser, or any other logic here
   }
 );
@@ -432,8 +440,9 @@ A typical usage would look something like this:
 
 ```dart
 ImageSourceMatcher base64UriMatcher() => (attributes, element) =>
-    attributes["src"].startsWith("data:image") &&
-    attributes["src"].contains("base64,");
+    attributes["src"] != null &&
+    attributes["src"]!.startsWith("data:image") &&
+    attributes["src"]!.contains("base64,");
 ```
 
 In the above example, the matcher checks whether the image's `src` either starts with "data:image" or contains "base64,", since these indicate an image in base64 format.
@@ -448,10 +457,10 @@ ImageSourceMatcher networkSourceMatcher({
   String extension: "your extension",
 }) =>
     (attributes, element) {
-      final src = Uri.parse(attributes["src"]);
+      final src = Uri.parse(attributes["src"] ?? "about:blank");
       return schemas.contains(src.scheme) &&
-          (domains == null || domains.contains(src.host)) &&
-          (extension == null || src.path.endsWith(".$extension"));
+          domains.contains(src.host) &&
+          src.path.endsWith(".$extension");
     };
 ```
 
@@ -465,7 +474,8 @@ A typical usage might look like this:
 
 ```dart
 ImageRender base64ImageRender() => (context, attributes, element) {
-      final decodedImage = base64.decode(attributes["src"].split("base64,")[1].trim());
+      final decodedImage = base64.decode(attributes["src"] != null ?
+          attributes["src"].split("base64,")[1].trim() : "about:blank");
       return Image.memory(
         decodedImage,
       );
@@ -485,7 +495,7 @@ ImageRender networkImageRender({
 }) =>
     (context, attributes, element) {
       return Image.network(
-        attributes["src"],
+        attributes["src"] ?? "about:blank",
         headers: headers,
         width: width,
         height: height,
@@ -521,10 +531,10 @@ Widget html = Html(
     },
     networkSourceMatcher(): networkImageRender(
       headers: {"Custom-Header": "some-value"},
-      altWidget: (alt) => Text(alt),
+      altWidget: (alt) => Text(alt ?? ""),
       loadingWidget: () => Text("Loading..."),
     ),
-            (attr, _) => attr["src"] != null && attr["src"].startsWith("/wiki"):
+            (attr, _) => attr["src"] != null && attr["src"]!.startsWith("/wiki"):
     networkImageRender(
             mapUrl: (url) => "https://upload.wikimedia.org" + url),
   },
@@ -538,16 +548,17 @@ When an image with URL `flutter.dev` is detected, rather than displaying the ima
 2. Creating your own renders:
 ```dart
 ImageSourceMatcher classAndIdMatcher({String classToMatch, String idToMatch}) => (attributes, element) =>
-    attributes["class"].contains(classToMatch) ||
-    attributes["id"].contains(idToMatch);
+    attributes["class"] != null && attributes["id"] != null &&
+    (attributes["class"]!.contains(classToMatch) ||
+    attributes["id"]!.contains(idToMatch));
 
 ImageRender classAndIdRender({String classToMatch, String idToMatch}) => (context, attributes, element) {
-  if (attributes["class"].contains(classToMatch)) {
-    return Image.asset(attributes["src"]);
+  if (attributes["class"] != null && attributes["class"]!.contains(classToMatch)) {
+    return Image.asset(attributes["src"] ?? "about:blank");
   } else {
     return Image.network(
-      attributes["src"],
-      semanticLabel: attributes["longdesc"],
+      attributes["src"] ?? "about:blank",
+      semanticLabel: attributes["longdesc"] ?? "",
       width: attributes["width"],
       height: attributes["height"],
       color: context.style.color,
@@ -609,9 +620,7 @@ You can set the `navigationDelegate` of the webview with the `navigationDelegate
 
 ### Audio
 
-This package renders audio elements using the [`chewie_audio`](https://pub.dev/packages/chewie_audio) plugin. 
-
-Note: Audio elements currently do not work on iOS due to a bug with `chewie_audio`. Once [#509](https://github.com/Sub6Resources/flutter_html/pull/509) is merged, it will work again.
+This package renders audio elements using the [`chewie_audio`](https://pub.dev/packages/chewie_audio) plugin.
 
 The package considers the attributes `controls`, `loop`, `src`, `autoplay`, `width`, and `muted` when rendering the audio widget.
 

example/lib/generated_plugin_registrant.dart

@@ -0,0 +1,17 @@
+//
+// Generated file. Do not edit.
+//
+
+// ignore_for_file: lines_longer_than_80_chars
+
+import 'package:video_player_web/video_player_web.dart';
+import 'package:wakelock_web/wakelock_web.dart';
+
+import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+
+// ignore: public_member_api_docs
+void registerPlugins(Registrar registrar) {
+  VideoPlayerPlugin.registerWith(registrar);
+  WakelockWeb.registerWith(registrar);
+  registrar.registerMessageHandler();
+}

example/lib/main.dart

@@ -19,7 +19,7 @@ class MyApp extends StatelessWidget {
 }
 
 class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key, this.title}) : super(key: key);
+  MyHomePage({Key? key, required this.title}) : super(key: key);
 
   final String title;
 
@@ -158,19 +158,20 @@ class _MyHomePageState extends State<MyHomePage> {
             },
             networkSourceMatcher(domains: ["mydomain.com"]): networkImageRender(
               headers: {"Custom-Header": "some-value"},
-              altWidget: (alt) => Text(alt),
+              altWidget: (alt) => Text(alt ?? ""),
               loadingWidget: () => Text("Loading..."),
             ),
             // On relative paths starting with /wiki, prefix with a base url
-            (attr, _) => attr["src"] != null && attr["src"].startsWith("/wiki"):
-                networkImageRender(mapUrl: (url) => "https://upload.wikimedia.org" + url),
+            (attr, _) => attr["src"] != null && attr["src"]!.startsWith("/wiki"):
+                networkImageRender(
+                    mapUrl: (url) => "https://upload.wikimedia.org" + url!),
             // Custom placeholder image for broken links
             networkSourceMatcher(): networkImageRender(altWidget: (_) => FlutterLogo()),
           },
-          onLinkTap: (url) {
+          onLinkTap: (url, _, __, ___) {
             print("Opening $url...");
           },
-          onImageTap: (src) {
+          onImageTap: (src, _, __, ___) {
             print(src);
           },
           onImageError: (exception, stackTrace) {

example/pubspec.yaml

@@ -4,7 +4,7 @@ description: flutter_html example app.
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.1.0 <3.0.0"
+  sdk: '>=2.12.0 <3.0.0'
 
 dependencies:
   flutter_html:

example/web/favicon.png

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    Fore more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+  -->
+  <base href="/">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>example</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <!-- This script installs service_worker.js to provide PWA functionality to
+       application. For more information, see:
+       https://developers.google.com/web/fundamentals/primers/service-workers -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('flutter-first-frame', function () {
+        navigator.serviceWorker.register('flutter_service_worker.js');
+      });
+    }
+  </script>
+  <script src="main.dart.js" type="application/javascript"></script>
+</body>
+</html>

example/web/icons/Icon-192.png

@@ -0,0 +1,23 @@
+{
+    "name": "example",
+    "short_name": "example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}