Image.network inside listview reloads random images

[mehtahardikr]

Steps to Reproduce

1. create list of 10 or more images.
   2.now tap on image open another page.
   3.just press back of another page , you will see random image is still reloading.

Expected results:
It should not reload as its already loaded.
Actual results:
its reloading random images from list when back from next page.
Please check this video: https://drive.google.com/file/d/1VmNSMTM7puTO-1hBNBGxgs5Z1H3S2Xoz/view?usp=sharing

Logs

[✓] Flutter (Channel stable, 1.22.1, on Mac OS X 10.13.6 17G65, locale en-IN)
    • Flutter version 1.22.1 at /Users/UserA/flutter
    • Framework revision f30b7f4db9 (13 days ago), 2020-10-08 10:06:30 -0700
    • Engine revision 75bef9f6c8
    • Dart version 2.10.1

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/UserA/Library/Android/sdk
    • Platform android-30, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    ✗ Flutter requires a minimum Xcode version of 11.0.0.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (1 available)
    • SM G615FU (mobile) • 42007d3b9a168429 • android-arm • Android 8.1.0 (API 27)

and here is code to replicate.

import 'package:flutter/material.dart';
import 'package:flutter_app/screen/AllPictures.dart';

class ImageList extends StatefulWidget {
  @override
  _ImageListState createState() =>  _ImageListState();

}
class  _ImageListState extends State<ImageList> {

  var images=
  ['https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/ae0da25c-21b5-49d2-bfa2-d2acf7fced6c.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/06e88e20-5b35-4c69-a230-0e150c7717ba.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/c9449c6e-777a-4b46-8e59-8dcec284bcef.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/366debe9-6c67-461d-b3d1-59ea6e4e330b.jpg' ,
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/d0842219-6324-4057-8cbc-8bc1fc3a6f5d.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/79637540-ed13-4130-9853-569511922a9d.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/31edcdee-ea7f-4335-ae69-905010094ae8.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/9bca781a-6b73-410b-a03b-5db3167f9326.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/cfeb72ef-6069-42a6-9ab7-eebf26461a03.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/d1a8d9ca-5e6c-41c7-aba4-98eb3bbc8255.jpg' ,
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/5efa4097-e097-47b4-b7f2-b9f64368869c.jpg'];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(title: Text('Image List'), centerTitle:  true,),
        body: SafeArea(
          top: true, left: true, right: true, bottom: true,
          child: Container(
            padding: EdgeInsets.all(5),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [  Flexible(
                    child: Container(
                      width: 150,
                      child: ListView.separated(itemBuilder: (BuildContext context,int index) {
                        return GestureDetector(
                          onTap: (){
                          Navigator.of(context).push( MaterialPageRoute(builder: (context) => AllPictures(images , index)));
                          },
                          child: SizedBox(
                              height: 100.00,
                              child: DecoratedBox(
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  border: Border.all(width: 0, color: Colors.black12),
                                  borderRadius: BorderRadius.zero,
                                ),
                                child: Image.network(
                                  images[index],
                                  fit: BoxFit.fill,
                                  loadingBuilder: (BuildContext context, Widget child,
                                      ImageChunkEvent loadingProgress) {
                                    if (loadingProgress == null) return child;
                                    return Center(
                                      child: CircularProgressIndicator(
                                        value: loadingProgress.expectedTotalBytes != null
                                            ? loadingProgress.cumulativeBytesLoaded /
                                            loadingProgress.expectedTotalBytes
                                            : null,
                                      ),
                                    );
                                  },
                                ),
                              )),
                        );
                      },shrinkWrap: true, separatorBuilder: (context, index) {return Divider(height: 4,color: Colors.white10,);}, itemCount: images.length),

                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
    );
  }


}

import 'package:flutter/material.dart';

class AllPictures extends StatefulWidget {

  var images =[];
  int selectedIndex = 0;

  AllPictures(this.images,this.selectedIndex);
  @override
  _AllPicturesState createState()=> _AllPicturesState();

}

class _AllPicturesState extends State<AllPictures> {

  PageController controller ;
  TransformationController _transformationController = TransformationController();

  @override
  Widget build(BuildContext context) {
    controller = PageController(viewportFraction: 1, initialPage:widget.selectedIndex );

    return Scaffold(
      appBar: AppBar(title: Text('Pictures') ,centerTitle:  true,
          automaticallyImplyLeading: false,
          leading: IconButton(
              icon: Icon(Icons.arrow_back_ios),
              onPressed: () {
                Navigator.pop(context, false);
              })
      ),
      body: Container(
        child: PageView.builder(
          onPageChanged: (int page){
            setState(() {
              _transformationController.value = Matrix4.identity();
            });

          },
          controller: controller,
          itemCount: widget.images.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(
                child: SizedBox(
                    height:  250,
                    child: Container(
                      width: double.infinity,
                      child: InteractiveViewer(
                        panEnabled: false, // Set it to false to prevent panning.
                        boundaryMargin: EdgeInsets.all(10),
                        transformationController: _transformationController,
                        minScale: 0.5,
                        maxScale: 3.0,
                        child: Image.network(widget.images[index],fit: BoxFit.fill,
                          loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
                            if (loadingProgress == null) return child;
                            return Center(
                              child: CircularProgressIndicator(
                                value: loadingProgress.expectedTotalBytes != null
                                    ? loadingProgress.cumulativeBytesLoaded /
                                    loadingProgress.expectedTotalBytes
                                    : null,
                              ),
                            );
                          },
                        ),
                      ),
                    )
                )
            );
          },
        ),
      ),
    );

  }

}

[darshankawar]

@mehtahardikr
Tried your code sample. So what's the exact issue ?

68700.mp4.zip

Since you have used Image.network and loadingBuilder, it will load the images when they go off the screen and will render when comes in focus.
If you don't want images to reload, you may try CachedNetworkImage.

[mehtahardikr]

@darshankawar : But why its reloads random images , as per you it should reload all images. in video its shows that its reload random images when back from next page and its happening when in page there are more images. upto 6 - 7 images it doesn't reload.

[darshankawar]

@mehtahardikr
I didn't say it'll reload all images. The widget will reload the images if they go off-screen and come back in focus. Also, I didn't notice random images being loaded when I replicated it.
Since you are using loadingBuilder, do read about it for more details, how it works with Image.network. You may also try to use frameBuilder along with it to see if it works per your need.

[mehtahardikr]

@darshankawar : i will check that doc, but can you please check with new code as i have 2 lists and its happening,Please see attached video : https://drive.google.com/file/d/1dS6MJlHqVaoB9rDHfE2qtqrUu1Q-B5Yo/view?usp=sharing

and updated code for showing list:

Sample Code

import 'package:flutter/material.dart';
import 'package:flutter_app/screen/AllPictures.dart';

class ImageList extends StatefulWidget {
  @override
  _ImageListState createState() =>  _ImageListState();

}
class  _ImageListState extends State<ImageList> {

  var images=
  ['https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/ae0da25c-21b5-49d2-bfa2-d2acf7fced6c.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/06e88e20-5b35-4c69-a230-0e150c7717ba.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/c9449c6e-777a-4b46-8e59-8dcec284bcef.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/366debe9-6c67-461d-b3d1-59ea6e4e330b.jpg' ,
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/d0842219-6324-4057-8cbc-8bc1fc3a6f5d.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/79637540-ed13-4130-9853-569511922a9d.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/31edcdee-ea7f-4335-ae69-905010094ae8.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/9bca781a-6b73-410b-a03b-5db3167f9326.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/cfeb72ef-6069-42a6-9ab7-eebf26461a03.jpg',
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/d1a8d9ca-5e6c-41c7-aba4-98eb3bbc8255.jpg' ,
    'https://d1k7e91iovemsu.cloudfront.net/images/dev/unoapp/root/5efa4097-e097-47b4-b7f2-b9f64368869c.jpg'];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(title: Text('Image List'), centerTitle:  true,),
        body: SafeArea(
          top: true, left: true, right: true, bottom: true,
          child: Container(
            padding: EdgeInsets.all(5),

              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Row(mainAxisSize: MainAxisSize.min , crossAxisAlignment : CrossAxisAlignment.center,children: [Flexible(
                      child: Container(
                        width: 150,
                        child: ListView.separated(itemBuilder: (BuildContext context,int index) {
                          return GestureDetector(
                            onTap: (){
                            Navigator.of(context).push( MaterialPageRoute(builder: (context) => AllPictures(images , index)));
                            },
                            child: SizedBox(
                                height: 100.00,
                                child: DecoratedBox(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    border: Border.all(width: 0, color: Colors.black12),
                                    borderRadius: BorderRadius.zero,
                                  ),
                                  child: Image.network(
                                    images[index],
                                    fit: BoxFit.fill,
                                    loadingBuilder: (BuildContext context, Widget child,
                                        ImageChunkEvent loadingProgress) {
                                      if (loadingProgress == null) return child;
                                      return Center(
                                        child: CircularProgressIndicator(
                                          value: loadingProgress.expectedTotalBytes != null
                                              ? loadingProgress.cumulativeBytesLoaded /
                                              loadingProgress.expectedTotalBytes
                                              : null,
                                        ),
                                      );
                                    },
                                  ),
                                )),
                          );
                        },shrinkWrap: true, separatorBuilder: (context, index) {return Divider(height: 4,color: Colors.white10,);}, itemCount: images.length),

                      ),
                    ),SizedBox(width: 10),Flexible(child: Container(
                    width: 150,
                    child: ListView.separated(itemBuilder: (BuildContext context,int index) {
                      return GestureDetector(
                        onTap: (){
                          Navigator.of(context).push( MaterialPageRoute(builder: (context) => AllPictures(images , index)));
                        },
                        child: SizedBox(
                            height: 100.00,
                            child: DecoratedBox(
                              decoration: BoxDecoration(
                                color: Colors.white,
                                border: Border.all(width: 0, color: Colors.black12),
                                borderRadius: BorderRadius.zero,
                              ),
                              child: Image.network(
                                images[index],
                                fit: BoxFit.fill,
                                loadingBuilder: (BuildContext context, Widget child,
                                    ImageChunkEvent loadingProgress) {
                                  if (loadingProgress == null) return child;
                                  return Center(
                                    child: CircularProgressIndicator(
                                      value: loadingProgress.expectedTotalBytes != null
                                          ? loadingProgress.cumulativeBytesLoaded /
                                          loadingProgress.expectedTotalBytes
                                          : null,
                                    ),
                                  );
                                },
                              ),
                            )),
                      );
                    },shrinkWrap: true, separatorBuilder: (context, index) {return Divider(height: 4,color: Colors.white10,);}, itemCount: images.length),

                  ),)]),
                ],
              ),

          ),
        ),
    );
  }


}

[darshankawar]

@mehtahardikr
You are calling the images inside build method, which will be called during every navigation. Hence you see the images being loaded. As to why, it's loading random images, I am not sure. I'd suggest you to cache the images in order to prevent loading images. For that, as I said earlier, you can try CachedNetworkImage and see if it works for you.

Also, it doesn't seem to be an issue / bug with the framework. You may ask this question on StackOver flow.

[mehtahardikr]

@darshankawar : Why you not try with the same code ? you should able to replicate no ? and my question is still same , why out of 10 images only 1 or 2 random image loaded , why not all of 10 and this will happen when more images if you have 5 images then no reload happnes.

[darshankawar]

@mehtahardikr
Since you have that in ListView. If the listview isn't scrollable, ie, there are not enough items in the list to scroll.