Modern animation systems are being incorporated as a functional element of the application that not only improves the decor but enhances the overall user experience. Using motion and feedback animations inside your UI components is one of the first steps in enhancing the UX.

Flutter being the underlying framework used by FlutterFlow includes Material widgets that come with the standard motion effects defined in their design spec which are also customizable.

This article will help you to get a better understanding of the different types of animations supported by FlutterFlow and which one you should choose depending on your use case.

Envisioning your animation

Before you get started defining your animation, first you should take a moment to think about how your animation looks like.

Is it more like a drawing having a complex movement, or is it just using the layout components having a more subtle animation?

‍

The first animation (left) is quite complex character animation, you can see that it looks like a drawing and not like any traditional UI components used in any mobile app. For creating these types of animation the best tool to opt for is Rive or Lottie which contains the right tools for designing them. You can then directly import the Rive or Lottie asset to your FlutterFlow app for displaying them inside the app.

The second animation (right) uses the layout components (known as widgets in Flutter) and adds subtle motion to them for creating a pleasant experience within the app. These types of animation can be created right from the FlutterFlow UI Builder.

We'll discuss both of these types of animations, how to create them, and use them inside your app.

Widget based animation

The layout animations (known as widget animation) can be categorized into two types:

• Implicit animation
• Explicit animation

Some widgets already come with motion animation built in that will work out of the box, these types of animations are known as implicit animations. While using these types of animations you won't need to define the animation curve, duration, or set any trigger to start/stop it.

The animations that you have to define explicitly by specifying the curve, duration, and type of trigger are known as explicit animations. You can set them on various widgets including the ones that already have the implicit animations built-in.

Here, the two categories of animations are described from the standpoint of FlutterFlow, Flutter's concept of implicit and explicit animation is slightly different.

Implicit animation

Let's take a look at some of the ways in which you can take advantage of the implicitly animated widgets using FlutterFlow.

Built-in widget animation

A lot of base widgets have simple motion-based animation built-in as they belong from the Material widget library of Flutter. But a few of the widgets' animation has been made implicit by FlutterFlow so that it's a lot easier to use inside your app.

ProgressBar is one of such widgets that can be easily animated with just a single toggle. To use this widget with animation:

1. Drag and drop a ProgressBar widget (from the Widget Panel, present on the left) onto the canvas.
2. Customize the properties of the widget from the Properties Panel (right menu).
3. Check the Animate Progress checkbox. This would animate the progress bar's value as the page loads.

‍

‍