Pixelated image (bad quality) when used with flutter_advanced_networkimage package

[g-30]

I use PhotoViewGallery with image provider from flutter_advanced_networkimage package.

The resulted images seem pixelated, even without zooming in. When it's only flutter_advanced_networkimage image provider used without PhotoViewGallery (e.g. in Image widget) - the image looks sharp.

I assume it should not matter what image provider is used for the plugin, as long as it's a subclass of ImageProvider. Hence, filing the issue for photo_view package.

Please let me know what causes the images to appear pixelated (low-resolution) while the source image is high-res. My assumption is that the plugin ignores native resolution of the images, drawing them at max resolution of PhotoViewComputedScale.contained, producing pixelated view.

My code:

PhotoViewGallery.builder(
  ...
  builder: (context, index) {
    final photo = photos[index];
    return PhotoViewGalleryPageOptions(
      basePosition: Alignment.center,
      initialScale: PhotoViewComputedScale.contained,
      minScale: PhotoViewComputedScale.contained,
      maxScale: PhotoViewComputedScale.contained * 2.0,
      // Image provider from `flutter_advanced_networkimage`
      imageProvider: AdvancedNetworkImage(photoUrl,
        fallbackImage: kTransparentImage,
        retryLimit: 1,
        timeoutDuration: Duration(seconds: 30)
      ),
    );
  },
)

[xupefei]

I have encountered the same problem. After investigations, I found that the problem is caused by the way of handling zooming.

In photo_view, we use matrix transformation to scale an image. However, matrix transformation uses (I guess) a fast bilinear interpolation which results in hard edges: https://github.com/renancaraujo/photo_view/blob/master/lib/src/photo_view_image_wrapper.dart#L253

I think there can have two solutions. First, modify the code to make Image scales itself, e.g.:

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
    return Center(
        child: Container(
            width: constraints.maxWidth,
             height: constraints.maxHeight,
             child: _image
        ),
    );
)

The Image will scale itself with a high-quality algorithm. However, this solution may change the current zooming logic, for example _CenterWithOriginalSizeDelegate.

Second, it may be possible to use another widget like SizedBox instead of Transform, but as my test, the _CenterWithOriginalSizeDelegate is still forcing the image to its full size.

Thank you for providing this excellent widget. Looking forward for the fix :)

[renancaraujo]

Since this is happening only to AdvancedNetworkImage provider, I don't think that the problem is caused by the transform (which happens inside SKIA), at least exclusively.

Making image scale itself would break so many use cases (container overlapping, custom child, etc) that would make this change not viable.

Photo View is one of the most used widgets out there, we have to be careful with updates in the core.

And with all that said, the scale is not the only transformation that is done to the image, translate e rotateZ are also applied.

The investigation must look into the internal behavior of:

• The stock providers
• The advanced provider and the difference
• The image widgets

This one will be hardcore.

[MiaYi]

Is there any progress or a temporary solution for this issue?

[MiaYi]

I use FileImage or NetworkImage as ImageProvider in PhotoViewGalleryPageOptions, the image seems pixelated too, but the same provider on Image widget, it is not losing quality.

Maybe it is not happening only to AdvancedNetworkImageProvider ?

use Image widget:

use PhotoViewGalleryPageOptions

[renancaraujo]

@MiaYi Can you please submit that on a different issue? This seems to be a different problem.

[torta]

try this PR #228