如何将Telegram动图贴纸.tgs移植到Flutter项目中？

.tgs本质是Telegram基于Lottie动画标准压缩的动图格式，直接用Flutter的lottie包就能实现展示，以下是具体步骤和代码示例：

1. 添加依赖 #

在项目的pubspec.yaml中引入lottie包（建议使用最新稳定版本）：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^2.7.0

执行flutter pub get完成依赖安装。

2. 加载并展示.tgs贴纸 #

方式一：加载本地.tgs文件 #

1. 将.tgs文件放入项目的assets目录（比如assets/stickers/hello.tgs），然后在pubspec.yaml中声明资源：

flutter:
  assets:
    - assets/stickers/hello.tgs

2. 使用Lottie.asset组件渲染：

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

class TgsLocalSticker extends StatelessWidget {
  const TgsLocalSticker({super.key});

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/stickers/hello.tgs',
      width: 200,
      height: 200,
      fit: BoxFit.contain,
      repeat: true, // 控制是否循环播放，默认true
      animate: true, // 控制是否自动播放，默认true
    );
  }
}

方式二：加载网络.tgs文件 #

直接通过网络URL加载，无需本地资源配置：

Lottie.network(
  'https://your-domain.com/stickers/hello.tgs',
  width: 200,
  height: 200,
  fit: BoxFit.contain,
  // 可选：添加加载中和错误状态占位
  placeholder: (context) => const CircularProgressIndicator(),
  errorBuilder: (context, error, stackTrace) => const Icon(Icons.error_outline),
);

3. 自定义播放控制 #

如果需要手动控制播放、暂停、重置等操作，可使用LottieController：

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

  @override
  State<ControlledTgsSticker> createState() => _ControlledTgsStickerState();
}

class _ControlledTgsStickerState extends State<ControlledTgsSticker> with TickerProviderStateMixin {
  late final LottieController _controller;

  @override
  void initState() {
    super.initState();
    _controller = LottieController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Lottie.asset(
          'assets/stickers/hello.tgs',
          controller: _controller,
          width: 200,
          height: 200,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(icon: const Icon(Icons.play_arrow), onPressed: () => _controller.play()),
            IconButton(icon: const Icon(Icons.pause), onPressed: () => _controller.pause()),
            IconButton(icon: const Icon(Icons.stop), onPressed: () => _controller.reset()),
          ],
        ),
      ],
    );
  }
}

4. 注意事项 #

• .tgs是ZIP压缩的Lottie JSON文件，lottie包会自动完成解压和解析，无需手动处理。
• 若加载失败，优先检查本地资源路径是否正确，或网络URL是否可正常访问。
• 可通过LottieBuilder的options参数自定义动画渲染，比如替换颜色、调整帧率等。

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