Flutter_widget_from_html: Hope to add onImageTap function support

[forever84721]

When the picture is small, hope to trigger onImageTap after clicking the picture.
Thanks.

[daohoangson]

I don't think this will be added to the package anytime soon. But thanks to the easy extensibility, you can do this in your app fairly easy. Checkout this sample code:

class Issue190 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Issue 190')),
        body: SingleChildScrollView(
          child: HtmlWidget(
            kHtml,
            factoryBuilder: (c) => _MyWidgetFactory(c),
          ),
        ),
      );
}

class _MyWidgetFactory extends WidgetFactory {
  _MyWidgetFactory(HtmlWidgetConfig config) : super(config);

  @override
  Widget buildImage(String url, {double height, String text, double width}) {
    final imageWidget = super.buildImage(
      url,
      height: height,
      text: text,
      width: width,
    );
    if (imageWidget == null) return imageWidget;

    return GestureDetector(
      child: imageWidget,
      onTap: () => print(url),
    );
  }
}

Basically you will need to use a custom WidgetFactory. In your subclass, override the buildImage method and wrap a GestureDetector to capture the onTap event. You can do whatever you want when user taps the image, I only printed the image URL.

[forever84721]

This is the effect i want , thank you very much.🎉

[daohoangson]

Glad to be of help. I'm closing this issue now btw, feel free to reopen or create a new one if you run into other problems.

[daohoangson]

Just FYI, the new version, 0.4.x and up, has a breaking change (no more HtmlWidgetConfig) so the sample code needs to be updated a bit:

class Issue190 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Issue 190')),
        body: SingleChildScrollView(
          child: HtmlWidget(
            kHtml,
            factoryBuilder: () => _MyWidgetFactory(),
          ),
        ),
      );
}

class _MyWidgetFactory extends WidgetFactory {
  @override
  Widget buildImage(String url, {double height, String text, double width}) {
    final imageWidget = super.buildImage(
      url,
      height: height,
      text: text,
      width: width,
    );
    if (imageWidget == null) return imageWidget;

    return GestureDetector(
      child: imageWidget,
      onTap: () => print(url),
    );
  }
}