xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.17k stars 200 forks source link

Is it possible to show tgs file in Lottie? #266

Open AnanthGopal opened 1 year ago

cliftonlabrum commented 1 year ago

@AnanthGopal Did you ever find a way to make tgs files work?

cliftonlabrum commented 1 year ago

Looks like you have to decompress the tgs file with dart:io like this:

import 'dart:io' as io;
import 'package:path/path.dart';

//Get a reference to the local TGS file
final file = File(tgsLocalPath);

//Prepare a new path with a .json extension
final jsonPath = '${file.parent.path}/${basenameWithoutExtension(tgsLocalPath)}.json';

//Unzip TGS with GZip Codec
final archive = io.GZipCodec().decode(your.readAsBytesSync());

//Write as JSON file
File(jsonPath).writeAsBytesSync(archive);

//Ready for Lottie
return Lottie.file(
  File(jsonPath)
)

I learned this from a fork of lottie-flutter here: https://github.com/agusibrahim/lottie-flutter-tgs/commit/3ff7cdf72d9e818f73c4886db7c643c996d8f44b#diff-f5176f7fd845d3a454f9612bdc1056706a078784b6ab7dbb96ed9e4e95b54a8c

xvrh commented 1 year ago

Starting from version v3.0.0-alpha.1, you can load .tgs file like that:

Lottie.asset(
  'sticker.tgs',
  decoder: LottieComposition.decodeGZip,
)