Flutter_widget_from_html: How add tap listener to img and url

Created on 11 Dec 2020 · 7Comments · Source: daohoangson/flutter_widget_from_html

https://github.com/daohoangson/flutter_widget_from_html/issues/50#issuecomment-742429977

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

question

Source

daohoangson

Most helpful comment

For URL, you can specify a callback for onTapUrl when you create the HtmlWidget.
For images, a custom WidgetFactory is needed, something like this should work:

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

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Issue 396')),
        body: SingleChildScrollView(
          child: Padding(
            child: HtmlWidget(
              kHtml,
              factoryBuilder: () => _WidgetFactory(),
              onTapUrl: (url) => print('url=$url'),
            ),
            padding: const EdgeInsets.all(8),
          ),
        ),
      );
}

class _WidgetFactory extends WidgetFactory {
  @override
  Widget buildImage(BuildMetadata meta, Object provider, ImageMetadata image) {
    final built = super.buildImage(meta, provider, image);
    if (built == null) return built;

    return GestureDetector(
      child: built,
      onTap: () => print('image=$image'),
    );
  }
}

const kHtml = '''
<p>URL: <a href="http://domain.com">tap me</a>.</p>
<p>Image: <img src="https://via.placeholder.com/100x50.png?text=tap+me" /></p>
''';

Screenshot:

Console output:

flutter: url=http://domain.com
flutter: image=ImageMetadata(sources: [ImageSource("https://via.placeholder.com/100x50.png?text=tap+me")])

daohoangson on 11 Dec 2020

👍2 ❤1

All 7 comments

For URL, you can specify a callback for onTapUrl when you create the HtmlWidget.
For images, a custom WidgetFactory is needed, something like this should work:

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

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Issue 396')),
        body: SingleChildScrollView(
          child: Padding(
            child: HtmlWidget(
              kHtml,
              factoryBuilder: () => _WidgetFactory(),
              onTapUrl: (url) => print('url=$url'),
            ),
            padding: const EdgeInsets.all(8),
          ),
        ),
      );
}

class _WidgetFactory extends WidgetFactory {
  @override
  Widget buildImage(BuildMetadata meta, Object provider, ImageMetadata image) {
    final built = super.buildImage(meta, provider, image);
    if (built == null) return built;

    return GestureDetector(
      child: built,
      onTap: () => print('image=$image'),
    );
  }
}

const kHtml = '''
<p>URL: <a href="http://domain.com">tap me</a>.</p>
<p>Image: <img src="https://via.placeholder.com/100x50.png?text=tap+me" /></p>
''';

Screenshot:

Console output:

flutter: url=http://domain.com
flutter: image=ImageMetadata(sources: [ImageSource("https://via.placeholder.com/100x50.png?text=tap+me")])

daohoangson on 11 Dec 2020

👍2 ❤1

I think it could be a great improvement for the package to add this feature as an own parameter onImageTap.

For example flutter_html has such method and it's helpful and straightforward easy to use.

We're using this in our apps for showing images in some kind of Lightbox. An easy to use build in functionality would be great here.

DFelten on 11 Dec 2020

@DFelten I have added support for onTapImage callback (see #398), it'll be available in the next release.

daohoangson on 18 Dec 2020

🎉1

Great, thank you!

DFelten on 18 Dec 2020

@DFelten I have added support for onTapImage callback (see #398), it'll be available in the next release.

@daohoangson Here I noticed that onTapImage only works if onTapUrl was also defined. Is that the expected behaviour?

And one question regarding the onLinkTap: Is it somehow possible to override the onTap behaviour only for some urls? For example, links to Wordpress posts should open a new page within the app, all other urls should behave as always. For example, I want to keep the behavior of the table of content links.

DFelten on 2 Feb 2021

@DFelten I have added support for onTapImage callback (see #398), it'll be available in the next release.

@daohoangson Here I noticed that onTapImage only works if onTapUrl was also defined. Is that the expected behaviour?

And one question regarding the onLinkTap: Is it somehow possible to override the onTap behaviour only for some urls? For example, links to Wordpress posts should open a new page within the app, all other urls should behave as always. For example, I want to keep the behavior of the table of content links.

@daohoangson Sorry for the impatience, but I'll ask the question again here so it won't be forgotten.

DFelten on 11 Feb 2021

Here I noticed that onTapImage only works if onTapUrl was also defined. Is that the expected behaviour?

@DFelten this is not the intended behavior, they should be independent. Unless your image is inline within a link? For that case, I need to see the HTML to be sure. But in general, they are unrelated to each other.

And one question regarding the onLinkTap: Is it somehow possible to override the onTap behaviour only for some urls?

It's possible to do this by extending WidgetFactory and overrides the void onTapUrl(String) method. Basically you can check the URL and decide: (1) handle the tap yourself (e.g. open link to other WP posts within the app) or (2) let super.onTapUrl() does the job.