LinearGradient with CachedNetworkImage flutter-CodePudding

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

CodePudding user response：

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(),
),