DEV Community

DhiWise
DhiWise

Posted on • Originally published at Medium

Top 10 Flutter Animation Packages to Make the UI Feel More Intuitive

#flutter #design #beginners #tutorial

Top 10 Flutter Animation Packages to Make the UI Feel More Intuitive

Animations have the power to make your app feel more alive and intuitive. Well-designed animations give your app a visual edge with a smooth and professional UI appearance.

So, if you are planning to add animations to your Flutter application, this article will help you in figuring out the best Flutter animation packages for high-level interfaces.

Top Flutter animation packages

1. Animations

These are the official high-quality pre-built animation for commonly used effects. The animation can be tweaked to your content and applied to the UI.

The material motion is the set of transition patterns that assist users to understand and navigate an application.

Benefits of using the Animations package

  • Best for adding smooth transition patterns for user navigation.

  • For adding motion system animation in your app.

Material motion defines the following transition patterns.

  1. Container transform

  2. Shared axis

  3. Fade trough

  4. Fade

1. Container transform

It is designed for the transition between UI elements that include a container.

2. Shared axis

The shared axis transition pattern is used for transition between UI elements that have spatial or navigation relationships.

3. Fade through

The pattern is used for transition between UI elements that do not have a strong relationship with each other.

4. Fade

The pattern is used for UI elements that enter and exit within the screen bounds.

Installation:

Run the following command.

$ flutter pub add animations
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  animations: ^2.0.2
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:animations/animations.dart';
Enter fullscreen mode Exit fullscreen mode

2. Shimmer Animation

The package helps you to display simple yet beautiful skeleton loaders on UI which gives a pleasant loading experience. It is used by default in the skeleton loaders or placeholder widgets by the developer community.

Shimmer Animation Example

Installation:

Run the following command

$ flutter pub add animations
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  shimmer_animation: ^2.1.0+1
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:shimmer_animation/shimmer_animation.dart';
Enter fullscreen mode Exit fullscreen mode

3. Simple Animations

With simple_animation, developers can create bespoke animations in no time using stateless widgets. The package is fully tested, well documented, and ready to use in enterprise applications. With the package, developers can animate multiple properties at once and with Timeline Twin.

Installation:

Run the following command

$ flutter pub add simple_animations
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  simple_animations: ^4.0.1
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:simple_animations/simple_animations.dart';
Enter fullscreen mode Exit fullscreen mode

4. Staggered Animation

It is a useful package that lets you add ListView, GridView, Column, and Row children as per the material design principles.

Installation:

Run the following command

$ flutter pub add flutter_staggered_animations
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  flutter_staggered_animations: ^1.0.0
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import'package:flutter_staggered_animations/flutter_staggered_animations.dart';
Enter fullscreen mode Exit fullscreen mode

5. Curved Navigation Bar

This curved navigation bar package can be used for any mobile application. You can adjust the navigation bar color, background, and animation curve. Also, it comes with a customizable animation to perfectly fit your app.

Installation:

Run the following command

$ flutter pub add curved_navigation_bar
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  curved_navigation_bar: ^1.0.3
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
Enter fullscreen mode Exit fullscreen mode

6. Spring

Spring is a simple yet powerful pre-built animation kit for creating applications faster. It is used to add intriguing motion effects like pop, shake and flip to your widgets. The motion helps to improve app usability.

Installation:

Run the following command

$ flutter pub add spring
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  spring: ^2.0.2
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:spring/spring.dart';
Enter fullscreen mode Exit fullscreen mode

7. Animated Text Kit

The library contains a collection of some amazing test animations. It supports Rotate, Fade, Typer, Typewriter, Scale, Colorize, TextLiquidFill, Wavy, Flicker, and Custom animations.

Installation:

Run the following command

$ flutter pub add animated_text_kit
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  animated_text_kit: ^4.2.1
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:animated_text_kit/animated_text_kit.dart';
Enter fullscreen mode Exit fullscreen mode

8. Sprung

Sprung is an easy-to-consume curve that uses real physics equations to drive your animations. Sprung has three opinionated curves,

  • Sprung.underDamped

  • Sprung.criticallyDamped

  • Sprung.overDamped

Sprung Animation Example

Installation:

Run the following command

$ flutter pub add sprung
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  sprung: ^3.0.0
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:sprung/sprung.dart';
Enter fullscreen mode Exit fullscreen mode

9. Animated Widgets

The package is optimized for MVVM architecture using **Bloc. **It include following Widgets,

  • TranslationAnimatedWidget

  • OpacityAnimatedWidget

  • RotationAnimatedWidget

  • ScaleAnimatedWidget

  • SizeAnimatedWidget

Installation:

Run the following command

$ flutter pub add animated_widgets
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  animated_widgets: ^1.1.0
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:animated_widgets/animated_widgets.dart';
Enter fullscreen mode Exit fullscreen mode

10. Widget Circular Animator

The widget is inspired by the Lottie animation and can be used to animate another widget such as a profile, image, or anything else with simple modern animation to build UI better. Moreover, it is customizable according to your app use case and also supports flutter curves-animation.

Installation:

Run the following command

$ flutter pub add widget_circular_animator
Enter fullscreen mode Exit fullscreen mode

It will add a line to your package’s pubspec.yaml.

dependencies:
  widget_circular_animator: ^1.0.0
Enter fullscreen mode Exit fullscreen mode

Import the package in your dart code.

import 'package:widget_circular_animator/widget_circular_animator.dart';
Enter fullscreen mode Exit fullscreen mode

That’s all about the best Flutter animation packages, hope you find this article useful. If you think I missed any package here, feel free to leave a suggestion.

If you are planning to build your next Flutter app, try out DhiWise Flutter Builder to speed up your app development while having the best code quality.

Watch out for our YouTube video: Introduction to Flutter builder

“DhiWise is the world’s first ProCode platform for developing web and mobile apps faster. It supports a modern tech stack and provides state-of-the-art features every development team requires to build a reliable, scalable, and maintainable app with 2x efficiency. ”

Sign up today to make your app development project a breeze!

Top comments (0)

Read next

basskibo profile image

How to embed link with preview in React Application

Bojan Jagetic -

msh_sayket_6a8d9f36faac8a profile image

How to deploying Laravel projects on a live server – Complete Step-by-Step Guide

Msh Sayket -

madsstoumann profile image

Designing Better Tables: Using Popovers for Extra Data

Mads Stoumann -

imsushant12 profile image

A Guide for Securing Your Node.js Application

Sushant Gaurav -