Awesome Flutter Animation: Examples and Demo

To make an app’s UI alive, we use animations which is a complex procedure.

Ways of Animation Implementation

There are 2 different ways of implementing animations you can use when creating animations in Flutter.

Implicit Animations

This type of animation can be created via using a widget that is provided by Flutter core. You can modify a widget property by setting a target value; whenever that target value changes, the widget animates the property from the old value to the new one.

For example, we use AnimatedAlign widget to make a widget change its position based on alignment property or AnimatedContainer to animate a Container’s change of property such as decoration, height, width.

Explicit Animations

Explicit animations are a set of controls for telling Flutter how to rapidly rebuild the widget tree while changing widget properties to create animation effects.

Flutter Animation Examples and Demo

Most want to see a demo or an example of an animation widget or library. That’s why I create this Flutter repository in hope to showcase built-in animation widgets and some popular libraries. The animation property is controlled via an AnimationController. It is often coupled with AnimatedBuilder widget to animate any of its children widgets.

In case of 3rd-party libraries, I mostly use the examples on their official page.

• See also: Best Free Flutter App Templates & UI Kits

Built-in widget

• AnimatedAlign
• AnimatedContainer
• AnimatedCrossFade
• AnimatedDefaultTextStyle
• AnimatedListState
• AnimatedOpacity
• AnimatedPhysicalModel
• AnimatedPositioned
• AnimatedModalBarrier
• AnimatedSize
• DecoratedBoxTransition
• FadeTransition
• PositionedTransition
• RotationTransition
• ScaleTransition
• SizeTransition
• SlideTransition
• AnimatedBuilder
• AnimatedWidget

Page Transition

• Slide From Edge
• Slide From Left To Right
• Fade
• Scale
• Size
• Rotate

Custom

• Accordion – Create expandable/collapsible effect.

• Stacked Menu – Actually I don’t know how to call this affect. It comes from this example. When hamburger menu is clicked, it moves the main page to the right as half ratio to reveal the main menu.

• Morning in the city – This consists of lots of animations to demonstrate Staggered animation.

• Flip Card: Create a flip card to show front and rear content with AnimatedSwitcher and AnimatedBuilder widgets.

Animation plugins

I composed a list of useful animation libraries for Flutter here.

• animated_widgets: These widgets are easier to use than the built-in ones. Animations can be chained.
• liquid_swipe: A cool animation for switching pages. I use the example on this page.
• simple_animations: Lots of cool animation can be done easily using this library. The maintainer’s examples are cool, so I just copy them to the app.
• path_morph: Simple arrow paths switching.
• drawing_animation: Animate SVG file drawing.

Source Code | Demo APK