Flutter中如何为Shimmer效果设置间隔停顿？

问题核心 #

直接用Timer.periodic切换enabled状态会导致动画不同步——Shimmer动画还没完整播放就被强制停止，出现中途中断的问题；而支持间隔配置的shimmer_animation包无法适配CustomPainter组件。

解决方案 #

通过监听Shimmer动画的完成状态，在动画自然结束后再启动停顿定时器，确保每次动画完整播放后才进入停顿阶段，避免中途打断。

代码示例：

bool _shimmerEnabled = false;
Timer? _delayTimer;

@override
void initState() {
  super.initState();
  // 初始启动一次动画
  _startShimmer();
}

void _startShimmer() {
  setState(() => _shimmerEnabled = true);
  // 等待组件构建完成后监听动画状态
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final shimmerState = Shimmer.of(context);
    if (shimmerState != null) {
      shimmerState.controller.addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          // 动画播放完成后，启动停顿定时器
          _delayTimer = Timer(const Duration(milliseconds: 1500), () {
            _startShimmer();
          });
          setState(() => _shimmerEnabled = false);
        }
      });
    }
  });
}

@override
void dispose() {
  _delayTimer?.cancel();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Shimmer.fromColors(
    baseColor: primaryColor,
    highlightColor: Colors.white,
    enabled: _shimmerEnabled,
    child: CustomPaint(
      painter: YourCustomPainter(),
      // 自定义绘制的其他配置
    ),
  );
}

关键逻辑说明 #

1. 放弃固定周期定时器，改为监听Shimmer动画的AnimationStatus.completed状态，确保动画完整播放
2. 动画结束后关闭enabled进入停顿，停顿时间由延迟Timer控制，时间到后重新启动动画
3. 在组件销毁时取消定时器，避免内存泄漏

效果展示 #

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