Remove direct dependency on dart:io (#90)

- Fix a couple of bug with JSON decoding with Dart Dev Compiler
- Support loading animation from network in the web version

CHANGELOG.md

@@ -1,3 +1,32 @@
+## [0.5.1]
+- Remove direct dependencies on dart:io to support Flutter Web
+
+## [0.5.0]
+- Support loading animation from network in a web app
+- Fix a couple of bugs with the web dev compiler
+
+## [0.4.1]
+- Support color value stored as RGB, not RGBA 
+
+## [0.4.0+1]
+- Support latest version of the `characters` package
+
+## [0.4.0]
+- Disable "Merge paths" by default and provide an option to enable them.  
+This is the same behavior as in Lottie-android.  
+Merge paths currently don't work if the the operand shape is entirely contained within the
+first shape. If you need to cut out one shape from another shape, use an even-odd fill type
+instead of using merge paths.
+
+Merge paths can be enabled with:
+```dart
+Lottie.asset('file.json', options: LottieOptions(enableMergePaths: true));
+```
+
+
+## [0.3.6]
+- Export the `Marker` class
+
 ## [0.3.5]
 - Fix a bug with a wrongly clipped rectangle. 
 

README.md

@@ -3,12 +3,12 @@
 [![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)
 [![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)
 
-Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) 
+Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) 
 animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
 
 This repository is a unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart. 
 
-It works on Android, iOS and macOS. ([Web support is coming](https://github.com/xvrh/lottie-flutter#flutter-web))
+It works on Android, iOS and macOS and web.
 
 ## Usage
 
@@ -122,13 +122,14 @@ Lottie.asset(
 animation.
 
 ### Custom loading
-This example shows how to load and parse a Lottie composition from a json file.  
-
 The `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and
 cache automatically the json file.
 
 Sometime you may prefer to have full control over the loading of the file. Use `LottieComposition.fromByteData` to 
 parse the file from a list of bytes.
+
+This example shows how to load and parse a Lottie composition from a json file.  
+
 ```dart
 class MyWidget extends StatefulWidget {
   @override
@@ -245,17 +246,13 @@ class _Animation extends StatelessWidget {
 ````
 
 ## Limitations
-This is a new library so usability, documentation and performance are still work in progress.
-
 Only the [supported features of Lottie Android](https://airbnb.io/lottie/#/supported-features)
 are supported in this port.
 
 ## Flutter Web
 Run the app with `flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release`
 
-The performance are not great and some features are missing.
-
 See a preview here: https://xvrh.github.io/lottie-flutter/index.html
 
-## Complete example
+## More examples
-See the Sample app (in the `example` folder) for a complete example of the various possibilities.
+See the `example` folder for more code samples of the various possibilities.

README.template.md

@@ -3,12 +3,12 @@
 [![](https://github.com/xvrh/lottie-flutter/workflows/Lottie%20Flutter/badge.svg?branch=master)](https://github.com/xvrh/lottie-flutter)
 [![pub package](https://img.shields.io/pub/v/lottie.svg)](https://pub.dev/packages/lottie)
 
-Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) 
+Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) 
 animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
 
 This repository is a unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart. 
 
-It works on Android, iOS and macOS. ([Web support is coming](https://github.com/xvrh/lottie-flutter#flutter-web))
+It works on Android, iOS and macOS and web.
 
 ## Usage
 
@@ -48,13 +48,14 @@ Lottie.asset(
 animation.
 
 ### Custom loading
-This example shows how to load and parse a Lottie composition from a json file.  
-
 The `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and
 cache automatically the json file.
 
 Sometime you may prefer to have full control over the loading of the file. Use `LottieComposition.fromByteData` to 
 parse the file from a list of bytes.
+
+This example shows how to load and parse a Lottie composition from a json file.  
+
 ```dart
 import 'example/lib/examples/custom_load.dart#example';
 ```
@@ -77,17 +78,13 @@ import 'example/lib/examples/simple_dynamic_properties.dart#example';
 ````
 
 ## Limitations
-This is a new library so usability, documentation and performance are still work in progress.
-
 Only the [supported features of Lottie Android](https://airbnb.io/lottie/#/supported-features)
 are supported in this port.
 
 ## Flutter Web
 Run the app with `flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release`
 
-The performance are not great and some features are missing.
-
 See a preview here: https://xvrh.github.io/lottie-flutter/index.html
 
-## Complete example
+## More examples
-See the Sample app (in the `example` folder) for a complete example of the various possibilities.
+See the `example` folder for more code samples of the various possibilities.

example/assets/example_with_images/data.json

@@ -0,0 +1,833 @@
+{
+  "v": "5.6.9",
+  "fr": 25,
+  "ip": 0,
+  "op": 75,
+  "w": 1200,
+  "h": 1200,
+  "nm": "Character-side v1",
+  "ddd": 0,
+  "assets": [
+    {
+      "id": "image_0",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_0.png",
+      "e": 0
+    },
+    {
+      "id": "image_1",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_1.png",
+      "e": 0
+    },
+    {
+      "id": "image_2",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_2.png",
+      "e": 0
+    },
+    {
+      "id": "image_3",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_3.png",
+      "e": 0
+    },
+    {
+      "id": "image_4",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_4.png",
+      "e": 0
+    },
+    {
+      "id": "image_5",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_5.png",
+      "e": 0
+    },
+    {
+      "id": "image_6",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_6.png",
+      "e": 0
+    },
+    {
+      "id": "image_7",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_7.png",
+      "e": 0
+    },
+    {
+      "id": "image_8",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_8.png",
+      "e": 0
+    },
+    {
+      "id": "image_9",
+      "w": 1200,
+      "h": 1200,
+      "u": "images/",
+      "p": "img_9.png",
+      "e": 0
+    }
+  ],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 2,
+      "nm": "F ARM Up",
+      "parent": 8,
+      "refId": "image_0",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                0
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                67
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                0
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            296.734,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            296.734,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 2,
+      "nm": "F ARM Low",
+      "parent": 2,
+      "refId": "image_1",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                43
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                0
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                43
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            439.113,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            439.113,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 2,
+      "nm": "F Hand",
+      "parent": 3,
+      "refId": "image_2",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                41
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                0
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                41
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            584.501,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            584.501,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 2,
+      "nm": "F LEG Up",
+      "refId": "image_3",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 90,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 6,
+      "ty": 2,
+      "nm": "F LEG Low",
+      "parent": 5,
+      "refId": "image_4",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": -90,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            608.016,
+            829.202,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            608.016,
+            829.202,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 7,
+      "ty": 2,
+      "nm": "F Foot",
+      "parent": 6,
+      "refId": "image_5",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            608.863,
+            1058.742,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            608.863,
+            1058.742,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 8,
+      "ty": 2,
+      "nm": "Body",
+      "parent": 11,
+      "refId": "image_6",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            605.434,
+            468.468,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            605.434,
+            468.468,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 9,
+      "ty": 2,
+      "nm": "Head",
+      "parent": 8,
+      "refId": "image_7",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            623.019,
+            263.511,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            623.019,
+            263.511,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 10,
+      "ty": 2,
+      "nm": "Hair",
+      "parent": 9,
+      "refId": "image_8",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            600,
+            600,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            600,
+            600,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 11,
+      "ty": 2,
+      "nm": "Waist",
+      "refId": "image_9",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 0,
+              "s": [
+                0
+              ]
+            },
+            {
+              "i": {
+                "x": [
+                  0.333
+                ],
+                "y": [
+                  1
+                ]
+              },
+              "o": {
+                "x": [
+                  0.667
+                ],
+                "y": [
+                  0
+                ]
+              },
+              "t": 25,
+              "s": [
+                -70
+              ]
+            },
+            {
+              "t": 50,
+              "s": [
+                0
+              ]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [
+            604.854,
+            589.662,
+            0
+          ],
+          "ix": 1
+        },
+        "s": {
+          "a": 0,
+          "k": [
+            100,
+            100,
+            100
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 250,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": [
+    {
+      "tm": 25,
+      "cm": "9",
+      "dr": 0
+    }
+  ]
+}

example/assets/example_with_images/images/img_0.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFA913;}
+</style>
+<path class="st0" d="M641.59,439.11l7.69-142.38c0-14.5-11.76-26.26-26.26-26.26c-14.5,0-26.26,11.76-26.26,26.26l7.69,142.38
+	c0,10.26,8.31,18.57,18.57,18.57C633.28,457.68,641.59,449.37,641.59,439.11z"/>
+</svg>

example/lib/examples/animate_no_repeat.dart

@@ -5,23 +5,15 @@ void main() async {
   runApp(App());
 }
 
-class App extends StatefulWidget {
+class App extends StatelessWidget {
   const App({Key key}) : super(key: key);
 
-  @override
-  _AppState createState() => _AppState();
-}
-
-class _AppState extends State<App> with TickerProviderStateMixin {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       color: Colors.lightBlue,
       home: Scaffold(
         backgroundColor: Colors.lightBlue,
-        appBar: AppBar(
-          title: Text(''),
-        ),
         body: Center(
           child: SizedBox(
             width: 300,

example/lib/examples/markers.dart

@@ -0,0 +1,122 @@
+import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
+
+/// This example shows how to play the animation between two markers.
+/// It is based on this article for lottie-ios:
+/// https://medium.com/swlh/controlling-lottie-animation-with-markers-5e9035d94623
+void main() async {
+  runApp(App());
+}
+
+class App extends StatefulWidget {
+  const App({Key key}) : super(key: key);
+
+  @override
+  _AppState createState() => _AppState();
+}
+
+class _AppState extends State<App> with TickerProviderStateMixin {
+  Future<LottieComposition> _composition;
+
+  @override
+  void initState() {
+    super.initState();
+    _composition = AssetLottie('assets/TwitterHeartButton.json').load();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData.dark(),
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Markers'),
+        ),
+        body: FutureBuilder<LottieComposition>(
+          future: _composition,
+          builder: (context, snapshot) {
+            if (snapshot.hasError) return ErrorWidget(snapshot.error);
+            if (!snapshot.hasData) return CircularProgressIndicator();
+            return _LottieDetails(snapshot.data);
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class _LottieDetails extends StatefulWidget {
+  final LottieComposition composition;
+
+  const _LottieDetails(this.composition, {Key key}) : super(key: key);
+
+  @override
+  _LottieDetailsState createState() => _LottieDetailsState();
+}
+
+class _LottieDetailsState extends State<_LottieDetails>
+    with TickerProviderStateMixin {
+  AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(vsync: this);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      children: [
+        Lottie(
+          composition: widget.composition,
+          controller: _controller,
+          height: 150,
+        ),
+        ListTile(
+          title: Text('Composition start frame'),
+          trailing: Text(widget.composition.startFrame.toStringAsFixed(1)),
+        ),
+        ListTile(
+          title: Text('Composition duration'),
+          trailing: Text(widget.composition.durationFrames.toStringAsFixed(1)),
+        ),
+        RaisedButton(
+          child: Text('touchDownEnd - touchUpCancel'),
+          onPressed: () => _playBetween('touchDownEnd', 'touchUpCancel'),
+        ),
+        RaisedButton(
+          child: Text('touchDownStart - touchDownEnd'),
+          onPressed: () => _playBetween('touchDownStart', 'touchDownEnd'),
+        ),
+        RaisedButton(
+          child: Text('touchDownEnd - touchUpEnd'),
+          onPressed: () => _playBetween('touchDownEnd', 'touchUpEnd'),
+        ),
+        for (var marker in widget.composition.markers)
+          ListTile(
+            title: Text(marker.name),
+            subtitle: Text(
+                '${marker.startFrame.toStringAsFixed(1)} ${marker.durationFrames.toStringAsFixed(1)}'),
+            trailing: Text(
+                '[${marker.start.toStringAsFixed(2)}-${marker.end.toStringAsFixed(2)}]'),
+          ),
+      ],
+    );
+  }
+
+  void _playBetween(String marker1, String marker2) {
+    var start = widget.composition.getMarker(marker1).start;
+    var end = widget.composition.getMarker(marker2).start;
+
+    _controller.value = start;
+    _controller.animateTo(end,
+        duration: widget.composition.duration * (end - start).abs());
+  }
+}

example/lib/src/all_files.g.dart

@@ -1,6 +1,7 @@
 // Generated from tool/generate_file_list.dart
 final files = [
   'assets/14595-thumbs-up.json',
+  'assets/17297-fireworks.json',
   'assets/AndroidWave.json',
   'assets/DynamicGradient.json',
   'assets/HamburgerArrow.json',
@@ -106,6 +107,10 @@ final files = [
   'assets/Tests/dalek_converted.json',
   'assets/Tests/hd.json',
   'assets/Tests/map.zip',
+  'assets/TwitterHeartButton.json',
+  'assets/_loading_indicator.json',
+  'assets/bluetoothscanning.json',
+  'assets/example_with_images/data.json',
   'assets/lf20_w2Afea.json',
   'assets/lottiefiles/100_percent.json',
   'assets/lottiefiles/Plane.json',
@@ -340,4 +345,11 @@ final files = [
   'assets/lottiefiles/xuanwheel_logo.json',
   'assets/lottiefiles/yoga_carpet.json',
   'assets/lottiefiles/youtube_icon_reveal.json',
+  'assets/playing.json',
+  'assets/weather/_hurricane.json',
+  'assets/weather/fog.json',
+  'assets/weather/hurricane.json',
+  'assets/weather/thunder-storm.json',
+  'assets/weather/tornado.json',
+  'assets/weather/windy.json',
 ];

example/pubspec.lock

@@ -35,7 +35,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.5.0"
+    version: "1.0.0"
   charcode:
     dependency: transitive
     description:
@@ -70,7 +70,7 @@ packages:
       name: crypto
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.4"
+    version: "2.1.5"
   fake_async:
     dependency: transitive
     description:
@@ -78,6 +78,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.0"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.2.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -101,14 +108,14 @@ packages:
       name: golden_toolkit
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.2"
+    version: "0.6.0"
   http:
     dependency: "direct main"
     description:
       name: http
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.1"
+    version: "0.12.2"
   http_parser:
     dependency: transitive
     description:
@@ -116,6 +123,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.1.4"
+  intl:
+    dependency: transitive
+    description:
+      name: intl
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.16.1"
   logging:
     dependency: transitive
     description:
@@ -129,7 +143,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.3.4"
+    version: "0.4.1"
   matcher:
     dependency: transitive
     description:
@@ -157,14 +171,21 @@ packages:
       name: path_provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.8"
+    version: "1.6.11"
+  path_provider_linux:
+    dependency: transitive
+    description:
+      name: path_provider_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.1+2"
   path_provider_macos:
     dependency: transitive
     description:
       name: path_provider_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.4+2"
+    version: "0.0.4+3"
   path_provider_platform_interface:
     dependency: transitive
     description:
@@ -193,6 +214,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
+  process:
+    dependency: transitive
+    description:
+      name: process
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.13"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -239,7 +267,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.15"
+    version: "0.2.16"
   typed_data:
     dependency: transitive
     description:
@@ -254,6 +282,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.8"
+  xdg_directories:
+    dependency: transitive
+    description:
+      name: xdg_directories
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.0"
 sdks:
   dart: ">=2.7.0 <3.0.0"
   flutter: ">=1.12.13+hotfix.5 <2.0.0"

example/pubspec.yaml

@@ -35,6 +35,8 @@ flutter:
     - assets/Images/
     - assets/Images/WeAccept/
     - assets/Weather/
+    - assets/example_with_images/
+    - assets/example_with_images/images/
 
   fonts:
     - family: Comic Neue