Flutter中如何防止GIF播放结束后重置及优化加载速度

一、让GIF播放结束后停留在最后一帧 #

设置loop: false后默认会回到初始帧，我们可以通过监听控制器状态，在播放完成时锁定最后一帧：

1. 为GifController添加状态监听
2. 当状态变为AnimationStatus.completed时，将控制器的value设为GIF总时长，强制停在最后一帧
3. 组件销毁时移除监听，避免内存泄漏

修改后的代码示例：

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

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

  @override
  State<GifDemo> createState() => _GifDemoState();
}

class _GifDemoState extends State<GifDemo> {
  final controller = GifController(loop: false);

  @override
  void initState() {
    super.initState();
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        // 播放完成后固定在最后一帧
        controller.value = controller.duration ?? Duration.zero;
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return GifView.asset(
      "assets/1.gif",
      controller: controller,
      progress: const CircularProgressIndicator(),
    );
  }
}

二、优化GIF加载耗时 #

可以从以下几个方向优化加载速度：

1. 预加载GIF资源 #

提前将GIF加载到内存，避免播放时才开始加载：

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

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

  @override
  State<GifDemo> createState() => _GifDemoState();
}

class _GifDemoState extends State<GifDemo> {
  final controller = GifController(loop: false);
  Uint8List? _gifBytes;

  @override
  void initState() {
    super.initState();
    _preloadGif();
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.value = controller.duration ?? Duration.zero;
      }
    });
  }

  Future<void> _preloadGif() async {
    final bytes = await rootBundle.load("assets/1.gif");
    setState(() {
      _gifBytes = bytes.buffer.asUint8List();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    if (_gifBytes == null) {
      return const CircularProgressIndicator();
    }
    return GifView.memory(
      _gifBytes!,
      controller: controller,
    );
  }
}

2. 优化GIF文件本身 #

• 用压缩工具（如Ezgif）减少帧数、降低分辨率或压缩色彩
• 删除重复、过渡不明显的帧，缩短GIF总时长

3. 调整Flutter图片缓存 #

Flutter默认会缓存已加载的图片，可自定义缓存大小提升复用效率：

void main() {
  // 设置图片缓存最大容量为50MB
  PaintingBinding.instance.imageCache.maximumSizeBytes = 1024 * 1024 * 50;
  runApp(const MyApp());
}

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