如何在Flutter中实现WebP动画无限循环播放？

首先明确：ImageRepeat属性是用来重复平铺静态图片的，和WebP动画的播放循环完全无关，你之前的尝试方向不对。下面是两种可行的解决方案：

1. 修改WebP文件本身的循环配置 #

大多数WebP动画默认只播放一次，你需要将其循环次数设置为0（代表无限循环）。可以用cwebp命令行工具修改：

cwebp -loop 0 你的原图片路径.webp -o 输出图片路径.webp

修改后的WebP文件，直接用原生Image.asset就能自动无限循环播放：

Image.asset('images/icon_loop.webp')

2. 用ExtendedImage手动控制动画循环 #

如果无法修改WebP文件，可以通过ExtendedImage的控制器监听动画状态，在动画结束时触发重复播放：

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';

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

  @override
  State<InfiniteLoopWebp> createState() => _InfiniteLoopWebpState();
}

class _InfiniteLoopWebpState extends State<InfiniteLoopWebp> with SingleTickerProviderStateMixin {
  late ExtendedImageController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = ExtendedImageController(vsync: this);
    // 监听动画状态，完成时重复播放
    _animationController.addListener(() {
      if (_animationController.status == AnimationStatus.completed) {
        _animationController.repeat();
      }
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ExtendedImage.asset(
      'images/icon.webp',
      controller: _animationController,
      fit: BoxFit.cover,
    );
  }
}

注意：第二种方法需要确保你的extended_image版本支持动画控制器的状态监听，建议使用最新稳定版。

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