[Flutter] LinearGradient with CachedNetworkImage flutter

I had designed a picture with a LinearGradient on it like this


Container(
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(controller
.specialEpisodes[pagePosition].appImage),
fit: BoxFit.cover)),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xff21242C),
const Color(0xff21242C).withOpacity(.2),
const Color(0xff21242C).withOpacity(.2),
const Color(0xff21242C).withOpacity(.9),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0, 0.2, 0.7, 3],
)),
),
);

But after knowing the importance of CachedNetworkImage have implemented it as follows


CachedNetworkImage(
width: double.infinity,
height: 130,
fit: BoxFit.contain,
imageUrl:
controller.specialEpisodes[pagePosition].appImage,
progressIndicatorBuilder:
(context, url, downloadProgress) =>
Shimmer.fromColors(
baseColor: const Color(0xff21242C),
highlightColor: Colors.white,
child: Skeleton(
width: double.infinity,
height: SizeConfig.screenHeight * 0.7,
)),
errorWidget: (context, url, error) =>
const Icon(
Icons.error,
size: 100,
color: Colors.red,
),
);

How do I add the LinearGradient to it

thank you

Continue reading...