Flutter Web, HtmlElementView, "Removing disallowed attribute"

Question

I am trying to Create HtmlElementView for Playstore Application Badge in Flutter Web?

I tried the following as mentioned here

  Widget _getAppStoreBadgeView() {
    final NodeValidatorBuilder _htmlValidator =
        new NodeValidatorBuilder.common()
          ..allowElement('a', attributes: ['data-target', 'data-toggle'])
          ..allowElement('button', attributes: ['data-target', 'data-toggle']);
    ui.platformViewRegistry.registerViewFactory("idid", (int viewId) {
      final element = DivElement()
        ..setInnerHtml(r"""
        <a href='https://play.google.com/store/apps/details?id=com.shahxad.evendor&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>
        """, validator: _htmlValidator)
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.border = 'none';
      return element;
    });
    return Container(
      child: HtmlElementView(viewType: "idid"),
      height: 150,
      width: 400,
    );
  }

But it's not working as I am getting like this.

I am getting this message in the Chrome console.

Removing disallowed attribute

html_dart2js.dart:39901 Removing disallowed attribute <A href="https://play.google.com/store/apps/details?id=com.shahxad.flutter_tex_example&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">

html_dart2js.dart:39901 Removing disallowed attribute <IMG src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png">

score 2 · Accepted Answer · answered Jul 10 '20 at 20:07

Use NodeValidatorBuilder from the dart:html library with predefined rules allowHtml5, allowNavigation, allowImages and define class ItemUrlPolicy to allow navigation from generated html-code.

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class ItemUrlPolicy implements html.UriPolicy {
  RegExp regex = RegExp(r'(?:http://|https://)?.*');

  bool allowsUri(String uri) {
    return regex.hasMatch(uri);
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  html.DivElement _element;

  @override
  void initState() {
    super.initState();
    _element = html.DivElement()
      ..appendHtml("""
            <a href='https://play.google.com/store/apps/details?id=com.shahxad.evendor&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
              <img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/>
            </a>
          """,
          validator: html.NodeValidatorBuilder()
            ..allowHtml5(uriPolicy: ItemUrlPolicy())
            ..allowNavigation(ItemUrlPolicy())
            ..allowImages(ItemUrlPolicy()));
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('demo-view', (int viewId) => _element);
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(key: UniqueKey(), viewType: "demo-view");
  }
}

Thanks, it worked like a charm, But it's not working on click but fine with touch mode in device toolbar. — Shahzad Akram, Jul 10 '20 at 21:23

Flutter Web, HtmlElementView, "Removing disallowed attribute"

1 Answers1