Scribd
Upload
18 views

Assignment 2

This document discusses 10 Flutter animation packages: 1. Animations - Provides high-quality pre-built animations for common effects like transitions. 2. Shimmer Animation - Helps display simple skeleton loaders to provide a pleasant loading experience. 3. Simple Animations - Allows creating bespoke animations using stateless widgets.

Uploaded by

05Bala Saatvik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

Assignment 2

This document discusses 10 Flutter animation packages: 1. Animations - Provides high-quality pre-built animations for common effects like transitions. 2. Shimmer Animation - Helps display simple skeleton loaders to provide a pleasant loading experience. 3. Simple Animations - Allows creating bespoke animations using stateless widgets.

Uploaded by

05Bala Saatvik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

T Bala Saatvik

71762108005

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

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

dependencies:
animations: ^2.0.2

Import the package in your dart code.

import 'package:animations/animations.dart';

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

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


dependencies:
shimmer_animation: ^2.1.0+1

Import the package in your dart code.


import 'package:shimmer_animation/shimmer_animation.dart';

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

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


dependencies:
simple_animations: ^4.0.1

Import the package in your dart code.


import 'package:simple_animations/simple_animations.dart';

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

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


dependencies:
flutter_staggered_animations: ^1.0.0
Import the package in your dart code.
import'package:flutter_staggered_animations/
flutter_staggered_animations.dart';

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

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


dependencies:
curved_navigation_bar: ^1.0.3

Import the package in your dart code.


import 'package:curved_navigation_bar/curved_navigation_bar.dart';

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

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


dependencies:
spring: ^2.0.2

Import the package in your dart code.


import 'package:spring/spring.dart';

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

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


dependencies:
animated_text_kit: ^4.2.1

Import the package in your dart code.


import 'package:animated_text_kit/animated_text_kit.dart';

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
It will add a line to your package’s pubspec.yaml.
dependencies:
sprung: ^3.0.0

Import the package in your dart code.


import 'package:sprung/sprung.dart';

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

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


dependencies:
animated_widgets: ^1.1.0

Import the package in your dart code.


import 'package:animated_widgets/animated_widgets.dart';
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
It will add a line to your package’s pubspec.yaml.
dependencies:
widget_circular_animator: ^1.0.0

Import the package in your dart code.


import
'package:widget_circular_animator/widget_circular_animator.dart';

You might also like