Flutter中使用CachedNetworkImage监听图片加载完成以显示其他组件

要实现图片完全加载后才显示文字组件，核心是利用CachedNetworkImage提供的加载回调控制文字的显示时机，具体步骤如下：

1. 管理加载状态 #

在你的Widget中添加状态变量，标记图片是否加载完成：

bool _isImageLoaded = false;

注：如果当前是StatelessWidget，需要改成StatefulWidget才能使用状态管理。

2. 配置CachedNetworkImage的加载回调 #

给CachedNetworkImage添加imageLoadedCallback参数，图片成功加载时更新状态：

CachedNetworkImage(
  fadeInDuration: const Duration(milliseconds: 300),
  imageUrl: image,
  height: double.infinity,
  fit: BoxFit.cover,
  // 图片加载完成触发的回调
  imageLoadedCallback: (image) {
    setState(() {
      _isImageLoaded = true;
    });
  },
  imageBuilder: (context, imageProvider) => Stack(children: [
    Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: imageProvider, fit: BoxFit.cover))),
    Container(
      color: Colors.black.withOpacity(0.4),
    )
  ]),
)

3. 控制文字组件的显示 #

把需要延迟显示的文字组件用状态变量控制，提供两种实现方式：

方式一：直接显示/隐藏（简单粗暴） #

Padding(
  padding: const EdgeInsets.only(left: 2.0, bottom: 2),
  child: Align(
    alignment: Alignment.bottomLeft,
    child: Visibility(
      visible: _isImageLoaded,
      child: Text(title),
    ),
  ),
),
Visibility(
  visible: _isImageLoaded && discount != 0,
  child: Align(
    alignment: Alignment.topRight,
    child: Container(
      margin: const EdgeInsets.only(top: 2, right: 2),
      padding: const EdgeInsets.all(2),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        gradient: const LinearGradient(
          begin: Alignment(-1.238, -1.313),
          end: Alignment(3.464, 3.196),
          colors: <Color>[
            Color(0xfff9d423),
            Color(0xfffc8e3a),
            Color(0xffff4e50)
          ],
          stops: <double>[0.038, 0.5, 0.928],
        ),
      ),
      child: Text("$discount%"),
    ),
  ),
)

方式二：添加淡入动画（更流畅） #

用AnimatedOpacity实现文字渐显效果，和图片的fadeInDuration保持一致，视觉更统一：

Padding(
  padding: const EdgeInsets.only(left: 2.0, bottom: 2),
  child: Align(
    alignment: Alignment.bottomLeft,
    child: AnimatedOpacity(
      opacity: _isImageLoaded ? 1.0 : 0.0,
      duration: const Duration(milliseconds: 300),
      child: Text(title),
    ),
  ),
),
Visibility(
  visible: discount != 0,
  child: Align(
    alignment: Alignment.topRight,
    child: AnimatedOpacity(
      opacity: _isImageLoaded ? 1.0 : 0.0,
      duration: const Duration(milliseconds: 300),
      child: Container(
        margin: const EdgeInsets.only(top: 2, right: 2),
        padding: const EdgeInsets.all(2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          gradient: const LinearGradient(
            begin: Alignment(-1.238, -1.313),
            end: Alignment(3.464, 3.196),
            colors: <Color>[
              Color(0xfff9d423),
              Color(0xfffc8e3a),
              Color(0xffff4e50)
            ],
            stops: <double>[0.038, 0.5, 0.928],
          ),
        ),
        child: Text("$discount%"),
      ),
    ),
  ),
)

额外说明 #

如果图片是从本地缓存加载，imageLoadedCallback会立即触发，文字不会有不必要的延迟，完全适配缓存场景。

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