Animating Flutter Widgets using fly_animation

Hi friends, we will learn how to use the fly_animation flutter package to animate a single widget and multiple widgets from one position to another.

So, let’s get started.

Add Package

fly_animation: ^0.0.2

Before using FlyAnimationWidget from fly_animation package, let’s first understand its properties:

• animationEndKey: key of the widget where the animation ends. You need to declare and pass GlobalKey to the widget where your animation ends.
• countOfAnimationWidgets: number of animation widgets that need to be created. countOfAnimationWidgets field value must be greater than 0.
• topPosition: top position of the animation widget to display on the screen. topPosition value must be greater than or equal to 0.
• childWidget: widgets tree to be displayed on the screen. The parent widget of the screen must be FlyAnimationWidget. The widget tree that you want to show on the screen must be passed to childWidget field.
• animationWidget: Its type is Widget so you can pass any widget that you want to animate to this field.
• animationWidgetWidth: Its value must be greater than 0. The width of the widget that you want to animate.
• animationWidgetHeight: Its value must be greater than 0. The height of the widget that you want to animate.
• animationDurationInMillis: animation duration in milliseconds
• hideAnimationWidgetOnComplete: Pass true if you want to hide animation widget on animation complete & pass false if you don’t want to hide it.

Let’s understand this with an example.

The output will be like this:

Example Code:

Example of fly_animation

This widget is available at fly_animation package and its source code is available here.

If you face any difficulties then you can comment here or in git.

If you like my blog and flutter package then please like it.

Also if you want to learn flutter and any other programming language tutorials then you can visit Flutter Learning