A picture paints an thousand words, an animation more…
A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. https://lottiefiles.com
I want to start with a typical case where we are waiting for something to load, in this case the animation will repeat and let the user know we are working on their request.
I’ve abstracted this into a new widget in our DigestableLego library called DlLottie.
In order to allow designers to test the look and feel of any Lottie animation, I’ve added a Knob to the Widgetbook use case that accepts a Json string.
If you are new to Widgetbook you can find links to the posts and a quick start guide below.
Ta Da
Xp
Quick Start
Just download the component library DigestableLego.
Open in Visual Studio code and run the following two launch agents 
.
Then download any Lottie Json files https://lottiefiles.com and just copy the contents and paste it into the knob:
Links
- Widgetbook (Storybook) – Part 1
- Widgetbook (Storybook) – Part 2
- Lottie package
- Dart/Flutter – Convert/Parse JSON string, array into Object, List
