LinearGradient with CachedNetworkImage flutter - flutter

Question

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

Answer 1

CachedNetworkImage also provide imageBuilder, you can use it.
CachedNetworkImage(
imageUrl: "",
imageBuilder: (context, imageProvider) {
return Container(
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
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],
)),
),
);
},
progressIndicatorBuilder: (context, url, progress) =>
CircularProgressIndicator(),
),