CachedNetworkImage加载后不显示，需交互才显示的问题求助

问题原因 #

你遇到的CachedNetworkImage加载完成后不显示、需交互才出现的问题，核心原因是**Ink.image没有正确响应图片加载完成的状态变化**——当图片从网络缓存加载完成后，Ink.image没有自动触发组件重绘，只有页面交互触发重绘时才会渲染出图片。

另外你代码里的渐变容器高度设为全屏高度（MediaQuery.of(context).size.height），虽然父容器是固定1/3屏幕高的SizedBox，不会直接导致图片不显示，但属于冗余设置，建议调整为和父容器一致的高度。

解决方法 #

把imageBuilder里的Ink.image替换为更可靠的实现方式，比如用Container配合DecorationImage，或者直接用Image组件。以下是两种修改方案：

方案1：用Container+DecorationImage替代Ink.image

SizedBox _buildImage(BuildContext context) {
  return SizedBox(
    height: MediaQuery.of(context).size.height / 3,
    child: Stack(
      children: [
        Positioned.fill(
          child: CachedNetworkImage(
            imageUrl: event.pictureUrl,
            imageBuilder: (context, imageProvider) {
              return Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover,
                  ),
                ),
              );
            },
            progressIndicatorBuilder: (context, url, downloadProgress) {
              return const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    width: 50,
                    height: 50,
                    child: CircularProgressIndicator(
                      value: downloadProgress.progress,
                      color: Colors.black38,
                    ),
                  ),
                ],
              );
            },
            errorWidget: (context, url, error) {
              print(error);
              return Image.asset('assets/images/error.png');
            },
          ),
        ),
        Container(
          // 调整高度和父容器一致，避免冗余
          height: MediaQuery.of(context).size.height / 3,
          decoration: BoxDecoration(
            color: Colors.black,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.grey.withOpacity(0.0),
                Theme.of(context).scaffoldBackgroundColor,
              ],
              stops: const [0.9, 1],
            ),
          ),
        )
      ],
    ),
  );
}

方案2：直接使用Image组件

如果不需要Ink相关的点击效果，也可以直接用Image：

imageBuilder: (context, imageProvider) {
  return Image(
    image: imageProvider,
    fit: BoxFit.cover,
    width: double.infinity,
    height: double.infinity,
  );
},

额外说明 #

如果你的场景确实需要Ink的交互效果（比如水波纹），可以把Ink.image放在Material组件内部，确保Ink能正确关联到Material的上下文，从而触发重绘：

imageBuilder: (context, imageProvider) {
  return Material(
    child: Ink.image(
      image: imageProvider,
      fit: BoxFit.cover,
      child: Container(),
    ),
  );
},

内容的提问来源于stack exchange，提问作者vladli