How add tap listener to img and url

[ykrank]

I know use onTapUrl to handle url tap. but now i need separate img and url tap listener. could i extend flutter_widget_from_html? or i must extend flutter_widget_from_html_core and copy this project code to my project?

[daohoangson]

What is your use case? How is your html look like? Do you have IMG inside A like this?

<a href="xxx"><img src="xxx" /></a>
<a href="xxx">XXX</a>

Or your IMG is standalone?

<img src="xxx" />
<a href="xxx">XXX</a>

In both cases, it should be possible to implement without copying the whole plugin code.

[ykrank]

What is your use case? How is your html look like? Do you have IMG inside A like this?

<a href="xxx"><img src="xxx" /></a>
<a href="xxx">XXX</a>

Or your IMG is standalone?

<img src="xxx" />
<a href="xxx">XXX</a>

In both cases, it should be possible to implement without copying the whole plugin code.

IMG tag is standalone. how to implement img click?

[daohoangson]

Ah, standalone is easier. Something like this should work:

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

const html = """
<img src="https://media.giphy.com/media/6VoDJzfRjJNbG/giphy-downsized.gif" />
<a href="https://flutter.io">flutter.io</a>
""";

class ImgScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('ImgScreen'),
        ),
        body: HtmlWidget(
          html,
          builderCallback: (meta, e) {
            if (e.localName == 'img' && e.attributes.containsKey('src')) {
              meta = lazySet(meta, buildOp: imgOnTap(e.attributes['src']));
            }

            return meta;
          },
          onTapUrl: (url) => debugPrint("onTapUrl: $url"),
        ),
      );

  BuildOp imgOnTap(String src) => BuildOp(
        // the default `BuildOp` for IMG has a priority of 10
        // and it will prepare `Image` widget for our `onWidgets` callback
        // this op needs a larger number to run after the default
        priority: 9999,
        // wrap each `Image` widget inside a `GestureDetector` to capture `onTap`
        onWidgets: (_, widgets) => widgets.map((widget) => GestureDetector(
              child: widget,
              onTap: () => debugPrint("IMG: $src"),
            )),
      );
}

[ykrank]

lazySet

Thanks.

[sunilbcit]

With flutter_widget_from_html: ^0.4.1, builderCallBack and lazyset removed.
How to achieve the same now.

[daohoangson]

@sunilbcit I have opened a new issue for your question, see it here #396