I have a list view where the image from api is loaded, I noticed that the image keeps disappearing for few seconds when scrolling once in a while. Here is the code on the image part only:
Container(
padding: EdgeInsets.only(top:5.0,left:15.0,right:1.0,bottom:0.0),
constraints: new BoxConstraints.expand(
height: 130.0,
width: 150.0,
),
decoration: new BoxDecoration(
image: new DecorationImage(
image: NetworkImage(artworksAndEventsFinal[index]['thumbnail']),fit: BoxFit.cover,),
),
child: new Stack(
children: <Widget>[
new Positioned(
right: 0.0,
bottom: 0.0,
child: Container(
height: 24.0,
padding: EdgeInsets.only(top:5.0,left:10.0,right:5.0,bottom:5.0),
decoration: new BoxDecoration(
color: Theme.of(context).primaryColor,
),
child: new Text(artworksAndEventsFinal[index]['year'],
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 11.0,
color: Colors.white
)
),
)
),
new Positioned(
right: 3.0,
top: 0.0,
child: new Icon(Icons.favorite_border,color:
Colors.white,),
),
],
)
),
List View creates the widget when it is visible. Thus only the visible child has the image and the one disappearing removes the widget and the one not loaded yet doesn't fetch the image. This approach has wonderful benefit of optimal memory utilization. Say you have 1000 of cards with images in List view and showing just 2-3 on the screen at the moment, thus only for the 2-3 visble card image will be loaded and when user will scroll and bring the other cards from the list, it will load images only when visible.
If you want to cache the images, please consider using package Cached_network_image