Flutter中如何判断GIF单次播放完成并执行后续操作

原生的AssetImage没法控制GIF的播放循环次数，要实现单次播放后触发函数并切换Widget，你可以通过手动加载GIF资源、监听帧加载状态的方式来实现，具体方案如下：

核心思路 #

• 用rootBundle读取本地GIF的字节数据
• 通过ImageStream获取GIF的总帧数
• 监听每帧的加载事件，当播放到最后一帧时，触发自定义逻辑并切换Widget

完整代码示例 #

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

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  bool _gifPlayed = false;
  int _totalFrames = 0;
  int _currentFrame = 0;

  @override
  void initState() {
    super.initState();
    _loadGifAndListen();
  }

  Future<void> _loadGifAndListen() async {
    // 加载本地GIF资源
    final bytes = await rootBundle.load('images/splas_screen.GIF');
    final image = Image.memory(bytes.buffer.asUint8List());

    // 获取ImageStream并添加监听
    final stream = image.image.resolve(const ImageConfiguration());
    stream.addListener(ImageStreamListener((info, synchronousCall) {
      // 首次获取总帧数
      if (_totalFrames == 0) {
        _totalFrames = info.image.frameCount;
      }
      // 记录当前播放到的帧
      _currentFrame++;

      // 判断是否播放到最后一帧
      if (_currentFrame == _totalFrames && !_gifPlayed) {
        setState(() {
          _gifPlayed = true;
        });
        // 触发你需要执行的自定义函数
        _onGifPlayComplete();
      }
    }));
  }

  void _onGifPlayComplete() {
    // 这里写GIF播放完成后要执行的逻辑，比如跳转页面、初始化操作等
    print('GIF播放完成，执行自定义逻辑');
  }

  @override
  Widget build(BuildContext context) {
    if (_gifPlayed) {
      // GIF播放完成后显示的新Widget
      return const Scaffold(
        body: Center(
          child: Text('GIF播放完成，这是新页面'),
        ),
      );
    } else {
      // 初始显示GIF的Widget
      return Scaffold(
        body: Container(
          constraints: const BoxConstraints.expand(),
          child: const Image(
            image: AssetImage('images/splas_screen.GIF'),
            fit: BoxFit.fill,
          ),
        ),
      );
    }
  }
}

关键细节说明 #

• 用rootBundle加载资源是为了获取GIF的字节数据，从而能通过ImageStream获取帧信息
• info.image.frameCount可以拿到GIF的总帧数，每加载一帧_currentFrame自增，当两者相等时说明播放完成
• 通过_gifPlayed状态变量控制页面切换，确保只会触发一次完成逻辑

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