带有 CachedNetworkImage 抖动的 LinearGradient

Question

我设计了一张带有 LinearGradient 的图片，如下所示

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],
            )),
    ),
);

但是在了解了 CachedNetworkImage 的重要性后，我们实现了如下

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

如何添加 LinearGradient 到其中

谢谢你

Answer 1

CachedNetworkImage

还提供

imageBuilder

，你可以使用。

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

Answer 2

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: CachedNetworkImageProvider(
        'https://picsum.photos/500/500?random=img',
      ),
      fit: BoxFit.cover,
    ),
  ),
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.black, Colors.transparent],
        begin: Alignment.bottomCenter,
        end: Alignment.topCenter,
        stops: [0.01, 1],
      ),
    ),
  ),
)