Flutter listview moving when loading images from network

user_15871772 0
Viewed 596

i am trying to make a listview with lots of images with different dimensions loaded from network. When I scroll down everything is okay, but when i am scrolling up, first images start to load changing the position of listview. I suppose I need to have a placeholder for images with height of image, but i dont know how to get their dimensions before them loaded. Or i need smth like listview that does not move because of smth upper loading.

dart flutter listview
4 Answers

I wrote a function that gets a height of image in a cycle (array favorites contains Maps which contain url parameter and height parameter if loaded). The function also converts image's height in the size i actually need by formula with MediaQuery.of(context).size.width - 80 which is the width of images on screen. (Width of the screen minus 40 padding from each side).

This is the code of getting height function:

Future<void> getImageHeight(String url, index) async {
    Image image = Image.network(url);
    image.image
        .resolve(const ImageConfiguration())
        .addListener(ImageStreamListener((ImageInfo info, bool isSync) {
      favorites[index]['height'] = info.image.height *
          ((MediaQuery.of(context).size.width - 80) / info.image.width);
      setState(() {});
    }));
}

And this is the code of image with placeholder (Container):

Container(
    color: const Color(0xffE8E6EA),
    height: favorites[index]['height'] == null || favorites[index
            ['height'].isNaN ? 0: favorites[index]['height'],
    child: Image.network(
        favorites[index]['url'],
            width: double.infinity,
    ),
),

On first loading size of placeholder is still going to be zero, because it takes time to get height of them. But after few time (it usually takes about a second or less) setState is going to be called and images will not lag on scrolling. And if you are loading your images urls from database not all at once you'll need to rerun function to get height of newly added images.

user_158717720

Set minCacheExtend large enough (to be higher than the highest picture's height)

user_191967350

I had the same issue, I resolved it by Increasing the cache of the flutter app. Default cache size is 100mb. You can place this at the beginning of main.dart

WidgetsFlutterBinding.ensureInitialized();
PaintingBinding.instance!.imageCache!.maximumSizeBytes = 1024 * 1024 * 300; // 300 MB

More Info Here

user_143128680

You can cover images with SizedBox.

SizedBox(height: 60, child: Image.network(""),)
user_152464980
Related