[AVLE] New Feature: Applying Photo Viewer

etainclub (79)memberin Steemit Dev Group • 4 years ago

What inconvenient thing in steemit.com on mobile devices is that images are not zoomable.
(It seems there have been changes in steemit.com. It is zoomable but something strange.)

It would be very nice to have a photo viewer for an image.

Photo Viewer

If you click an image, then you will be navigated to the photo viewer screen like this:

You can zoom in/out by double tapping as well as by pinching.

It is a basic function which should have been implemented. Using Flutter it is quite simple task.

Implementation

The following packages are used to implement this:

https://pub.dev/packages/flutter_widget_from_html
This package says only for ios and android but it works for web too!
https://pub.dev/packages/photo_view

// feee screen
 HtmlWidget(
              convertMarkdownToHtml(
                  markdownBody: body, width: MediaQuery.of(context).size.width),
              // webView: true,
              factoryBuilder: () {
                return PopupPhotoViewWidgetFactory();
              },
}

and snippet for PopupPhotoViewWidgetFactory is

class PopupPhotoViewWidgetFactory extends WidgetFactory {
  @override
  Widget? buildImageWidget(BuildMetadata meta, ImageSource src) {
    final built = super.buildImageWidget(meta, src);

    if (built is CachedNetworkImage) {
      print('buildImageWidget. built is CachedNetworkImage');

      final url = src.url;
      return Builder(
        builder: (context) => GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (_) => Scaffold(
                  appBar: AppBar(),
                  body: PhotoView(
                    heroAttributes: PhotoViewHeroAttributes(tag: url),
                    imageProvider: CachedNetworkImageProvider(url),
                  ),
                ),
              ),
            );
          },
          child: Hero(tag: url, child: built!),
        ),
      );
    }
    return built;
  }