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




Android App Developer | Flutter Developer | Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Android — Raw GNSS Measurements

How to request/get Bluetooth Permission Android 12(API Level 31) or higher?

Get Data from firestore in Android Studio with Kotlin.

Android: Support multiple screen sizes by scaling dimensions

Android Programming — Handler Class tutorial

Adding a menu to the toolbar in Android

How Do I Download A Screen Saver For Android Tablet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rashmi Tank

Rashmi Tank

Android App Developer | Flutter Developer | Blogger

More from Medium

The Frosted Floating Bottom Bar in Flutter

Functional Error Handling in Flutter

MVVM Design Pattern in Flutter

Flutter Golden Testing with Bloc