Lottie Animation

The Lottie animation widget is a tool to display animations on the screen. It's very popular and often.You can activate and deactivate the Lottie animation in your Flutter Flow app using this feature.

The Lottie Animation widget lets you showcase Lottie files in your Flutter Flow app, whether they're from uploaded assets or a URL link.

Lottie files are top-notch—they don't lose quality like GIFs, they're compact, and they effortlessly integrate across platforms.

For instance, you can utilize the Lottie Animation widget to present a charmingly animated loading spinner, offering users a delightful experience while they wait.

Adding Animation To Your Project

To add the Lottie Widget to your project:

1. Select the Lottie widget from the Add Widget Button or add it directly from the widget tree.

2. For the Lottie Animation , select the Lottie Widget, and move to the Widget Properties (on the right side of your screen), and enter the Text you want.

Lottie Widget Properties

1. Lottie Path:

Locate the Path property and insert the URL for the new Lottie file.

2. Animate

By default, the animation starts playing as soon as the page loads. To change this and make the animation play only when you want, such as when clicking a button or another event, deselect the Animate checkbox.

3. Height & Width

The height and width attributes are used to specify the dimensions of the animated area, determining how much space the animation will occupy on the screen.

4. Frame Rate

Frame rate is the measurement of how quickly a number of frames appears within a second, which is why it's also called FPS (frames per second).

i.e Motion pictures, TV broadcasts, streaming video content, and even smartphones use the standard frame rate of 60fps.

5. Animation Type

1. Once: The animation runs only once.

2. Loop: The animation runs in loop or infinite times.

3. Boomerang: The animation runs in to and fro motion.

6. Alignment

1. None: Animation have no alignment.

2. Top Left: Animation shifts toward top left position of the original page.

3. Top Right: Animation shifts toward top right position of the original page.

4. Top Center: Animation shifts toward top center position of the original page.

5. Center Left: Animation shifts toward center left position of the original page.

6. Center: Animation shifts toward center position of the original page.

7. Center Right: Animation shifts toward center right position of the original page.

8. Bottom Left: Animation shifts toward bottom left position of the original page.

9. Bottom Right: Animation shifts toward bottom right position of the original page.

10. Bottom Center: Animation shifts toward bottom center position of the original page.

7. Box-Fit

1. None: It positions the child at the center of the parent by default and removes any parts of the child that extend beyond the parent's boundaries.

2. Fill: The child completely occupies the parent's box, but this might cause the child's original shape to change.

3. Contain: It adjusts its child to occupy as much space as it can within the parent widget's boundaries without going beyond them.

4. Cover: It minimizes the child's size to fit within the parent widget's boundaries while ensuring that the child remains completely covered.

5. Fit Height : It ensures that the child occupies the entire height of the parent, allowing the child to extend beyond the parent's boundaries horizontally, while still preserving its original shape.

6. Fit Width: It ensures that the child occupies the entire width of the parent, allowing the child to extend beyond the parent's boundaries vertically, while still preserving its original shape.

7. Scale Down: It overrides the property that we set or scale down the properties.