Long Images are blurry in flutter. Flutter

Question

My app is about reading manga. Some manga image are vertically long, like an inverted panorama image. The app displays these images blurred and low res although they are fine and high quality. What could the reason be and what is the solution. Another problem is that scrolling in these images downward is not smooth, they are put into a list view to display ads in between pages.Thank you in advance.

The image code is like this:

ListView.builder(
    itemCount: imageUrls.length,
    itemBuilder: (context, index) {
      return Image.network(
        imageUrls[index],
        fit: BoxFit.fitWidth,
      );
    });

A very simple code. Any help appreciated.

You can try it yourself, here is a link to an image and insert it in a listview with image.network.

download Link for a long image: https://ufile.io/gh59hu06

Solution

So i did some research and found out that flutter does not tile images in order to dovide them into smaller parts to make the job of image processing and display easier on the GPU. The only way around this issue is to split images manually and display them divided. You can use the image package in pub.dev to do the job. This is awfully a bad approach from the flutter devs, I made an issue at github and they added it as a feature request but of severe performance, wierd right!

Comments

[Ryosuke]

I don't have anything to add on this exact issue, but you said you may use image package on pub.dev. Just a suggestion for that, run all image processing operations on a separate isolate using compute function or your own approach, as image library has a lot of heavy sequential operations, it will hang your UI if done on main isolate. Even if you are using async-await combo.