Add Lottie integration #285

onlymice · 2022-08-27T19:51:52Z

What does this change?

Adds lottie integration.
Checks for lottie files by in json tags
Example includes on how to use it
Docs changed accordingly

What's different now?

Previously HiroyukiTamura #70 implemented a Lottie integration per request #47 (comment) but as stated by britannio's #70 (comment) in the initial PR, their implementation will be better off checking for keys in the file itself, rather than only it's extension *_lottie.json as it was initially requested two years ago.

So I did.

Other issues

Why there is a lot of changes to tests

Initially Implementation of this feature required File read access, there was no issues with that if you run code as designed e.g

flutter packages pub run build_runner build

But if you try to run tests you might ended up seeing that the relative asset path that you get in isSupport is not relative to the Directory.current.path and the code in 'packages/core/lib' can't access it while running tests.

So I introduced mocked rootPath #assets_gen_integrations_test.dart#L13 for tests and now the AssetType has field for absolutePath that is constructed from the passed rootPath (config.rootPath) and the key/path.
Other integrations haven't tried to read files, cause they don't need it, so here we are, feel free to propose a better solution.

What is the value of this and can you measure success?

Measure

Pass tests.
No linting issues with generated code.
Example runs, plays the animation and works well.

Value

Others who tends to use Lottie in their projects will be happy to know that flutter_gen supports it

* example & test asset * auto strip "lottie" from final asset var name

* dropped support for '*_lottie.json' per FlutterGen#70 PR * include root path for tests * update example

* rename resourcesPath for better code readability

onlymice · 2022-08-27T20:04:05Z

For Discussion

I have set a strict version for lottie: '>=1.4.1 <2.0.0'
because lower versions accept different types for parameters.
1.1. we can use dynamic and recheck for allowed runtimeType in generated constructor.
1.2. leave as is.
keys are checked by every with list lottieKeys that must be included in the file for Lottie to render it properly,
the thing is that I haven't found the exact specification for what keys are required (and other libs don't even care if they don't exist), in fact the only thing I have found is that the version in the flutter Lottie package is set to check for >=4.4.0, and layers is where most of the data are.
2.1. choose what keys are actually required.
2.2. leave as is.

wasabeef · 2022-08-30T17:11:46Z

@onlymice

Thank you for your nice PR. I'll check it next week, so please wait. 🙏🏽

wasabeef · 2022-09-15T07:05:28Z

packages/core/pubspec.yaml

@@ -14,6 +14,7 @@ version_gen:
  path: lib/

 dependencies:
+  lottie: '>=1.4.1 <2.0.0'


You probably don't need dependencies on the core package.

wasabeef · 2022-09-15T07:08:54Z

packages/core/lib/settings/asset_type.dart

-  AssetType(this.path);
+  AssetType(this.path, String rootPath) : absolutePath = p.join(rootPath, path);
+
+  final String absolutePath;


We don't prefer to widen the influence range because it is only used in LottieIntegration#isSupport.

wasabeef · 2022-09-15T07:11:12Z

packages/core/lib/generators/assets_generator.dart

@@ -29,7 +30,7 @@ class AssetsGenConfig {

  factory AssetsGenConfig.fromConfig(File pubspecFile, Config config) {
    return AssetsGenConfig._(
-      pubspecFile.parent.path,
+      pubspecFile.parent.absolute.path,


We believe the problem can be solved by simply passing the RootPath to isSupport. No big changes to assets_generator.dart is needed.

wasabeef · 2022-09-15T07:12:12Z

packages/core/test/assets_gen_integrations_test.dart

@@ -31,8 +33,10 @@ void main() {
      expect(integration.className, 'SvgGenImage');
      expect(integration.classInstantiate('assets/path'),
          'SvgGenImage(\'assets/path\')');
-      expect(integration.isSupport(AssetType('assets/path/dog.svg')), isTrue);
-      expect(integration.isSupport(AssetType('assets/path/dog.png')), isFalse);
+      expect(integration.isSupport(AssetType('assets/path/dog.svg', resPath)),


We don't add any variables to the AssetType, so no changes here are needed either.

wasabeef · 2022-09-15T07:22:09Z

My codes.

integration.dart

abstract class Integration {
  // ..
  bool isSupport(AssetType type, {String? rootPath});
  // ..
}

svg/rive/flare integratinos.dart

class SvgIntegration extends Integration {
  // ..
  @override
  bool isSupport(AssetType type, {String? rootPath}) => type.mime == 'image/svg+xml';
  // ..
}

lottie integratinos.dart

class LottieIntegration extends Integration {
  // ..
  @override
  bool isSupport(AssetType type, {String? rootPath}) =>
      isLottieFile(type, rootPath ?? p.current);

  @override
  bool get isConstConstructor => true;

  bool isLottieFile(AssetType type, String rootPath) {
    if (!type.path.endsWith('.json')) {
      return false;
    }
    var input = File(p.join(rootPath, type.path)).readAsStringSync();
    var fileKeys = jsonDecode(input);
    if (fileKeys.runtimeType != Map &&
        !lottieKeys.every((key) => fileKeys.containsKey(key))) {
      return false;
    }
    var versions = fileKeys['v'];
    if (versions is! String) {
      return false;
    }
    var version = int.tryParse(versions.replaceAll('.', '')) ?? 0;
    // Lottie version 4.4.0 is the first version that supports BodyMovin.
    // https://github.com/xvrh/lottie-flutter/blob/0e7499d82ea1370b6acf023af570395bbb59b42f/lib/src/parser/lottie_composition_parser.dart#L60
    return version / 1000 >= 0.440;
  }

  // ..
}

assets_generator.dart

// ... only this
(element) => element.isSupport(assetType, rootPath: rootPath),
// ...

assets_gen_integrations_test.dart

   // No change except here
   // only add.
    test('Assets with Lottie integrations on pubspec.yaml', () async {
      const pubspec = 'test_resources/pubspec_assets_lottie_integrations.yaml';
      const fact =
          'test_resources/actual_data/assets_lottie_integrations.gen.dart';
      const generated =
          'test_resources/lib/gen/assets_lottie_integrations.gen.dart';

      await expectedAssetsGen(pubspec, generated, fact);

      final integration = LottieIntegration();
      expect(integration.className, 'LottieGenImage');
      expect(integration.classInstantiate('assets/lottie'),
          'LottieGenImage(\'assets/lottie\')');
      final testResPath = p.absolute('test_resources');   // 🌟
      expect(
          integration.isSupport(AssetType('assets/lottie/hamburger_arrow.json'),
              rootPath: testResPath),　// 🌟
          isTrue);
      expect(
          integration.isSupport(
              AssetType('assets/lottie/hamburger_arrow_without_version.json'),
              rootPath: testResPath),
          isFalse);
      expect(integration.isConstConstructor, isTrue);
    });

wasabeef · 2022-09-15T07:23:31Z

@onlymice Thanks for the great suggestions for a lottie users and me.

onlymice · 2022-09-19T18:48:19Z

Hi @wasabeef,
Hope you doing well,
I'm pinging you because I've decided to use a proper semver, my bad for not going with it initially 😅

updated code 🎯

bool isLottieFile(AssetType type) {
    try {
      if (type.extension != '.json') {
        return false;
      }
      String input = File(type.absolutePath).readAsStringSync();
      final fileKeys = jsonDecode(input) as Map<String, dynamic>;
      if (lottieKeys.every((key) => fileKeys.containsKey(key)) &&
          fileKeys['v'] != null) {
        var version = Version.parse(fileKeys['v']);
        // Lottie version 4.4.0 is the first version that supports BodyMovin.
        // https://github.com/xvrh/lottie-flutter/blob/0e7499d82ea1370b6acf023af570395bbb59b42f/lib/src/parser/lottie_composition_parser.dart#L60
        return version >= Version(4, 4, 0); 🎯
      }
    } on FormatException catch (e) {
      // Catches bad/corrupted json and reports it to user. 🎯
      stderr.writeln(e.message);
    }
    return false;
  }

wasabeef · 2022-09-28T07:33:27Z

Hi @onlymice,
I've merged #298 based on your PR codes created, it changed a few variable names, etc.
Thank you so much. We will be releasing v5.0.0 soon.

onlymice added 6 commits August 8, 2022 09:29

Add lottie integration

540a85c

* example & test asset * auto strip "lottie" from final asset var name

Update README.md

4c67e0b

Merge branch 'main' into feature/lottie

b1cd47c

Update lottie integration

7b66692

* dropped support for '*_lottie.json' per FlutterGen#70 PR * include root path for tests * update example

set: min lottie version

0d99dd0

* rename resourcesPath for better code readability

fix: version must be equals or more than 4.4.0

0fbaf3b

wasabeef self-requested a review August 30, 2022 17:09

wasabeef added 2 commits September 15, 2022 12:52

Merge branch 'main' into feature/lottie

ed7203e

fix merge

61ed3a9

wasabeef reviewed Sep 15, 2022

View reviewed changes

wasabeef added this to the v5.0.0 milestone Sep 15, 2022

onlymice added 2 commits September 19, 2022 23:24

support semver

800390a

change custom semver to pub_sem_ver

61db830

Merge branch 'main' into feature/lottie

2c54aad

wasabeef removed this from the v5.0.0 milestone Sep 27, 2022

wasabeef mentioned this pull request Sep 27, 2022

Add Lottie integration #298

Merged

wasabeef closed this Sep 28, 2022

wasabeef mentioned this pull request Sep 28, 2022

Release v5.0.0 #299

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Lottie integration #285

Add Lottie integration #285

onlymice commented Aug 27, 2022

onlymice commented Aug 27, 2022

wasabeef commented Aug 30, 2022

wasabeef Sep 15, 2022

wasabeef Sep 15, 2022 •

edited

wasabeef Sep 15, 2022

wasabeef Sep 15, 2022

wasabeef commented Sep 15, 2022

wasabeef commented Sep 15, 2022 •

edited

onlymice commented Sep 19, 2022 •

edited

wasabeef commented Sep 28, 2022 •

edited

Add Lottie integration #285

Add Lottie integration #285

Conversation

onlymice commented Aug 27, 2022

What does this change?

Related

What's different now?

Other issues

Why there is a lot of changes to tests

What is the value of this and can you measure success?

Measure

Value

onlymice commented Aug 27, 2022

For Discussion

wasabeef commented Aug 30, 2022

wasabeef Sep 15, 2022

Choose a reason for hiding this comment

wasabeef Sep 15, 2022 • edited

Choose a reason for hiding this comment

wasabeef Sep 15, 2022

Choose a reason for hiding this comment

wasabeef Sep 15, 2022

Choose a reason for hiding this comment

wasabeef commented Sep 15, 2022

wasabeef commented Sep 15, 2022 • edited

onlymice commented Sep 19, 2022 • edited

wasabeef commented Sep 28, 2022 • edited

wasabeef Sep 15, 2022 •

edited

wasabeef commented Sep 15, 2022 •

edited

onlymice commented Sep 19, 2022 •

edited

wasabeef commented Sep 28, 2022 •

edited