如何在Flutter中实现多张图片衔接的循环淡入淡出链式动画

需求：多张图片按顺序淡入淡出切换，整套动画播放完成后自动循环，无额外依赖，适合新手快速落地

核心实现思路 #

直接使用Flutter官方提供的AnimatedSwitcher组件配合定时器实现，无需引入第三方插件，原生组件经过官方性能优化，稳定性高，代码逻辑简单易懂，后续维护成本极低。

完整可运行示例代码 #

import 'package:flutter/material.dart';

class ImageFadeAnimator extends StatefulWidget {
  const ImageFadeAnimator({super.key});

  @override
  State<ImageFadeAnimator> createState() => _ImageFadeAnimatorState();
}

class _ImageFadeAnimatorState extends State<ImageFadeAnimator> {
  // 替换为你自己的图片资源路径列表
  final List<String> _imageAssets = [
    'assets/img_1.png',
    'assets/img_2.png',
    'assets/img_3.png',
    'assets/img_4.png',
  ];
  int _currentImgIndex = 0;
  // 淡入淡出动画的持续时长，可自行调整
  final Duration _fadeDuration = const Duration(milliseconds: 600);
  // 每张图片静态展示的时长，可自行调整
  final Duration _displayDuration = const Duration(seconds: 2);

  @override
  void initState() {
    super.initState();
    // 预加载所有图片，避免首次切换时出现卡顿
    _preloadAllImages();
    // 启动图片自动切换循环
    _startSwitchLoop();
  }

  void _preloadAllImages() {
    for (String assetPath in _imageAssets) {
      precacheImage(AssetImage(assetPath), context);
    }
  }

  void _startSwitchLoop() {
    Future.delayed(_displayDuration, () {
      if (!mounted) return;
      setState(() {
        // 取模运算实现循环切换，索引到最后一张后自动回到第一张
        _currentImgIndex = (_currentImgIndex + 1) % _imageAssets.length;
      });
      _startSwitchLoop();
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: _fadeDuration,
      // 配置转场效果为淡入淡出
      transitionBuilder: (child, animation) => FadeTransition(
        opacity: animation,
        child: child,
      ),
      child: Image.asset(
        _imageAssets[_currentImgIndex],
        // 必须给每个子组件设置唯一key，AnimatedSwitcher才会触发切换动画
        key: ValueKey(_currentImgIndex),
        fit: BoxFit.cover,
      ),
    );
  }
}

使用说明 #

• 先将代码里的_imageAssets列表替换为你自己的图片资源路径，确保已经在pubspec.yaml的assets节点下正确声明了对应资源
• 可根据需求调整_fadeDuration和_displayDuration两个参数，自定义动画速度和图片停留时长
• 直接把ImageFadeAnimator组件放到页面需要展示动画的位置即可使用

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