How to implement hero transition for <img> label

[JimJayLee]

No description provided.

[Sub6Resources]

Can you be a bit more specific about what it is you are trying to do?

[JimJayLee]

When the image is tapped, prompt a new screen showing the image. And I wanna implement hero transition for more friendly user experience.

But I got no chance reaching the Image widget for wrapping it in a Hero widget.
My code shows below.

Html(
              padding: EdgeInsets.all(2),
              data: content,
              onImageTap: (imageUrl){
                Navigator.of(context).push(FadeTransitionRoute(page: PhotoViewDialog(imageProvider: NetworkImage(imageUrl), loadingChild: CupertinoActivityIndicator(),)));
              },
            )

[noobiek]

Hi!
Would be great if it was feasible to implement (kind of) "middleware" rendering.
For example, we have middlewareRender() callback, which instead of substituting default IMG renderer completely (as does customRenderer) accepts Image() widget from defaultRenderer and should return a widget (original, altered, wrapped, whatever we want).
something like
Widget middlewareRenderer(Widget originalWidget) {...}

[tomkastek]

Just an idea, not much into this package right now:

Use customRender. You can customize how the image will be rendered so that you can render the image as Hero widget. The library is open source so that you can copy the code of the image rendering as child for your custom hero widget.

[noobiek]

Use customRender. You can customize how the image will be rendered so that you can render the image as Hero widget. The library is open source so that you can copy the code of the image rendering as child for your custom hero widget.

Bad idea IMO. Image rendering code may change and then it will require OP to merge all changes everytime manually (given he will notice these changes at all). Plus, it is not about images only. We may want to Hero any widget.

[JimJayLee]

I got it figured out lately by looking up the source code.

Like guys recommend, just render images yourself using CustomRender. Code works below:

customRender: (node, widgets) {
                if (node is Dom.Element && node.localName == "img") {
                  if (node.attributes['src'] != null) {
                    return Hero(
                      tag: node.attributes['src'],
                      child: GestureDetector(onTap: () =>
                          Navigator.of(context).push(
                              MaterialPageRoute(builder: (context) => PhotoViewDialog(
                                heroTag: node.attributes['src'],
                                imageProvider: NetworkImage(
                                    node.attributes['src']),
                                loadingChild: CupertinoActivityIndicator(),)))
                          , child: Image.network(node.attributes['src'])),
                    );
                  }
                }
                return null;
              }

Thanks for help.