GridView and CachedNetworkImage - Reloading image on scrolling - flutter

Question

I'm getting a list of items from API and each item contains an image and these items should be displayed in GridView. I'm using GridView.count for building and CachedNetworkImage for loading images from the network. But when I'm scrolling bottom or top, all images are reloading again giving the experience of lagging.
Image is actually a child of ListItem which is a Stack widget and it should be "background" of ListItem.
Did anyone encounter the same problem and found a solution? I'm using BLOC.
class PlayersPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return buildPlayersPage(context);
}
BlocConsumer buildPlayersPage(BuildContext context) {
return BlocConsumer(
cubit: BlocProvider.of<PlayersBloc>(context),
listener: (context, state) {
if (state is PlayersError) {
return DisplayEmptyState();
}
},
builder: _mapStateToPage,
);
}
Widget _mapStateToPage(context, state) {
if (state is PlayersInitial) {
return DisplayLoading();
} else if (state is PlayersLoading) {
return DisplayLoading();
} else if (state is PlayersLoaded) {
return DisplayPlayersGridView(state.players);
} else {
return DisplayEmptyState();
}
}
}
class DisplayPlayersGridView extends StatelessWidget {
final List<Player> players;
DisplayPlayersGridView(this.players);
#override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
childAspectRatio: 0.9,
mainAxisSpacing: 8.0,
padding: EdgeInsets.all(8.0),
children: players.map((player) => TeamListItem(player)).toList());
}
}
class TeamListItem extends StatelessWidget {
final Player player;
TeamListItem(this.player);
#override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
child: Stack(
alignment: Alignment.topLeft,
children: [
PlayerImage(player.playerPictureOne),
NumberContainer(player.squadNumber),
SponsorRectangle(player.sponsoredBy),
PlayersDetailsContainer(player.playerName, player.position),
Positioned(
right: 16.0,
bottom: 16.0,
child: Image.asset(
ViewUtils.getCountryFlag(player.country.toLowerCase()),
package: 'country_icons',
width: 15,
height: 10,
fit: BoxFit.cover,
),
)
],
),
),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PlayerDetailsPage(
player: player,
),
)),
);
}
}
class PlayersDetailsContainer extends StatelessWidget {
final String playerName;
final String position;
PlayersDetailsContainer(this.playerName, this.position);
#override
Widget build(BuildContext context) {
return Positioned(
left: 16.0,
bottom: 16.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
playerName,
style: TextStyle(fontSize: 13.0, color: Colors.white),
),
SizedBox(height: 4.0),
Text(position.toUpperCase(),
style: TextStyle(fontSize: 10.0, color: Colors.white))
],
),
);
}
}
class SponsorRectangle extends StatelessWidget {
final String sponsoredBy;
SponsorRectangle(this.sponsoredBy);
#override
Widget build(BuildContext context) {
return Positioned(
left: 30.0,
child: Container(
width: 100.0,
height: 15.0,
color: ColorsUtils.ACCENT_COLOR,
alignment: Alignment.center,
child: Text(
sponsoredBy,
style: TextStyle(fontSize: 8.0, color: Colors.white),
),
),
);
}
}
class NumberContainer extends StatelessWidget {
final String playerNumber;
NumberContainer(this.playerNumber);
#override
Widget build(BuildContext context) {
return Container(
width: 30.0,
height: 30.0,
alignment: Alignment.center,
color: Colors.black,
child: Text(
playerNumber,
style: TextStyle(fontSize: 15.0, color: Colors.white),
),
);
}
}
class PlayerImage extends StatelessWidget {
final String imageUrl;
PlayerImage(this.imageUrl);
#override
Widget build(BuildContext context) {
return CachedNetworkImage(
imageUrl: imageUrl,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(image: imageProvider, fit: BoxFit.cover),
),
),
);
}
}