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

Transfer and Delete files on Android device using ADB

Blur effect to views using Cloudy

Flutter app with a touch of Material You colors, please

Android Permissions System Vulnerabilities and Possible Workarounds

Flutter Puzzle Hack Updates

Implementation of Mixpanel in Android — Android Studio — Part 2(Final)

Introduction to Mobile Pentesting with Android — Set-Up

Introduction to Android Data Binding

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

Applying BDD in Flutter Integration Testing with GitLab Integration

Mocking Dependencies in Flutter Unit Tests

A Better Flutter App #8

How to Change app icon in flutter